javascriptdom-eventskineticjs

kineticjs - How to get points from a line


If I create a line...

 var line = new Kinetic.Line({
  points: [0 , 5, 0, 100],
  stroke: 'black',
  strokeWidth: 2,
  draggable: true

});

And I attach a event...

   line.on("mouseup", function () {
      updateLineInput( this.attrs.points );
   });

How could I get the points back out? this.attrs.points does not work...


Solution

  • You can get the points with line.getPoints() but they usually don't change after dragging and dropping, the X, Y coordinates change which the relative points are drawn from. You can get those with line.getX() and line.getY()

      //It would be better to use the 'dragend' event if you want it to fire on a drag/drop
      line.on('dragend', function() {
    
        //You may really want the coordinates too
        var x = line.getX();
        var y = line.getY();
    
        //But this is what you asked for:
        var points = line.getPoints();
        updateLineInput(points);
      });