search

jonobr1 / two.js

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

Maintain stroke width upon zoom using the 'zui.js' extras pack or something else #546

Open Pranav-Badrinathan opened 3 years ago

Pranav-Badrinathan commented 3 years ago

Using the zui.zoomBy() function leads to a scaled version of the image where it's corner stroke is also scaled. Is there any way to mitigate this in the zui itself? If no, could someone point me in the right direction as to where to go from here?

My pan and zoom code is from Jono Brandel at Codepen.

Far: image Zoomed: image

If applicable:

Desktop (please complete the following information):

jonobr1 commented 3 years ago

Thanks for your question @Pranav-Badrinathan. Unfortunately, there isn't anything currently implemented in Two.js or the ZUI module to handle strokes in this way. But, if we were to handle it I think we'd need to add a boolean to every Path and Group to be able to assign linewidth as an absolute number in screen space or in the coordinate space relative to its matrix. The latter being how it's currently handled. I'll add this as an enhancement.

Pranav-Badrinathan commented 3 years ago

Ah I see. That's ok, and thanks for considering this as an enhancement. Maybe as a workaround, till when this enhancement might be made, I can scale all my elements to 'zoom' instead of zooming in... Or I'll just wait 😊. Thanks!