konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.07k stars 896 forks source link

Konvajs Path getPointAtLength Incorrect Compute #1766

Closed nazimwibsoft closed 4 weeks ago

nazimwibsoft commented 1 month ago

I have been working with KonvaJS for self testing the new tool, i was loading a SVG path and trying to animate another object around its path, however the getPointAtLength gives me incorrect position on the canvas, I have made a sample to demonstrate this.

image

Attached is a simple SVG closed path and here i have loop through its points to put a red dot. We can clearly see it going in wrong direction.

`// Get the total length of the path //var totalLength = svgPath.getTotalLength(); var totalLength = konvaPath.getLength();

// Draw a circle at each 1 unit length along the path
for (var length = 0; length <= totalLength; length++) {
  var point = konvaPath.getPointAtLength(length);
  var marker = new Konva.Circle({
    x: point.x,
    y: point.y,
    radius: 2,
    fill: 'red'
  });
  layer.add(marker);
}

` A very simple piece of code, i wonder if anyone never tried this or reported this issue here as i was unable to find an existing issue logged. Kindly see if this is something already in the roadmap to be fixed, I don't think it should be a big issue that could not be resolved.

DOM SVG already provides same method getPointAtLength on SVG element it works perfectly.

nazimwibsoft commented 1 month ago

Attached is the working version working.zip

nazimwibsoft commented 1 month ago

notworking.zip This is not working version that is using Konva JS Path method

lavrton commented 4 weeks ago

Thanks for the good demo. Fixed. I will release later.