FabricJS 中如何让多边形对象响应旋转事件

在使用 FabricJS 进行图形处理和交互开发时，让多边形对象能够响应旋转事件是一个常见的需求。这不仅可以增强用户与图形的交互性，还能为项目添加更多动态效果。

我们需要创建一个多边形对象。在 FabricJS 中，使用 fabric.Polygon 方法来创建。例如：

var points = [
    { x: 100, y: 100 },
    { x: 200, y: 100 },
    { x: 150, y: 200 }
];
var polygon = new fabric.Polygon(points, {
    fill: 'lightblue',
    stroke: 'black',
    strokeWidth: 2
});

上述代码创建了一个简单的三角形多边形，设置了填充颜色、边框颜色和边框宽度。

接下来，为多边形添加旋转事件监听器。FabricJS 提供了方便的事件绑定机制，通过 on 方法来实现。代码如下：

polygon.on('rotating', function (e) {
    console.log('多边形正在旋转，当前旋转角度：', this.angle);
});

在这个监听器函数中，this 指向当前旋转的多边形对象，e 是事件对象。通过 this.angle 可以获取多边形当前的旋转角度。这里我们简单地将旋转角度打印到控制台，实际应用中可以根据需求进行更多操作，比如更新 UI 显示、触发其他动画等。

如果希望在多边形旋转结束后执行某些操作，可以添加 rotated 事件监听器：

polygon.on('rotated', function () {
    console.log('多边形旋转结束');
});

在实际项目中，还可能需要根据旋转角度对多边形进行一些属性调整。例如，当多边形旋转到特定角度时，改变其填充颜色：

polygon.on('rotating', function (e) {
    if (this.angle >= 90 && this.angle < 180) {
        this.set('fill','salmon');
    } else {
        this.set('fill', 'lightblue');
    }
    this.canvas.renderAll();
});

这段代码在多边形旋转过程中检查角度，当角度在 90 度到 180 度之间时，将填充颜色设置为 salmon，否则恢复为 lightblue。调用 this.canvas.renderAll() 方法来更新画布显示。

通过上述步骤，我们能够轻松地让 FabricJS 中的多边形对象响应旋转事件，为项目增添丰富的交互效果和动态特性。