FabricJS 中怎样设置矩形旋转角度

在使用 FabricJS 进行图形绘制与操作时，设置矩形的旋转角度是一项常见需求。FabricJS 为开发者提供了简便且灵活的方式来实现这一功能。

要创建一个矩形并为其设置旋转角度，需先引入 FabricJS 库。可以通过 CDN 链接或者下载本地库文件的方式将其引入到项目中。

当成功引入库后，就可以着手创建矩形对象。例如：

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 50,
    fill: 'blue'
});
canvas.add(rect);

上述代码创建了一个蓝色的矩形，并将其添加到名为“canvas”的画布上。

接下来就是设置矩形的旋转角度。在 FabricJS 中，通过修改矩形对象的 angle 属性来实现旋转。例如，要将矩形旋转 45 度：

rect.angle = 45;
canvas.renderAll();

这里，将 rect 的 angle 属性设为 45，然后调用 canvas.renderAll() 方法，以便在画布上重新渲染所有对象，使旋转效果得以显示。

如果想实现动态旋转效果，比如根据用户操作实时改变旋转角度，可以结合事件监听器。例如，为按钮添加点击事件，每次点击使矩形旋转一定角度：

<button id="rotateButton">旋转</button>

document.getElementById('rotateButton').addEventListener('click', function() {
    rect.angle += 15;
    canvas.renderAll();
});

这段代码为“旋转”按钮添加了点击事件，每次点击按钮，矩形的 angle 属性增加 15，从而实现动态旋转效果。

另外，若要精确控制旋转的中心点，FabricJS 允许设置 originX 和 originY 属性。默认情况下，旋转中心点是矩形的中心。例如，将旋转中心点设置为矩形的左上角：

rect.originX = 'left';
rect.originY = 'top';
rect.angle = 30;
canvas.renderAll();

通过调整这些属性，可以满足各种复杂的旋转需求，为图形设计带来更多创意和灵活性。掌握这些设置矩形旋转角度的方法，能在 FabricJS 的图形开发中更加得心应手。