Используйте путь экспорта PaperJS с Hummus PDF JS

Question

Я пытаюсь нарисовать пути с помощью Hummus PDF JS на основе путей, экспортированных из PaperJS.

Следовательно, вывод данных PaperJS будет вводом данных для Hummus.

Эти две библиотеки работают по-разному для создания кривых. PaperJS использует ручки для изгибания прямых линий, в то время как Hummus изогнет линию на основе 3 точек.

Допустим, я хочу получить кривую линию, которая проходит через 3 ключевые точки: [200, 100] -> [300, 200] -> [400, 100]. Понравилась эта картинка:

С PaperJS мне придется сделать что-то вроде этого:

var vector = new Point({
    angle: 45,
    length: 188
});

var path = new Path({
    strokeColor: 'blue',
    segments: [
        [[200, 100], null, vector],
        [[400, 100], vector.rotate(90), null]
    ],

});

Тем не менее, с Hummus, мне придется использовать оператор c(inX1,inY1,inX2,inY2,inX3,inY3) отсюда было бы что-то вроде этого: c(200, 100, 300, 325, 400, 100);

Разве я не использую неправильный оператор?

Моя цель здесь - просто понять, как получить данные из PaperJS и сделать их пригодными для рисования с помощью Hummus.

Answer 1

Код, который вы показываете для Paper.js, предназначен для определения пути, состоящего из двух линий (в виде векторов), магически соединенных с помощью операции соединения Paper.js по умолчанию.

Поэтому, если вы хотите, чтобы Hummus делал то же самое, либо посмотрите, как заставить его делать то же самое, либо вручную сгенерируйте два отрезка, где они вам нужны (предположительно, Hummus нуждается в некоторой форме line(x1,y1,x2,y2) для этого), а затем написать соединение вручную. Существует слишком много способов соединить два отрезка, поэтому представим, что вам нужна простая кривая, которая хорошо работает для небольших углов:

• линейный сегмент 1 {x1,y1,x2,y2} и
• отрезок 2 {x3,y3,x4,y4} и
• координата {x5,y5}, где линии, на которых сегменты пересекаются,

тогда простое квадратичное соединение будет с начальной точкой {x2,y2}, контрольной точкой {x5,y5} и конечной точкой {x3,y3}.