Fabric.js | Ellipse lockUniScaling 属性

概述

在使用 Fabric.js 进行图形绘制时，可以设置椭圆（Ellipse）对象的lockUniScaling属性来控制是否锁定宽高比例缩放。

lockUniScaling 属性为布尔值，默认为true。设置为true时，椭圆对象的宽高比例将保持不变，无法单独进行宽高的缩放调整；设置为false时，可以单独通过缩放调整宽高比例。

代码示例

创建椭圆对象

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

var ellipse = new fabric.Ellipse({
  left: 100,
  top: 100,
  rx: 50,
  ry: 30,
  fill: 'red'
});

canvas.add(ellipse);

操作椭圆对象的 lockUniScaling 属性

// 设置 lockUniScaling 为 true（默认值）
ellipse.lockUniScaling = true;

// 设置 lockUniScaling 为 false
ellipse.lockUniScaling = false;

效果演示

在 Fabric.js 中，可以使用以下代码演示 lockUniScaling 属性的作用：

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

var ellipse1 = new fabric.Ellipse({
  left: 100,
  top: 100,
  rx: 50,
  ry: 30,
  fill: 'red',
  lockUniScaling: true
});

var ellipse2 = new fabric.Ellipse({
  left: 300,
  top: 100,
  rx: 50,
  ry: 30,
  fill: 'blue',
  lockUniScaling: false
});

canvas.add(ellipse1, ellipse2);

效果如下：

总结

通过设置椭圆对象的lockUniScaling属性，可以控制是否锁定宽高比例缩放。这对于需要保持宽高比例的椭圆对象非常有用，可以避免误操作导致比例歪斜。

在需要灵活调整宽高比例的情况下，可以将lockUniScaling属性设置为false，以便单独进行宽高调整。