Question

我试图将角度设置为递增90，同时保持位置在视觉上相同。我有它的工作，但它确实很hacky。有人可以在不使用switch语句的情况下改进此代码吗？ https://codesandbox.io/s/lx347ln669

Answer 1

triangle.rotate(angle);

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

应在中心旋转时旋转三角形。这与 triangle.set('angle', 90) 似乎根据左上角旋转。

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

straighten(triangle);

拉直对象（根据当前角度，将对象从当前角度旋转到0、90、180、270等之一）

Straighten in fabric.js docs

Answer 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>

FabricJs旋转对象而不移动位置

2 个答案: