我可以在Fabric.js中创建更复杂的形状吗？

Question

我正在使用JavaScript / Fabric.js创建一个简单的图形编辑器，我需要能够创建比基本（线，三角形，圆形，椭圆形，正方形，矩形）更复杂的形状。之一：

绿线是形状的边界，黑色是填充。我需要能够操纵边框大小/颜色并尽可能填充基本形状的颜色。这在fabric.js中是否可行？如果是的话，你能否指出我应该看的方向，因为目前我不知道如何做到这一点。

Answer 1

这应该让你开始。

JavaScript的：

var canvas = new fabric.Canvas('c');
var defaultProperties = {
  fill: 'black',
  stroke: 'lime',
  strokeWidth: 12
};
var ellipse = new fabric.Ellipse({
  left: 30,
  top: 30,
  rx: 170,
  ry: 110,
  strokeWidth: 12
});
var horizontalLine = new fabric.Line([30, 140, 370, 140]);
var verticalLine = new fabric.Line([200, 30, 200, 140]);
var group = new fabric.Group([ellipse, horizontalLine, verticalLine]);
group.set(defaultProperties);
canvas.add(group);
var toggle = true;
document.getElementsByTagName('button')[0].addEventListener('click', function() {
  if (toggle) {
    group.set({
      fill: 'red',
      stroke: 'pink',
      strokeWidth: 5
    });
  } else {
    group.set(defaultProperties);
  }
  toggle = !toggle;
  canvas.renderAll();
});

所有重要的JSFiddle：https://jsfiddle.net/rekrah/mj5c2bx0/。

如果您有任何其他问题，请与我们联系。