daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://daybrush.com/moveable/
MIT License
10.14k stars 622 forks source link

How to get Transform matrix from Warp? #431

Closed innerop closed 3 years ago

innerop commented 3 years ago

Hi

I finally figured out how to use this library and it's working OK.

Only thing is I set 'warpable: true' but I can't see how to warp and get the transformation matrix..

I see in the API doc that you have to set the renderDirections in order to show the control box, but I don't see how we can get the transformation matrix that is being applied?

Any help will be appreciated.

Thank you.

innerop commented 3 years ago

Found it:


import Moveable from "moveable";
let matrix = [
 1, 0, 0, 0,
 0, 1, 0, 0,
 0, 0, 1, 0,
 0, 0, 0, 1,
];
const moveable = new Moveable(document.body, { warpable: true });
moveable.on("warp", ({ target, transform, delta, multiply }) => {
   // target.style.transform = transform;
   matrix = multiply(matrix, delta);
   target.style.transform = `matrix3d(${matrix.join(",")})`;
});```