Fabric.js | Rect lockUniScaling 属性

Fabric.js 是一款流行的开源 JavaScript Canvas 库，它能够轻松地创建高度交互式的互联网应用程序和游戏。在使用 Fabric.js 时，可以使用 lockUniScaling 属性控制 Rect 对象的缩放行为。

什么是 Rect 对象?

Rect 对象代表一个矩形。它是由 Fabric.js 库提供的一个基本形状对象，它拥有位置、大小、填充和轮廓线等属性，可以用于创建矩形、带圆角的矩形和方形等形状。

// 创建一个 Rect 对象
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'red'
});

// 将该 Rect 对象添加到 Canvas 对象中
canvas.add(rect);

lockUniScaling 属性详解

lockUniScaling 属性是一个布尔值，可以控制 Rect 对象是否被锁定成相等比例宽高缩放。它是 Rect 对象的默认属性，当它为 true 时，Rect 对象只能等比例缩放，否则是自由缩放。

// 创建一个 Rect 对象
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  lockUniScaling: true, // 初始状态下设置 lockUniScaling 为 true
  fill: 'red'
});

// 将该 Rect 对象添加到 Canvas 对象中
canvas.add(rect);

// 取消 lockUniScaling 属性
rect.set({ lockUniScaling: false });
canvas.renderAll();

在上述代码中, 我们使用 lockUniScaling 属性创建一个 Rect 对象，并将它添加到 Canvas 对象中。默认情况下，Rect 对象将锁住比例缩放，这意味着只有等比例缩放才能被执行。 在该示例中, 我们将 lockUniScaling 属性更改为 false 并将该 Rect 对象渲染到 Canvas 对象中.

其他可用的 Rect 属性

• backgroundColor：填充矩形背景的颜色，默认为 "#FFF"。
• borderColor：用于描绘矩形外框的颜色，默认值为 "#000" 。
• borderDashArray：一个包含实线和空白线段长度的数值数组来描绘边框，例如 [5, 5] 表示一段长为 5 pix 的实线和一段长为 5 pix 的空白线。
• borderWidth：描绘矩形外框的宽度，默认为 0。
• cornerColor：用于描绘控制点的颜色，默认值为 "#3D3D3D" 。
• cornersize：控制点的大小，默认值为 13。
• fill：填充矩形的颜色，默认值为 "#000"。
• left：矩形左边缘相对于 Canvas 左边缘的距离。
• opacity：矩形的不透明度，默认值为 1。
• originX/y：矩形的原点位置，即矩形宽度和高度的中心位置，默认值为 "left" 和 "top"。
• scaleX：矩形的水平缩放比例，默认值为 1。
• scaleY：矩形的垂直缩放比例，默认值为 1。
• top：矩形上边缘相对于 Canvas 顶部边缘的距离。
• visible：矩形是否可见，默认为 true。
• width：矩形的宽度，默认为 0。
• height：矩形的高度，默认为 0。

结论

lockUniScaling 属性在使用 Rect 对象时非常有用。设置为 true 时，它可以确保 Rect 对象只能以相等的比例缩放，而不会出现形变。在下一次使用 Fabric.js 绘制矩形时，这个属性会非常有用。

参考链接

• Fabric.js|Documentation - Rect
• Fabric.js|Documentation - lockUniScaling