Right way to rotate things with a mouse in Fabric.

2019-03-18 21:00发布

问题:

This is the example:
http://jsbin.com/UHENoKi/11/

Here I use simple formula to find the angle between two points (vectors):

But as you could see at JSBin - something is broken. Where did I make a mistake?

UPDATE

Working example:
http://jsbin.com/UHENoKi/13/edit?js,output

回答1:

The angle to rotate by is being calculated based on the 0,0 origin, but the square is rotating around its own center at 100, 100, so they don't match. If you move the square to 0,0, it feels OK:

var rect = new fabric.Rect({
  fill: '#00FFAB', 
  top: 0, 
  left: 0, 
  width: 100, 
  height: 100, 
  selectable: false
});

Rather than translating to canvas coordinates in toLocal, translate into the coordinate space of the square.