如何使用 FabricJS 在移动时设置圆的边框不透明度？

1. FabricJS 简介

FabricJS 是一个用于交互式图形设计的 JavaScript 库，它基于 HTML5 canvas元素封装了一个高效、易于使用的工具集，能够让开发者快速创建基于 canvas 的交互式应用。

2. 移动时设置圆的边框不透明度

在使用 FabricJS 绘图时，我们有时需要在移动时设置某个对象的属性。比如，我们想要在移动一个圆的同时，调整它的边框不透明度（opacity）。下面是实现这个效果的代码：

canvas.on('object:moving', function(e) {

  var obj = e.target;
  if (obj.type === 'circle') {
    obj.set('strokeWidth', 5 * obj.scaleX);
    obj.set('opacity', temperature);
    canvas.renderAll();
  }
});

2.1 Object:moving 事件

FabricJS 提供了一个 object:moving 事件，该事件调用时机为，当鼠标指针按下并移动，此时与鼠标指针相关联的对象开始移动时。就像下面这样：

canvas.on('object:moving', function(e) {

  // code
});

2.2 获取目标对象

在上面的代码中，我们使用 e.target 获取目标对象。然后判断它是否是圆。如果是，就可以对它进行修改。

var obj = e.target;

if (obj.type === 'circle') {
  // code
}

2.3 设置属性

现在，我们已经获取到了当前移动的圆对象，接下来就可以设置属性。上面的例子中，我们设置了圆的边框宽度和不透明度，代码如下：

obj.set('strokeWidth', 5 * obj.scaleX);

obj.set('opacity', temperature);

这里 obj.scaleX 是圆对象的缩放比例，因为如果圆的缩放比例发生了变化，边框宽度也需要随之变化。

2.4 渲染画布

完了之后，我们要记得调用 canvas.renderAll() 方法，重新渲染画布，才能看到修改后的效果。代码如下：

canvas.renderAll();

3. 示例

下面是一个简单的示例，它提供了一个可拖动的圆，将圆的位置、大小、边框颜色、不透明度等信息输出在控制台中。可以在不同的温度下，实现边框的透明度变化。代码如下：

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

var circle = new fabric.Circle({
  radius: 50,
  top: 100,
  left: 100,
  fill: '#f55',
  strokeWidth: 5,
  stroke: '#000',
  opacity: temperature
});
canvas.add(circle);
canvas.setActiveObject(circle);
canvas.on('object:moving', function(e) {
  var obj = e.target;
  if (obj.type === 'circle') {
    obj.set('strokeWidth', 5 * obj.scaleX);
    obj.set('opacity', temperature);
    console.log('position:', obj.top, obj.left);
    console.log('scale:', obj.scaleX, obj.scaleY);
    console.log('border:', obj.stroke, obj.strokeWidth, obj.opacity);
  }
});
canvas.on('object:scaling', function(e) {
  var obj = e.target;
  if (obj.type === 'circle') {
    obj.set('strokeWidth', 5 * obj.scaleX);
    obj.set('opacity', temperature);
    console.log('position:', obj.top, obj.left);
    console.log('scale:', obj.scaleX, obj.scaleY);
    console.log('border:', obj.stroke, obj.strokeWidth, obj.opacity);
  }
});

将上述代码复制到 demo.html 文件中，并在该 HTML 文件所在目录下，新建一个含有 id="canvas" 的 div 元素即可看到效果。