如何使用FabricJS锁定矩形的旋转？

1. 简介

FabricJS 是一个流行的 HTML5 画布库，它可以帮助我们操作和渲染复杂的图形、文本和图片。

在 FabricJS 中，我们可以轻松地创建、编辑、复制和删除各种类型的对象，例如矩形、圆形、线段等等。此外，我们还可以使用 FabricJS 的拖放和缩放方案来轻松地移动和改变对象的大小。

2. FabricJS 矩形

矩形是 FabricJS 中最基础的形状之一。我们可以使用 FabricJS 的 Rect 类来创建一个矩形对象并设置其属性，例如位置、大小、颜色和填充。

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

这会在画布上创建一个大小为 50×50 的红色矩形。但是，由于 FabricJS 将矩形对象的中心点设置为其左上角，所以我们还需要将其位置左移到其中心：

rect.set({originX: 'center', originY: 'center'});

这会将矩形对象的原点设置为其中心点。

3. 锁定矩形的旋转

3.1 禁用矩形的旋转

FabricJS 允许我们使用 hasBorders 和 hasControls 属性来控制矩形是否显示边框和控制框。同样，我们可以使用 hasRotatingPoint 属性来决定矩形是否具有旋转点。

FabricJS 默认情况下启用这些功能，但我们可以将其设置为 false 来禁用矩形的旋转：

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 50,
    height: 50,
    hasRotatingPoint: false,
    hasControls: false,
    hasBorders: false
});
canvas.add(rect);

这个矩形没有旋转点，不显示控制框和边框。

3.2 隐藏旋转控制点

虽然禁用旋转点是一种方法，但是在有时候我们确实需要旋转功能的时候，禁用旋转点并不是最佳选择。FabricJS 允许我们使用控制器控制矩形的旋转。我们可以使用欲表示旋转的自定义图标来替换默认控制器图标，以隐藏旋转控制点。

我们可以使用 FabricJS 的 customiseControls 方法来定义自定义控制器。这里我们使用 rotateHandler 自定义对象：

fabric.Object.prototype.customiseControls = function (options) {
    if (!options.position) return this.callSuper('customiseControls', options);
    if (!this.hasRotatingPoint) return this.callSuper('customiseControls', options);
    var getIconName = function () {
        return 'rotateHandler';
    };
    var controls = {};
    Object.assign(controls, fabric.Object.prototype.controls, {
        "mtr": new fabric.Control({
            x: 0.5,
            y: -0.5,
            offsetY: -16,
            cursorStyleHandler: fabric.Cursors.ewResize,
            getActionHandler: options.getActionHandler,
            actionName: 'rotate',
            actionHandler: options.actionHandler,
            render: fabric.Object.prototype.controls.mtr.render,
            cornerSize: 24
        }),
        "rotationCenter": new fabric.Control({
            getActionHandler: options.getActionHandler,
            actionName: 'rotating',
            actionHandler: options.actionHandler,
            cursorStyleHandler: fabric.Cursors.crosshair,
            getCursor: getIconName,
            cornerSize: 24,
            marginTop: -12,
            marginRight: -12,
            lockMovementX: true,
            lockMovementY: true
        })
    });
    return controls;
};

上述代码使用 customiseControls 方法重新定义了控件。在控制器中，我们将 mtr（默认旋转控制器图标）和 rotating（旋转控制器图标）的默认图标大小设置为 24 像素，并将 offsetY 设置为 -12 像素（设置旋转控制点的纵向位置）。rotationCenter 控制器隐藏了旋转控制点，只显示指示符。

现在，我们在左侧工具栏的资源文件夹中上传我们的自定义图标文件，命名为 rotateHandler.png，完成后执行以下代码：

fabric.Image.fromURL('/path/to/rotateHandler.png', function(img) {
  fabric.Object.prototype.customIcons = img;
  canvas.renderAll();
});

此时，我们的自定义图标将展现在控制器上，旋转控制点也被隐藏了。

4. 总结

在这篇文章中，我们讨论了如何使用 FabricJS 创建和定制矩形对象，并探讨了如何锁定矩形的旋转，或者隐藏旋转控制点。通过自定义控制器，并上传自定义控制器方式，可以为用户定制更符合需求的旋转体验。

FabricJS 作为一个优秀的 HTML5 画布库，带来了很多方便的功能和易于使用的 API。我们可以使用 FabricJS 来创建各种形状，如矩形、圆形、线段等等。