javascript - fabricjs中的轮廓和边框

Question

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

我想要以下输出：

标签： javascripthtml5-canvasfabricjsfabricjs2

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>

你使用的任何框架都会有一些基本的构建块，你必须拼凑起来才能得到你想要的东西。所以我不建议跳到另一个。