添加多个元素到画布js

对不起，我的英语不好。我想学习使用fabric.js。添加多个元素到画布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(); 
    };

文件，但我没有看到对两个元素的解决方案。

我看到第一个元素，接下来，如果我按另一个按钮，则会完全清除画布并添加新元素，但会清除第一个元素。如果我点击画布正方形，返回第一个创建的元素。为什么？正如我可以看到，当我有两个不同的按钮两个不同的元素？谢谢。

来源

2014-07-24 awar

你在一个新的画布，每次渲染你按下按钮：

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

要呈现在画布上的你的功能之外

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

然后使用按钮将其添加。

你可以在这里看到一个例子：http://jsfiddle.net/33MME/2/

来源

2014-07-24 15:40:23

添加多个元素到画布js

回答

相关问题