如何使用Fabric.js創建多個形狀？

Question

我希望能夠使用雙擊在畫布上創建多個矩形。 但是，我只能創建一個矩形。 此外，是否有一種方法可以為每個創建的矩形添加ID？ 我希望能夠隨時訪問我想要的任何矩形並更改其屬性。

var i=0;

function drawRectangle() {
   if (rectClickToggle) {
          getMouse(event);
          var canvas = new fabric.Canvas('drawArea');
          canvas.add(new fabric.Rect({width:20,height:20,fill:'#f55',top:my,left:mx}));
          canvas.item(i).set({borderColor:'red',cornerColor:'green',cornerSize:6,transparentCorners: false});
          canvas.setActiveObject(canvas.item(i));   
          i++;
       }
  }

 drawArea.ondblclick = drawRectangle;

Answer 1

每次調用drawRectangle函數時，都要重新定義畫布。 嘗試將該代碼移到drawRectangle函數之外。

---

編輯 - 用於繪制多個矩形。

var canvas = new fabric.StaticCanvas('canvas-ele');
canvas.setHeight(300);
canvas.setWidth(300);
var drawRect = function(e) {
    canvas.add(new fabric.Rect({
            left: e.x - 10,
            top: e.y - 10,
            fill: 'rgba(100,0,0,0.3)',
            width: 72,
            height: 72,
            stroke: 'black'
        })
    );
};
var canvasEle = document.getElementById('canvas-ele');
canvasEle.ondblclick = function (e) {
    drawRect(e);
};
canvas.renderAll();

試試小提琴http://jsfiddle.net/coryasilva/Y5fu5/

***作為附注，我不建議使用雙擊; 它會導致糟糕的用戶體驗）

---

編輯＃2

我現在明白了。 這是如何運作的？

http://jsfiddle.net/Y5fu5/3/