在Fabric.js中用鼠标旋转东西的正确方法

时间:2013-11-09 22:45:33

标签: javascript user-interface canvas graphics fabricjs

这是一个例子:
http://jsbin.com/UHENoKi/11/

这里我使用简单的公式来找到两个点(向量)之间的角度:
enter image description here

但正如你在JSBin上看到的那样 - 有些东西被打破了。我在哪里弄错了?

更新

工作示例:
http://jsbin.com/UHENoKi/13/edit?js,output

1 个答案:

答案 0 :(得分:5)

旋转的角度是根据0,0原点计算的,但是正方形围绕其自身的中心旋转100,100,因此它们不匹配。如果将方块移动到0,0,感觉还可以:

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

不是转换为toLocal中的画布坐标,而是转换为方形的坐标空间。