search

jonobr1 / two.js

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

How to update vertices of an arrow ? #569

Closed meetzaveri closed 2 years ago

meetzaveri commented 2 years ago

When I update vertices using line.vertices[1].y = 200 it updates y2 but the arrow head is seen broken. Here I have attached two images. 1st Image contains idle position 2nd Image contains where I have updated y2 by doing line.vertices[1].y = 200 chrome-capture (21) chrome-capture (22)

Can you guide whats the correct approach to update vertices without breaking arrow head? Thanks!

jonobr1 commented 2 years ago

Unfortunately you cannot update line.vertices[1].y and expect the arrow to automatically update. The two.makeArrow doesn't make an actual arrow primitive, it just makes the vertices needed to render an arrow out of a Two.Path.

So, you'll have to change more than just vertices[1] in order to make the arrow consistent. I would like to add a Two.Arrow primitive to the library at some point in the future though.

meetzaveri commented 2 years ago

@jonobr1 Good to know.

I already did some hack by taking a little help from makeArrow definition from lib source code. I created custom vertices(just as it was written in source code) and passed it to line.vertices. And it works!

jonobr1 commented 2 years ago

Awesome, glad to hear!