Fabric.js ActiveSelection getObjectScaling() 方法

Fabric.js是一个使用HTML5 Canvas构建交互式文本和图形的开源库。ActiveSelection是Fabric.js中的一个对象，表示在画布上选择的多个对象。getObjectScaling()方法可用于获取选定对象的当前缩放。本文将介绍此方法的使用。

语法

getObjectScaling(property)

参数

property （可选）- 字符串值，表示要获取的缩放属性。其可选值为："x"、"y" 或 "uniform"。默认值为 "uniform"，返回宽度和高度同时被缩放的比例。

返回值

返回选定对象当前使用的缩放值。

示例

var canvas = new fabric.Canvas("myCanvas");
var rect1 = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 100,
  fill: "#f55"
});

var rect2 = new fabric.Rect({
  left: 150,
  top: 150,
  width: 100,
  height: 100,
  fill: "#55f"
});

var group = new fabric.ActiveSelection([rect1, rect2], {canvas: canvas});

canvas.add(group);

// 获取选定对象的当前缩放值
var scaling = group.getObjectScaling();

console.log(scaling); // 输出：{ x: 1, y: 1, uniform: true }

在上面的示例中，我们首先创建了两个Rect对象- rect1和rect2，然后将它们放入了一个ActiveSelection对象 group。最后，使用getObjectScaling()方法获取选定对象的缩放，并将其输出到控制台。

使用指南

getObjectScaling()方法是ActiveSelection类的方法，可用于获取选定对象的当前缩放值。 它接受一个字符串参数property，表示要获取的缩放属性。如果要在水平和垂直方向分别获取缩放值，请传递参数 "x" 和 "y"。如果想要同时获取两者，可以使用参数 "uniform"。如果未提供参数，则默认返回 "uniform"。

注意：如果选定对象包含不同的缩放值，则该方法将返回一个对象，其中包含每个对象的缩放值。

// 获取选定对象的 x 和 y 缩放值
var scalingXY = group.getObjectScaling("xy");

console.log(scalingXY); // 输出：{ x: 1, y: 1 }

// 获取选定对象的宽度和高度同时缩放的比例
var scalingUniform = group.getObjectScaling("uniform");

console.log(scalingUniform); // 输出：{ x: 1, y: 1, uniform: true }

getObjectScaling()方法返回的结果是一个键值对，其中键分别为 "x"、"y" 和 "uniform"，表示选定对象当前使用的缩放值。如果指定了参数 property，则只返回相应缩放值；否则，返回所有缩放值。

结论

Fabric.js库是一个功能强大的 HTML5 Canvas 库，提供了许多实用功能，如对象选择和编辑等。ActiveSelection类允许用户选择和编辑多个对象，而getObjectScaling()方法则有助于获取选定对象的当前缩放值，方便后续的操作。