FabricJs旋转对象而不移动位置答案

【问题标题】：FabricJs rotate object without moving the positionFabricJs旋转对象而不移动位置
【发布时间】：2018-10-07 05:05:56
【问题描述】：

我正在尝试将角度设置为增量 90，同时保持视觉上相同的位置。我有它的工作，但它真的很hacky。有人可以改进此代码（例如）而不需要 switch 语句。 https://codesandbox.io/s/lx347ln669

【问题讨论】：

标签： fabricjs

【解决方案1】：

triangle.rotate(angle);

设置具有中心旋转的实例的“角度”

Rotate in farbic.js docs

应该在它的中心旋转上旋转三角形。这与 triangle.set('angle', 90) 它似乎基于左上角旋转。

如果您希望用户使用默认控件并“对齐”您的角度，您也可能会发现这很有用：

straighten(triangle);

拉直对象（将其从当前角度旋转到 0、90、180、270 等之一，具体取决于哪个更近）

Straighten in fabric.js docs

【讨论】：

以防万一有人在您调用obj.rotate(...) 的选定对象上遇到一些奇怪的问题，并且尽管旋转的对象及其选择发生了变化，但动作区域仍保持相同的位置。为了修复它调用obj .setCoords();查看更多链接fabricjs.com/docs/fabric.Object.html#setCoords根据当前角度、宽度和高度设置角位置坐标。

【解决方案2】：

在创建三角形时尝试设置originX: 'center' 和originY: 'center'。无需更改每次旋转的原点。

var canvasEl = document.getElementById('c');
var canvas = new fabric.Canvas('c');
var triangle = new fabric.Triangle({
  width: 200,
  height: 200,
  fill: "blue",
  left: 50,
  top: 50,
  originX: "center",
  originY: "center"
});
canvas.add(triangle)

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<canvas id="c"></canvas>

【讨论】：

不幸的是，将原点设置为中心意味着我必须将所有对象设置为中心。我希望将所有对象始终设置为顶部/左侧。有不同的方法吗？
使用上/左作为原点是导致对象在旋转后移动的原因（因为那个角需要保持静止）。我想您可以在每次旋转后调整对象的位置，但这不是一个干净的解决方案。将对象作为原点有什么问题？
我有一个网格，其中对象捕捉并很好地填充到单元格中。如果原点位于中心，这仍然可行吗？
是的，您只需将对象的位置在每个维度上偏移对象大小的一半。像 gridcoordinateX + (width * scaleX) / 2
旋转按预期工作 - 围绕对象的中心 - 但现在用鼠标调整大小变得混乱。