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

让我知道你是否还有其他问题。