Fabric.js ActiveSelection scaleY 属性介绍

概述

在 Fabric.js 中，ActiveSelection 是一个特殊的对象，它用于表示在画布上选中的一组对象。scaleY 属性是 ActiveSelection 对象的一个属性，用于控制该选中对象组在垂直方向上的缩放比例。

语法

activeSelection.scaleY

使用方法

1. 获取 ActiveSelection 对象的 scaleY 属性值：

const selection = canvas.getActiveObject(); // 获取当前选中的对象，返回一个 ActiveSelection 对象
const scaleY = selection.scaleY; // 获取 scaleY 属性值
console.log(scaleY); // 输出 scaleY 值

2. 设置 ActiveSelection 对象的 scaleY 属性值：

const selection = canvas.getActiveObject(); // 获取当前选中的对象，返回一个 ActiveSelection 对象
selection.scaleY = 1.5; // 设置 scaleY 属性值
canvas.renderAll(); // 重新渲染画布，使设置生效

示例

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

const rect1 = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 100,
  fill: 'red'
});

const rect2 = new fabric.Rect({
  left: 150,
  top: 150,
  width: 100,
  height: 100,
  fill: 'blue'
});

canvas.add(rect1, rect2);

// 选中两个矩形对象
canvas.setActiveObject(new fabric.ActiveSelection([rect1, rect2], {
  canvas: canvas
}));

const selection = canvas.getActiveObject(); // 获取当前选中的对象，返回一个 ActiveSelection 对象
console.log(selection.scaleY); // 输出当前选中对象组的 scaleY 值

selection.scaleY = 1.5; // 设置 scaleY 属性值
canvas.renderAll(); // 重新渲染画布，使设置生效

结论

通过设置 ActiveSelection 对象的 scaleY 属性，可以控制选中对象组在垂直方向上的缩放比例。注意，scaleY 属性值为 1 表示不进行缩放，大于 1 表示放大，小于 1 表示缩小。