Fabric.js ActiveSelection noScaleCache 属性

在使用 Fabric.js 进行页面渲染时，可能需要对选中的多个对象进行统一的操作。这时可以使用 Fabric.js 的 ActiveSelection 功能，将多个对象作为一个整体。而 noScaleCache 属性则是针对 ActiveSelection 的一个特殊属性。

什么是 ActiveSelection？

ActiveSelection 是 Fabric.js 中的一个功能，它可以将多个对象作为一个整体进行选中和操作。在 ActiveSelection 中，你可以直接对整体进行一些操作，如移动、旋转、缩放、改变透明度等。这种操作可以让选中的多个对象同时随之发生改变，从而达到一致性的效果。

ActiveSelection 的实现方式

实现 ActiveSelection 非常简单，只需要将多个对象通过 new fabric.ActiveSelection(objects, options) 进行合并即可。其中，objects 是一个包含被合并对象的数组，options 则是合并选项，可以为空。

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

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

var group = new fabric.ActiveSelection([rect1, rect2], {
  lockMovementY: true, // 禁止 Y 方向移动
  hasRotatingPoint: false // 禁止旋转点
});

canvas.add(group);

noScaleCache 属性

noScaleCache 属性是 ActiveSelection 中的一个特殊属性，在进行 ActiveSelection 缩放时起到了很重要的作用。当 noScaleCache 为 true 时，ActiveSelection 不会缓存缩放计算结果，每次缩放都会重新计算，从而保证了选中的多个对象在缩放时不会出现明显的错位。

如果 noScaleCache 设置为 false，ActiveSelection 在进行缩放时会缓存计算结果，这时可能会出现多个对象缩放后错位较大的情况。

对于多个同步变化的对象，noScaleCache 属性是需要格外注意的，特别是当这些对象有相对位置等约束时。在保证 ActiveSelection 缩放正确性的同时，也要注意缩放算法的性能。

示例代码

以下是一个具有 noScaleCache 属性的 ActiveSelection 示例代码：

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

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

var group = new fabric.ActiveSelection([rect1, rect2], {
  lockMovementY: true, // 禁止 Y 方向移动
  hasRotatingPoint: false, // 禁止旋转点
  noScaleCache: true // 关闭缩放缓存
});

canvas.add(group);