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

讓我知道你是否還有其他問題。