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

Question

I'm creating a simple graphic editor with JavaScript/Fabric.js and I need to be able to create somewhat more complex shape than the basic ones (line, triangle, circle, ellipse, square, rectangle ) like this one:

The green lines are the border of the shape and the black is the fill. I need to be able to manipulate the border size/color and fill color like I can for the basic shapes. Is this possible in fabric.js? If yes, could you point me in the direction I should look at because currently I have no clue how it could be done.

Answer 1

This should get you started.

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();
});

And the all important JSFiddle: https://jsfiddle.net/rekrah/mj5c2bx0/ .

Let me know if you have any further questions.