如何使用 FabricJS 禁用 Image 对象的特定控制点？

1. FabricJS 禁用 Image 对象的特定控制点

FabricJS 是一个非常流行的 HTML5 canvas 库，它提供了丰富的功能和易于使用的API，使得在网页上创建交互式图形变得非常容易。其中，Image 对象是一个基本的元素，它可以用于显示图片并允许用户对图片进行拖拽，缩放和旋转等操作。但有时候我们可能需要禁用某些图片控制点，例如禁用拖拽功能，禁用旋转功能等。本文将介绍如何使用 FabricJS 禁用 Image 对象的特定控制点。

1.1 禁用拖拽功能

禁用 Image 对象的拖拽功能很简单，只需要设置 image 对象的属性

draggable 为 false 即可。下面是一个简单的示例：

var canvas = new fabric.Canvas('canvas');

var imgUrl = 'https://picsum.photos/200';
fabric.Image.fromURL(imgUrl, function(img) {
    canvas.add(img.set({left: 100, top: 100, scaleX: 0.5, scaleY: 0.5, hasControls: true, hasBorders: true}));
});

上述代码创建了一个 Image 对象，并将它添加到了 canvas 上，并允许用户对它进行拖拽、缩放和旋转等操作。现在我们需要禁用拖拽功能，只需要在创建对象时设置 draggable 属性为 false 即可。

var canvas = new fabric.Canvas('canvas');

var imgUrl = 'https://picsum.photos/200';
fabric.Image.fromURL(imgUrl, function(img) {
    canvas.add(img.set({left: 100, top: 100, scaleX: 0.5, scaleY: 0.5, hasControls: true, hasBorders: true, draggable: false}));
});

上述代码将对象的 draggable 属性设置为 false，因此用户无法对其进行拖拽。

1.2 禁用缩放功能

禁用 Image 对象的缩放功能需要设置其属性 lockScalingX 和 lockScalingY 为 true。如果只需禁用一个方向的缩放，则可以只设置其中一个属性为 true。下面是一个示例：

var canvas = new fabric.Canvas('canvas');

var imgUrl = 'https://picsum.photos/200';
fabric.Image.fromURL(imgUrl, function(img) {
    canvas.add(img.set({left: 100, top: 100, scaleX: 0.5, scaleY: 0.5, hasControls: true, hasBorders: true}));
});

上述代码创建了一个 Image 对象，并将它添加到了 canvas 上，并允许用户对它进行缩放和旋转等操作。现在我们需要禁用缩放功能，只需要在创建对象时设置 lockScalingX 和 lockScalingY 属性为 true 即可。

var canvas = new fabric.Canvas('canvas');

var imgUrl = 'https://picsum.photos/200';
fabric.Image.fromURL(imgUrl, function(img) {
    canvas.add(img.set({left: 100, top: 100, scaleX: 0.5, scaleY: 0.5, hasControls: true, hasBorders: true, lockScalingX: true, lockScalingY: true}));
});

上述代码将对象的 lockScalingX 和 lockScalingY 属性设置为 true，因此用户无法对其进行缩放。

1.3 禁用旋转功能

禁用 Image 对象的旋转功能需要设置其属性 lockRotation 为 true。下面是一个示例：

var canvas = new fabric.Canvas('canvas');

var imgUrl = 'https://picsum.photos/200';
fabric.Image.fromURL(imgUrl, function(img) {
    canvas.add(img.set({left: 100, top: 100, scaleX: 0.5, scaleY: 0.5, hasControls: true, hasBorders: true}));
});

上述代码创建了一个 Image 对象，并将它添加到了 canvas 上，并允许用户对它进行缩放和旋转等操作。现在我们需要禁用旋转功能，只需要在创建对象时设置 lockRotation 属性为 true 即可。

var canvas = new fabric.Canvas('canvas');

var imgUrl = 'https://picsum.photos/200';
fabric.Image.fromURL(imgUrl, function(img) {
    canvas.add(img.set({left: 100, top: 100, scaleX: 0.5, scaleY: 0.5, hasControls: true, hasBorders: true, lockRotation: true}));
});

上述代码将对象的 lockRotation 属性设置为 true，因此用户无法对其进行旋转。

1.4 禁用特定角落的控制点

如果需要禁用 Image 对象的特定角落的控制点，可以使用 FabricJS 的控制点过滤器（controlsFilter）属性。下面是一个示例：

var canvas = new fabric.Canvas('canvas');

var imgUrl = 'https://picsum.photos/200';
fabric.Image.fromURL(imgUrl, function(img) {
    img.setControlsVisibility( {
        mt: false,
        mb: false,
        ml: false,
        mr: false,
        bl: false,
        br: false,
    });
    canvas.add(img.set({left: 100, top: 100, scaleX: 0.5, scaleY: 0.5, hasControls: true, hasBorders: true}));
});

上述代码创建了一个 Image 对象，并将它添加到了 canvas 上。使用 img.setControlsVisibility 方法设置控制点过滤器，禁用了 Image 对象的左上角（mt），左下角（mb），右上角（ml），右下角（mr），左下角（bl），右下角（br）的控制点。

1.5 总结

通过设置 Image 对象的属性或使用控制点过滤器，我们可以轻松地禁用 Image 对象的拖拽、缩放和旋转等功能。这使得我们可以更容易地控制网页上的交互式图形，提高用户体验。