如何使用 FabricJS 使多边形对象对调整大小事件做出反应？

1. FabricJS 简介

FabricJS 是一个开源的 JavaScript 网页画布库，它允许开发者在网页上绘制各种形状、图片、文本等元素。通过 FabricJS，我们可以快速地创建响应式的网页元素。它支持多种事件，如鼠标事件、键盘事件等，而且它还提供了许多有用的方法和工具，使得我们处理图形变得更加容易。FabricJS 是一个非常强大的工具，尤其是在需要进行可视化呈现的 Web 应用程序中。

2. 多边形对象

多边形是指具有多个边的的封闭图形。在 FabricJS 中，我们可以使用 fabric.Polygon 类来创建多边形对象。创建一个简单的正方形多边形对象，代码如下：

var polygon = new fabric.Polygon([
    {x: 100, y: 100},
    {x: 200, y: 100},
    {x: 200, y: 200},
    {x: 100, y: 200}],
    {
        left: 100,
        top: 100,
        fill: 'red'
    }
);
canvas.add(polygon);

上面的代码创建了一个红色正方形多边形对象，并将它添加到画布 canvas 上。这个对象有四个点，每个点包含两个属性：横坐标 x 和纵坐标 y。

3. 触发调整大小事件

3.1 缩放控件

要使多边形对象对调整大小事件做出反应，我们需要添加一个缩放控件。缩放控件是一个小矩形，通常出现在多边形对象的右下角，它可以启动大小调整事件。在 FabricJS 中，我们可以使用 fabric.Circle 类来创建一个圆形控件，代码如下：

var scaleCircle = new fabric.Circle({
    left: polygon.left + polygon.width / 2,
    top: polygon.top + polygon.height / 2,
    strokeWidth: 2,
    radius: 8,
    fill: '#fff',
    stroke: '#666',
    selectable: false,
    hasBorders: false,
    hasControls: false,
    originX: 'center',
    originY: 'center'
});
canvas.add(scaleCircle);

上面的代码创建了一个白色圆形控件，并将它添加到画布 canvas 上。圆形控件的位置默认在多边形对象的正中心。

3.2 鼠标事件

要为缩放控件添加鼠标事件，我们可以使用 FabricJS 库中的 canvas.on() 方法。该方法可以为画布上的所有对象添加事件处理程序，包括缩放控件。在本例中，我们想要为圆形控件的鼠标事件添加事件处理程序，因此，我们可以使用以下代码：

canvas.on('mouse:down', function(event) {
    if (event.target === scaleCircle) {
        //...
    }
});

上述代码为画布上的 mouse:down 事件添加了一个处理程序。当用户点击鼠标时，FabricJS 将检查事件是否与一个对象交互。如果是，则返回该对象；如果没有，则返回 null。在我们的代码中，我们检查事件的目标属性是否为圆形控件 scaleCircle。如果是，我们将执行一些代码来启动大小调整事件。

4. 启动大小调整事件

要启动大小调整事件，我们需要使用 FabricJS 库中的 canvas.on() 方法为鼠标移动事件添加处理程序。我们将使用以下代码：

canvas.on('mouse:move', function(event) {
    if (event.target === scaleCircle) {
        //...
    }
});

这段代码会为画布上的 mouse:move 事件添加处理程序。当用户移动鼠标时，FabricJS 将检查事件是否与一个对象交互。如果是，则返回该对象；如果没有，则返回 null。在我们的代码中，我们检查事件的目标属性是否为圆形控件 scaleCircle。如果是，我们将执行以下代码，来让多边形对象调整大小：

var mouseX = event.e.clientX - canvas.offsetLeft;
var mouseY = event.e.clientY - canvas.offsetTop;
var polygonWidth = Math.abs(polygon.width * polygon.scaleX);
var polygonHeight = Math.abs(polygon.height * polygon.scaleY);
var newWidth = mouseX - polygon.left;
var newHeight = mouseY - polygon.top;
var scaleX = newWidth / polygonWidth;
var scaleY = newHeight / polygonHeight;
polygon.set({
    scaleX: scaleX,
    scaleY: scaleY
});
canvas.renderAll();

上面的代码计算出新的多边形对象的大小，并设置它的 scaleX 和 scaleY 属性。最后，我们调用 canvas.renderAll() 方法将更改应用于画布。这样，就完成了多边形对象的大小调整。

5. 总结

在本文中，我们介绍了 FabricJS 的基础知识，并演示了如何使用 FabricJS 来创建多边形对象，并使其对调整大小事件做出反应。我们通过添加缩放控件、检查鼠标事件和启动大小调整事件的方式，让多边形对象可以根据用户的操作调整大小。FabricJS 不仅仅适用于多边形对象，还可以创建各种图形、文本和图像等元素。它的灵活性和强大的工具使得它成为开发 Web 应用程序的好帮手。