如何使用 FabricJS 设置圆的比例因子「边框」？

1. 什么是FabricJS

FabricJS 是一个用于处理HTML5 canvas元素的JavaScript 库。Canvas作为一项标准功能，它给设计师提供了一个很好的展示和创作平台，Fabricjs基于canvas创建图形处理支持。所以Fabricjs可以说是一个用于HTML5的画布库。

2. FabricJS 设置圆的比例因子“边框”

2.1 运用官网提供的demo

首先我们需要引入Fabricjs库，然后我们可以看一看官网提供的demo，官网给出了设置圆的比例因子“边框”的示例，我们可以参考它来设置，这里的canvas就是要展示的画布，circle就是要用来做比例因子的圆。

var canvas = new fabric.Canvas('canvas');
var circle = new fabric.Circle({
  radius: 100,
  stroke: 'red'
});
canvas.add(circle);
canvas.setWidth(600);
canvas.setHeight(600);
canvas.on("after:render", function() {
  canvas.contextContainer.globalCompositeOperation = "destination-in";
  var clipPath = circle.clipTo(canvas.getContext('2d'));
  canvas.renderAll();
});

上述代码中，radius表示圆的半径大小，stroke表示圆的描边颜色为红色。我们将圆加入canvas中，之后设置canvas的宽度和高度。render函数是用来重新渲染画布的。

值得注意的是函数after:render，当canvas画布上的所有对象被渲染时，则触发这个事件。在这个事件里面，我们需要将画布的合成模式globalCompositeOperation设置成"destination-in",然后我们把圆所在的区域离屏渲染（clipTo），这一函数会返回一个clipPath对象。最后我们把渲染后的画布再次渲染到canvas中，设置canvas.renderAll()。

2.2 设置圆的比例因子“边框”

我们在画圆时设定圆的线宽，然后在渲染后清空圆中的内容，接着重新渲染的时候，不仅圆边缘的线条得以主动显示，还能容易地随着圆的变化扩大或缩小；这就是所谓的比例因子“边框”，下面我们就来设置这一边框的参数。

首先看一下下面的代码：

var canvas = new fabric.Canvas('canvas');
var circle = new fabric.Circle({
  radius: 100,
  stroke: '#fff',
  strokeWidth: 5
});
canvas.add(circle);
circle.center();
canvas.setWidth(600);
canvas.setHeight(600);
canvas.on("after:render", function() {
  canvas.contextContainer.globalCompositeOperation = "destination-in";
  var ctx = canvas.getContext('2d');
  var clipPath = circle.clipTo(canvas.getContext('2d'));
  var scale = canvas.getZoom();
  ctx.save();
  ctx.fillStyle = "#000";
  ctx.scale(1 / scale, 1 / scale);
  var stroke = circle.strokeWidth * scale;
  ctx.lineWidth = stroke;
  circle._renderStroke(ctx);
  ctx.restore();
  canvas.renderAll();
});

circle.strokeWidth表示设置圆的描边宽度，我们把它定为5。scale就是比例因子，它表示使用哪个比例因子来控制圆的大小，它的值为canvas.getZoom()，这里getZoom()会根据滚轮事件的情况来设置。我们利用ctx.save()来备份当前的设置，之后设定fillStyle和线宽。circle._renderStroke()将圆的描边重新渲染过一次，之后使用ctx.restore()来恢复文件的设置。

在这些设置的基础上，我们将新的圆添加到canvas中，之后，我们会发现圆的描边颜色从红色变为了白色，并且有了类似于边框的效果。

总结

使用FabricJS设置圆的比例因子“边框”，需要先加入画布，之后渲染并设置圆，设置边框的相关参数。我们可以利用官网提供的demo，快速了解设置方法，也可以多加思考和尝试。