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

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

---

绿线是形状的边界，黑色是填充。我需要能够像操纵基本形状一样操纵边框大小/颜色和填充颜色。这在fabric.js中可能吗？如果是的话，你能告诉我应该看的方向吗，因为目前我还不知道怎么做。

这应该让你开始

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:

---

如果您还有任何问题，请告诉我。

这正是我需要的，非常感谢！我真的不知道我可以像那样对元素进行分组。不用担心，按照你的方式学习这些教程，它会很有帮助。