Plotting Curves from CpNode.pointOnShape's Bezier Curve Parameters (cp.pointOnShape.curve.ps)

[matmill5]

Hey @FlorisSteenkamp,

I am trying to draw some bezier curves on an html canvas, using the curve-parameters contained within the cpNode's cp.pointOnShape.curve.ps, but the drawn-curves are not as expected, or representative of the original shape(?).

Referring to the image below, gray curves are the original shape, and green curves are the result of plots from control points in cp.pointOnShape.curve.ps's array of [x,y] pairs.

If possible, please advise.

For context, here's some relevant paperjs code which should construct the curve from cp.pointOnShape.curve.ps:

console.log("POS Curve:", node.cp.pointOnShape.curve.ps);                  
const curve = new Paper.Curve(new Paper.Point(node.cp.pointOnShape.curve.ps[0]), new Paper.Point(node.cp.pointOnShape.curve.ps[1]), new Paper.Point(node.cp.pointOnShape.curve.ps[2]), new Paper.Point(node.cp.pointOnShape.curve.ps[3]));
const newPath = new Paper.Path({segments: [curve.segment1, curve.segment2], strokeColor: 'green'});
Paper.project.activeLayer.addChild(newPath);

NOTE: You may notice that some of the start/end points are representative of the original curve's start/end points. Perhaps it's just an issue with the handles?

Thank you.

Best,
MM

[FlorisSteenkamp]

Hi Matt.

Thanks for your question!

It's likely because paper.js uses relative coordinates for it's handles but not for its endpoints (for some unknown reason :)

So you need something like this (I've not tested it but should pretty much work out of the box)

function nodeToCurve(node) {
    const ps = node.cp.pointOnShape.curve.ps;
    const curve = new paper.Curve(
        new paper.Point(ps[0]),
        new paper.Point(ps[1][0] - ps[0][0], ps[1][1] - ps[0][1]),
        new paper.Point(ps[2][0] - ps[3][0], ps[2][1] - ps[3][1]),
        new paper.Point(ps[3])
    );

    return curve;
}

Please feel free to ask if you need further assistance.

[matmill5]

Floris, thank you for your insight; it's appreciated.

I will try this later today.