jonobr1 / two.js

A renderer agnostic two-dimensional drawing api for the web.
https://two.js.org
MIT License
8.29k stars 454 forks source link

[Bug] Using ending on a curved path draws it incorrectly #625

Closed aleris closed 2 years ago

aleris commented 2 years ago

Describe the bug Using ending on a curved path does not work. The below image shows a straight path (on left) and a curved one (on the right), with different ending percents (1, 0.75, 0.5, 0.25).

image

To Reproduce Steps to reproduce the behavior:

This is the code for the above image:

import Two from 'https://cdn.skypack.dev/two.js@latest';

var two = new Two({
  type: Two.Types.svg,
  fullscreen: true,
  autostart: true
}).appendTo(document.body);

const pathLine = new Two.Path([new Two.Anchor(50, 50), new Two.Anchor(150, 50), new Two.Anchor(150, 100)])
pathLine.noFill()
pathLine.closed = false

two.add(pathLine)

const pathLine1 = pathLine.clone()
pathLine1.position = new Two.Vector(0, 100)
pathLine1.ending = 0.75
two.add(pathLine1)

const pathLine2 = pathLine.clone()
pathLine2.position = new Two.Vector(0, 200)
pathLine2.ending = 0.5
two.add(pathLine2)

const pathLine3 = pathLine.clone()
pathLine3.position = new Two.Vector(0, 300)
pathLine3.ending = 0.25
two.add(pathLine3)

const pathCurved = pathLine.clone()
pathCurved.position = new Two.Vector(200, 0)
pathCurved.curved = true

two.add(pathCurved)

const pathCurved1 = pathCurved.clone()
pathCurved1.position = new Two.Vector(200, 100)
pathCurved1.ending = 0.75
two.add(pathCurved1)

const pathCurved2 = pathCurved.clone()
pathCurved2.position = new Two.Vector(200, 200)
pathCurved2.ending = 0.5
two.add(pathCurved2)

const pathCurved3 = pathCurved.clone()
pathCurved3.position = new Two.Vector(200, 300)
pathCurved3.ending = 0.25
two.add(pathCurved3)

Expected behavior The drawing should show a part of the curved line.

Screenshots See above

Environment (please select one):

Desktop (please complete the following information):

Smartphone (please complete the following information): n/a

Additional context Probably a workaround, by subdividing the path, seems to be working ok.

path.subdivide(5)

jonobr1 commented 2 years ago

Thanks for posting this. I can confirm the issue. I'll look into this.

jonobr1 commented 2 years ago

Thanks again for posting. I've updated the dev branch and you should be able to use that until I publish a new version on npm.