【问题标题】:Right way to rotate things with a mouse in Fabric.js在 Fabric.js 中用鼠标旋转物体的正确方法
【发布时间】:2013-11-21 22:31:08
【问题描述】:

这是示例:
http://jsbin.com/UHENoKi/11/

这里我用简单的公式求两点(向量)之间的角度:

但正如您在 JSBin 中所看到的 - 有些东西坏了。我哪里做错了?

更新

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

【问题讨论】:

  • 我认为您的计算方式适用于某些象限。我认为你需要修改值(这只是一个例子,不是真实的),比如 + Qx * 90 where Q0 = 0, Q1=90 etc

标签: javascript user-interface canvas graphics fabricjs


【解决方案1】:

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

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

而不是在toLocal中翻译成画布坐标,而是翻译成正方形的坐标空间。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-01-19
    • 2023-04-06
    • 2020-05-06
    • 1970-01-01
    • 1970-01-01
    • 2015-12-28
    • 2015-11-10
    • 1970-01-01
    相关资源
    最近更新 更多