添加多個元素到畫布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

回答

相關問題