我可以在 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/。

如果您还有其他问题，请告诉我。