What is the direction of the curve points returned by entirePath()? [See description for details]

Question

The entirePath() of a polygon returned these points. As clarified in a different thread, we have established that the order is leftControlPoint anchorPoint rightControlPoint if there are control points at all. Otherwise it is just the anchor point.

The question I have here is, consider line 3, the control points specified there, do they represent the control points for the Bezier curve between Line 2 point and Line 3 point or a Bezier curve between Line 3 point and Line 4 point?

Thanks!

Peter Kahrel · Accepted Answer

This is a nice link https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

The below is pasted from there

Cubic Bezier curves

This example draws a heart using cubic Bézier curves.

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

// Quadratric curves example

var path = new Path2D();

path.moveTo(75,40);

path.bezierCurveTo(75,37,70,25,50,25);

path.bezierCurveTo(20,25,20,62.5,20,62.5);

path.bezierCurveTo(20,80,40,102,75,120);

path.bezierCurveTo(110,102,130,80,130,62.5);

path.bezierCurveTo(130,62.5,130,25,100,25);

path.bezierCurveTo(85,25,75,37,75,40);

ctx.fill(path);

}

Nice link, Trevor, thanks.

So in the earlier example, this shape:

ctx.moveTo(20,20);

ctx.bezierCurveTo(20,100,200,100,200,20);

corresponds with the shape you get in InDesign with this script:

g = app.documents[0].pages[0].graphicLines.add ({strokeWeight: 0.5});

g.paths[0].entirePath =

[

[[20, 20], [20, 20], [20, 100]],

[[200, 100], [200, 20], [200, 20]],

];

The curve has two anchors. First anchor at 20,20; no handle, i.e. the incoming handle is on the anchor. The second point has no outgoing handle.

To translate InDesign's path to HTML, do a moveTo to the path's first anchor (myCurve.paths[0].pathPoints[0].anchor).

From there you can work out how to proceed.

P.

Peter Kahrel · Answer

It's clearer if you present the path as an array of arrays (values rounded here):

[

[519,1135],

[613,1135],

[[647,1169],[750,1234],[757,1238]],

[782,1254],

[1536,2048]

]

The third line indicates that the anchor point is at [750,1234] and that the anchor has two handles. When you select an anchor with the direct selection tool you see any handles. The anchor point in line 3 has two handles: the incoming one ('leftDirection') is [647,1169], the outgoing one ('rightDirection') is [757, 1238]. The values are the coordinates of the handles. When you select a handle, the Transform panel shows the coordinates of the anchor, not the handle. (Only when you press a handle and you keep the mouse button down do you see the handle's coordinates, but very briefly.) But you can see a handle's coordinates in the Info panel, see the screenshot.

The selected anchor is at 186,400, the outgoing ('rightDirection') handle is at 220,400 (couldn't get the mouse pointer exactly on the spot). The path of this curve can be represented in several ways:

[

[[134, 500], [134, 457], [134, 420]],

[[150, 400], [186, 400], [220, 400]],

[[230, 420], [230, 436], [230, 457]],

]

or

[

[leftDirection = [134, 500],

anchor = [134, 457],

rightDirection = [134, 420]

],

[leftDirection = [150, 400],

anchor = [186, 400],

rightDirection = [220, 400]

],

[leftDirection = [230, 420],

anchor = [230, 436],

rightDirection = [230, 457]

],

];

Peter

Cubic Bezier curves

Cubic Bezier curves

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded