Finding the endpoints of a stroke with JSFL

[bluebeezle]

I'm trying to find the endpoints of a user created curved line with JSFL. I've tried using shape.vertices, but the array seems to be sorted somewhat randomly, so I can't count on the first and last elements of the array to be the endpoints.

Any ideas?

Thanks.

[b_ogge]

If I remember correctly, the cubic segments of a shape are stored in order, so if you retrieve the first point of the first segment and the last point of the last segment you should have the endpoints:

startPoint = shape.getCubicSegmentPoints(0)[0];
endPoint = shape.getCubicSegmentPoints(shape.numCubicSegments-1)[3];

This method would work only if your element is a single shape though, either in merge or object drawing mode. If you have multiple shapes in merge mode or a drawing object composed of multiple shapes, Animate will consider them as a whole, unique shape, not distinguishing the cubic segments. In those cases, things will become real messy since you'll have to distinguish each contour and navigate it using half edges and methods getNext()/getPrev() of HalfEdge objects.

[kilopop2000]

Yep, thanks b_ogge, that works. Thanks!

[kilopop2000]

Actually this works on the first run through of a shape but if you add more points to it then getCubicSegmentPoints are all out of order. So if you have a path with 4 points then the end is 4. But if you add a point between 1 and 2 then this new point becomes 5 which means the endPoint is not at the end but between 1 and 2...

Do you think there a way to reset the segment numbering each time or another way to always know that the endPoint is at the end?

Thanks!

[b_ogge · Accepted solution]

So it's the messy solution I'm afraid XD

Ok, I've rearranged the JSFL manual's algorithm for contours' navigation in order to store the vertices of a path neatly in an array, so the first and last element of the array would be the end points:

//just take first contour for testing. Can loop through "contours" array for the others eventually
var contour = fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements[0].contours[0];
var he = contour.getHalfEdge();
var iStart = he.id;
var id = 0;
var points = [];
while (id != iStart) {
     points.unshift(he.getVertex());
     if(he.getPrev().getEdge().id==he.getOppositeHalfEdge().getEdge().id) {
          points.unshift(he.getPrev().getVertex());
          break;
     }
     he = he.getPrev();
     id = he.id;
}
he = contour.getHalfEdge();
iStart = he.id;
id = 0;
while (id != iStart) {
     points.push(he.getVertex());
     if(he.getNext().getEdge().id==he.getOppositeHalfEdge().getEdge().id) {
          break;
     }
     he = he.getNext();
     id = he.id;
}
var startPoint = points[0];
var endPoint = points[points.length-1];

Note that this won't work always properly with paths having lines crossing each other (like an X-shaped path in merge drawing mode or a curled line in any drawing mode) since Animate has an odd method of creating crossing lines (not neat as Illustrator), but at least the start and end point should be correct in most of those cases. It will need some more tweaking for better storing middle points, but I hope it's enough for your current situation

[bluebeezle]

I haven't tested this extensively, but it seems to work. Thanks!

[kilopop2000]

Thanks b_ogge, much appreciated!