Skip to main content
bluebeezle
bluebeezle
Inspiring
July 6, 2018
Answered

Finding the endpoints of a stroke with JSFL

  • July 6, 2018
  • 1 reply
  • 1525 views

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.

    This topic has been closed for replies.
    Correct answer b_ogge

    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

    1 reply

    B
    b_ogge
    Inspiring
    August 1, 2019

    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.

      K
      kilopop2000
      Inspiring
      August 5, 2019

      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!

      bluebeezle
      bluebeezleAuthor
      Inspiring
      August 5, 2019

      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


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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices