使用Fabric JS向画布添加多个元素

Question

对不起，我的英语不好。 我想学习fabric.js的用法。

对于基本命令，我没有任何问题。 但是我现在有这个问题。

我在index.html文件中有两个按钮：

<tr>
            <td><button id="caricarettangolo" onMouseDown="caricarettangolo(), caricatutto()" type="button"><img src="immagini/prodotti/rettangolo.svg" /></button></td></tr>
            <tr>
          <td><button type="button" onMouseDown="caricastella()"><img src="immagini/prodotti/stella.svg" /></button></td></tr>
        </tr>

和外部js文件与此代码

    function caricacerchio() {
  var canvas = new fabric.Canvas('canvas');
  var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
    canvas.getObjects();
    canvas.add(circle);
    canvas.selection = false; 
    canvas.renderAll();
    canvas.calcOffset(); 
    };

function caricarettangolo() {
    var canvas = new fabric.Canvas('canvas');
    var rect = new fabric.Rect({
    width: 50,
    height: 50,
    left: 50,
    top: 50,
    fill: 'rgb(255,0,0)'
});
    canvas.getObjects();
    canvas.add(rect);
    canvas.selection = true;
    canvas.renderAll();
    canvas.calcOffset(); 
    };

但是我没有看到两个元素的解决方案。

我看到第一个元素，接下来，如果我按下另一个按钮，这将完全清除画布并添加新元素，但会清除第一个元素。 如果单击画布方块，则返回第一个创建的元素。 为什么？ 如我所见，当我有两个不同的按钮和两个不同的元素时？ 谢谢。

Answer 1

每次按下按钮时，您将在新的画布上进行渲染：

 var canvas = new fabric.Canvas('canvas');

您想在功能之外渲染画布

 window.canvas = new fabric.Canvas('canvas');

然后使用按钮添加它们。

您可以在此处查看示例： http : //jsfiddle.net/33MME/2/