在Fabric.js中使用鼠标旋转事物的正确方法 [英] Right way to rotate things with a mouse in Fabric.js

问题描述

这是示例：

解决方案

旋转角度是基于0,0原点计算的，但是正方形围绕它自己的中心旋转100，100，因此它们不匹配。如果你将方块移动到0,0，感觉OK：

  var rect = new fabric.Rect（{
 fill：'＃00FFAB'，
 top：0，
 left：0，
 width：100，
 height：100，
 selectable：false 
}）; 
  

不是翻译为toLocal中的画布坐标，而是平移到正方形的坐标空间。 >

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

解决方案

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.

这篇关于在Fabric.js中使用鼠标旋转事物的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！