在fabricjs中的轮廓和边框

问题描述 投票:1回答:1

我使用fabric.js作为画布形状。但现在我必须在这些形状上添加边框,如下所示。如何在fabricjs中实现?或者我们有任何其他js库来获得相同的输出?

enter image description here

我想要下面的输出:

desired image

javascript html5-canvas fabricjs fabricjs2
1个回答
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>

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

© www.soinside.com 2019 - 2024. All rights reserved.