контур и граница в ткани

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>

В любом фреймворке, который вы используете, будут фундаментальные строительные блоки, которые вы должны собрать вместе, чтобы получить то, что вы хотите.Поэтому я бы не рекомендовал переходить к другому.