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/

使用fabric js将多个元素添加到画布

1 个答案: