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!
1 Correct answer
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 t
...
40
Replies
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
Marc Autret wrote:
And now, here is the best reference ever about dealing with Bezier curves:
Wow! Now that is comprehensive!
I've bookmarked that page to read when I have the mental capacity to digest some of it... 
Thanks!
Harbs
Ok, the afternoon came and went.
I did see a lot of sources on the topic but didn't understand how to apply the theory and the terms used in them to practical ID, AI scripting terms.
I am using the terms circles, ellipses etc. as what the look like and what most "normal" people would call them even though I fully understand that they are approximations. I did see in one of the sources (no idea which) that a better value can be given instead of the standard .552... that is used. The numbers that I used I think I got by looking at the paths that Ai was producing. The numbers didn't produce a fixed constant a bigger "circle" produced a different number than a smaller one.
I only noticed now that I didn't need to use 2 numbers .522... and .447... as the .447... is 1 - .52222
I looked today at the Paper.js in particular the function that starts at line 4474 of the paper-core.js file. Which I shall paste below.
It helps a very lot in understanding things. Now that from this post we know the conversion from extended script to and from the html "ctx.bezierCurveTo()" it opens up the topic tremendously.
_draw: function(ctx, param, strokeMatrix) {
var style = this._style,
hasFill = style.hasFill(),
hasStroke = style.hasStroke(),
dontPaint = param.dontFinish || param.clip,
untransformed = !strokeMatrix;
if (hasFill || hasStroke || dontPaint) {
var type = this._type,
radius = this._radius,
isCircle = type === 'circle';
if (!param.dontStart)
ctx.beginPath();
if (untransformed && isCircle) {
ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
} else {
var rx = isCircle ? radius : radius.width,
ry = isCircle ? radius : radius.height,
size = this._size,
width = size.width,
height = size.height;
if (untransformed && type === 'rectangle' && rx === 0 && ry === 0) {
ctx.rect(-width / 2, -height / 2, width, height);
} else {
var x = width / 2,
y = height / 2,
kappa = 1 - 0.5522847498307936,
cx = rx * kappa,
cy = ry * kappa,
c = [
-x, -y + ry,
-x, -y + cy,
-x + cx, -y,
-x + rx, -y,
x - rx, -y,
x - cx, -y,
x, -y + cy,
x, -y + ry,
x, y - ry,
x, y - cy,
x - cx, y,
x - rx, y,
-x + rx, y,
-x + cx, y,
-x, y - cy,
-x, y - ry
];
if (strokeMatrix)
strokeMatrix.transform(c, c, 32);
ctx.moveTo(c[0], c[1]);
ctx.bezierCurveTo(c[2], c[3], c[4], c[5], c[6], c[7]);
if (x !== rx)
ctx.lineTo(c[8], c[9]);
ctx.bezierCurveTo(c[10], c[11], c[12], c[13], c[14], c[15]);
if (y !== ry)
ctx.lineTo(c[16], c[17]);
ctx.bezierCurveTo(c[18], c[19], c[20], c[21], c[22], c[23]);
if (x !== rx)
ctx.lineTo(c[24], c[25]);
ctx.bezierCurveTo(c[26], c[27], c[28], c[29], c[30], c[31]);
}
}
ctx.closePath();
}
From this it should be pretty simple to parse in the jsx. With this we can draw an ellipse, or a 1/4, 1/2 and 3/4 ellipse using 1, 2, 3 or 4 bezier curves.
This is really all I need, but what I would like is to be able to start and end at any point in the ellipse.
Given H, W, and start and end angles S and E how would I calculate the black bezier curve on the right side of the screenshot?
AdChoices