Fabric.js | Circle lockScalingX 属性介绍

简介

Fabric.js 是一个基于 HTML5 Canvas 的开源绘图库，使得使用 Canvas 变得更加容易。它提供了丰富的 API，使得开发者可以轻松创建图像、文本、路径、图形及动画等等。Circle 是 Fabric.js 中的一个类，表示了一个圆形。其中 lockScalingX 属性用于设置是否禁止圆形在 X 轴方向上进行缩放。

语法

var circle = new fabric.Circle(options);
circle.lockScalingX = boolean;

参数

• options：可选，Object 类型，表示创建 Circle 实例的选项。具体选项请查看 fabric.Circle 类型的参数。
• boolean：必选，Boolean 类型，true 表示禁止在 X 轴方向上进行缩放，false 表示允许在 X 轴方向上进行缩放。

示例

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

var circle = new fabric.Circle({
    radius: 50,
    fill: 'red',
    top: 100,
    left: 100
});

circle.lockScalingX = true; // 禁止在 X 轴方向上进行缩放
canvas.add(circle);

效果

如上述代码所示，禁止了在 X 轴方向上对 circle 进行缩放，因此只能在 Y 轴方向上进行缩放。具体效果可参考下图：

注意事项

• 当 lockScalingX 设置为 true 时，使用 mousewheel 进行缩放时只有 Y 轴上的缩放是有效的。
• 当 lockScalingY 和 lockScalingX 同时设置为 true 时，不允许进行包括拖拽/缩放/旋转在内的操作。