Как создать несколько фигур с помощью 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.

---

Edit - для рисования много прямоугольников.

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/

*** Как примечание стороны, я не рекомендую использовать двойной щелчок; это делает для плохой работы пользователя)

---

Edit # 2

Теперь я лучше понимаю. Как это работает?

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