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

Question

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

绿线是形状的边框，黑色是填充。我需要能够像基本形状一样操纵边框 size/color 和填充颜色。这在 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/。

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

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

Can I create more complex shapes like this one in Fabric.js?

html

javascript

html5-canvas

fabricjs