如何使用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/