Fabric.js | Circle lockUniScaling 属性

简介

Fabric.js 是一个基于 HTML5 canvas 的开源库，用于创建交互式的绘图和动画。其中，Circle 是一种基本形状，lockUniScaling 属性是一个布尔类型的属性，它控制是否锁定圆的横向和纵向比例，从而保持它的形状不变。

语法

var circle = new fabric.Circle({
  // 其他属性
  lockUniScaling: true/false
});

参数

• true/false：表示是否锁定圆的横向和纵向比例。

示例

以下是一个简单的示例，展示了当 lockUniScaling 为 true 时，指定圆形大小的不同方法：

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

var circle1 = new fabric.Circle({
  top: 50,
  left: 50,
  radius: 50,
  fill: 'red',
  lockUniScaling: true
});
canvas.add(circle1);

var circle2 = new fabric.Circle({
  top: 150,
  left: 150,
  width: 50,
  height: 50,
  fill: 'blue',
  lockUniScaling: true
});
canvas.add(circle2);

var circle3 = new fabric.Circle({
  top: 250,
  left: 250,
  scaleX: 2,
  scaleY: 0.5,
  fill: 'green',
  lockUniScaling: true
});
canvas.add(circle3);

在这个例子中，我们创建了三个圆形，它们有不同的大小和位置，但都设置了 lockUniScaling 为 true。第一个圆形是直接指定了半径大小，第二个圆形是指定了宽度和高度的大小，第三个圆形是通过 scaleX 和 scaleY 来指定横向和纵向比例的大小。当我们拖动这些圆形时，它们仍然能够保持它们的形状不变。

总结

在 Fabric.js 中，Circle 是一个基本的形状。lockUniScaling 属性可以控制圆形的横向和纵向比例，从而保持它的形状不变。通过在创建 Circle 对象时指定 lockUniScaling 参数，我们可以实现对圆形大小的控制。