Use PaperJS export path with Hummus PDF JS

问题

I am trying to draw paths with Hummus PDF JS based on paths exported from PaperJS.

Hence PaperJS data output would be the data input for Hummus.

Those two libraries works differently to create curves. PaperJS uses handles to curve a straight lines, while Hummus will curve a line based on 3 points.

Let's say I want to have a curved line that goes through 3 key points: [200, 100] -> [300, 200] -> [400, 100]. Like this picture:

With PaperJS, I will have to do something like this:

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]
    ],

});

However, with Hummus, I will have to use the operator c(inX1,inY1,inX2,inY2,inX3,inY3) from here It would be something like this: c(200, 100, 300, 325, 400, 100);

Unless I am using the wrong operator?

My goal here is just to understand how to get data from PaperJS and make it exploitable to draw with Hummus.

回答1:

The code you show for Paper.js is for defining a path consisting of two lines (as vectors), magically joined by Paper.js's default join operation.

So if you want Hummus to do the same, either look up how to make it do the same thing, or manually generate the two line segments where you need them (presumably Hummus needs some form of line(x1,y1,x2,y2) command for that) and then write the join manually. There are too many ways to join up two line segments, so let's pretend you want a simple curve that works well for shallow angles:

line segment 1 {x1,y1,x2,y2}, and
line segment 2 {x3,y3,x4,y4}, and
coordinate {x5,y5} where the lines that the segments are on cross,

then a simple quadratic join would be with start point {x2,y2}, control point {x5,y5}, and end point {x3,y3}.

来源：https://stackoverflow.com/questions/48313820/use-paperjs-export-path-with-hummus-pdf-js

标签

pdf

bezier

paperjs

hummus.js