Fabric.js ActiveSelection BorderOpacityWhenMoving 属性

在 Fabric.js 中，ActiveSelection 是选择多个对象的一种特殊类型。当对激活的选择进行移动操作时，可以通过设置 BorderOpacityWhenMoving 属性来改变被选择对象的边框透明度。

什么是 BorderOpacityWhenMoving 属性？

当多个对象被选择并激活时，它们会被框起来，并且会显示出一个可拉伸的框。在移动这个框的时候，被选择的对象的边框颜色和透明度可以改变。BorderOpacityWhenMoving 属性就是控制被选择对象边框透明度的属性。

如何使用 BorderOpacityWhenMoving 属性？

要使用 BorderOpacityWhenMoving 属性，首先需要创建一个 ActiveSelection 对象。然后，使用 set 属性来设置 BorderOpacityWhenMoving 的值，例如：

var activeSelection = new fabric.ActiveSelection(objects, { 
  canvas: canvas, 
  borderOpacityWhenMoving: 0.5 
});

在上面的代码中，创建了一个 ActiveSelection 对象，并将 BorderOpacityWhenMoving 设置为 0.5。

BorderOpacityWhenMoving 属性的取值范围

BorderOpacityWhenMoving 属性的取值范围是 0 到 1。当设置为 0 时，被选择对象的边框完全透明。当设置为 1 时，边框完全不透明。取值在 0 和 1 之间，可以使边框的透明度有所不同。

示例

下面的示例演示了如何使用 BorderOpacityWhenMoving 属性来改变被选择对象的边框透明度。可以拖动被选择的对象来改变其透明度。

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

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

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

var objects = [rect1, rect2];

canvas.add.apply(canvas, objects);
canvas.setActiveObject(new fabric.ActiveSelection(objects, { 
  canvas: canvas, 
  borderOpacityWhenMoving: 0.5 
}));

总结

通过设置 BorderOpacityWhenMoving 属性，可以控制被选择对象的边框透明度。这可以使用户更好地看到被选择的对象，并提供更好的用户体验。