search

jonobr1 / two.js

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

Transformer with rotation and scale #580

Open Nineswiss opened 2 years ago

Nineswiss commented 2 years ago

Has anyone made a transform that can scale and rotate paths and shapes? Similar to the bounding box used in Sketch, Illustrator etc. I have tried to use various other frameworks but there was always a "gotcha". For instance in paper.js transforms get broken on rotation. In Fabric the width and height don't get updated after you edit path points.

So yeah, basically for my project I need to be able rotate and scale any object using a "bounding box" and also edit points and curves. Is two.js a good fit?

Example: image

jonobr1 commented 2 years ago

Curious to hear more about what you mean, "transforms get broken on rotation". I've never used Sketch, so I don't have a good sense of what the UX, but I imagine it's similar to Adobe Illustrator?

In that case, it's definitely possible with Two.js but you'll need to manage the matrix (and associating math) yourself. Here's a quick (and very not performant) example that maybe gives you some clues as to whether Two.js would be useful for you or not: https://codepen.io/jonobr1/pen/QWqMmma

The positioning and rotating operations are fine, but the scale one I didn't spend the time to get it working as intended (to be able to drag and take into account the rotation), so it feels the least "done".

meetzaveri commented 2 years ago

@jonobr1 I had similar type of problem. This codepen indeed provided the solution I was looking for. But I am facing problems while having this in a zoomed plane. Like I cannot attach zoom in and zoom out to two.scene nor I can interact with rotate,scale or resize for that object in a zoomed plane ( for eg. like on mouse wheel event when I zoom in, I cannot rotate object).

Can you provide codepen for that or update this codepen and there share it here?

Thanks!