Блог

Главная - Вопросы по программированию - контур и граница в fabricjs

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

#javascript #html5-canvas #fabricjs #fabricjs2

#javascript #html5-холст #fabricjs #fabricjs2

Вопрос:

Я использую fabric.js для фигур холста. но теперь я должен добавить границу с контуром к этим фигурам, как показано ниже. Как это возможно в fabricjs ??. Или у нас есть какая-либо другая библиотека js для получения того же результата?

введите описание изображения здесь

Я хочу, чтобы вывод был приведен ниже:

желаемое изображение

Ответ №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>

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