fabric.js中的轮廓和边框

Question

我正在将fabric.js用于画布形状。但是现在我必须在这些形状上添加边框，如下所示。在fabricjs中怎么可能？还是我们还有其他的js库可以得到相同的输出？

我想要下面的输出：

Answer 1

为什么不从两个矩形中创建一个组？像这样：

var canvas = this.__canvas = new fabric.StaticCanvas('c');

var rectBack = new fabric.Rect({
  width: 170,
  height: 170,
  top: 0,
  left: 0,
  fill: 'rgba(0,0,255,1.0)',
  rx: 2,
  ry: 2
});

var outerMargin = 10
var innerOutlineWidth = 4

var innerOutline = new fabric.Rect({
  width: 170 - outerMargin - innerOutlineWidth/2,
  height: 170 - outerMargin - innerOutlineWidth/2,
  top: outerMargin/2,
  left: outerMargin/2,
  stroke: 'rgba(255,255,255,1.0)',
  fill: 'rgba(0,0,0,0.0)',
  strokeWidth: innerOutlineWidth,
  rx: 10,
  ry: 10
});

var group = new fabric.Group([rectBack, innerOutline], {
  left: 0,
  top: 0,
  angle: 0
});

canvas.add(group);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

您使用的任何框架都将具有一些基本的构建基块，您必须将它们拼凑起来才能获得所需的内容。所以我不建议跳到另一个。