使用javascript需要幫助使用此功能銷燬畫布上的項目

Question

我有以下使用mootools和mootools畫布庫編寫的代碼片段。

CANVAS.init({ canvasElement : 'canvas', interactive : true }); 

var itemlayer = CANVAS.layers.add({ id : 'items' }); 

for(var j = 0; j < 5; j++) 
{ 
for(var i = 0; i < 5; i++) 
{ 

    itemlayer.add({ 

     id : 'item-'+i + '-' + j, 
     x : 51 * i, 
     y : 51 * j, 
     w : 50, 
     h : 50, 
     state : 'normal', 
     interactive : true, //although they have no interactive events! 
     colors : { normal : '#f00', hover : '#00f' }, 
     events : { 
      onDraw : function(ctx){ 

        ctx.fillStyle = this.colors[this.state]; 
        ctx.fillRect(this.x,this.y,this.w,this.h); 

        this.setDims(this.x,this.y,this.w,this.h); 
      } 
     } 

    }); 


} 

} 

CANVAS.addThread(new Thread({ 
      id : 'myThread', 
      onExec : function(){ 
        CANVAS.clear().draw(); 
      } 
    })); 

現在我想要做的就是在畫布上繪製後立即摧毀廣場。

的文檔，這樣做中給出的函數是

item.destroy(); 

Refer here。

問題是，無論我怎麼做，我都無法從畫布上銷燬對象！什麼是正確的方法來做到這一點？

參考code here implemented on js fiddle.

Answer 1

我不熟悉的mootools的內部結構，但它看起來像item.destroy（）僅僅是發送一個事件，而不是實際破壞畫布上的項目。畫布僅僅是一個位圖 - 它沒有像SVG那樣的獨立基元的圖層或記錄。

您將需要實際重畫在畫布上沒有他們，畫他們，或使用自己破壞矩形：

ctx.clearRect(this.x, this.y, this.w, this.h); 

這將清除由參數定義的矩形中在畫布上的所有信息。

編輯：在做了一些閱讀之後，它看起來像是將一個destroy（）函數傳遞給canvas項目的構造函數。這個函數必須包含你想銷燬你的物品的任何代碼（clearRect，fillRect，不管）。

Answer 2

Mootools是一個基於JavaScript的框架。爲了使用它，你需要調用對象，就好像它們是類而不是直接構造器一樣。

CANVAS庫是規則的例外，因爲它是一個「靜態」類。但是，在使用圖層方法之前，您需要初始化圖層類。

當您使用Layer類的add方法時，您要求將新項目添加到該Layer類。你使用這個方法兩次，一次在循環之前，一次在它內部。但是，您無法初始化圖層類。因此，我假設循環應該初始化類。這需要與var itemlayer = new Layer('items');

當使用itemlayer.add循環內進行更換，要傳遞和對象到對象層，然後自動爲用戶在創建CanvasItem對象。然後它將這些對象返回給你。由於destroy方法是CanvasItem類的成員，因此需要將它們捕獲到變量中以便調用它。由於它發生在一個循環內，如果你想刪除循環外的對象，你將需要一個數組。

CANVAS.init({ canvasElement : 'canvas', interactive : true }); 

var itemlayer = new Layer('items'); 
var itemArray = new Array; 
for(var j = 0; j < 5; j++) 
{ 
for(var i = 0; i < 5; i++) 
{ 

    item Array[j][i] = itemlayer.add({ 

     id : 'item-'+i + '-' + j, 
     x : 51 * i, 
     y : 51 * j, 
     w : 50, 
     h : 50, 
     state : 'normal', 
     interactive : true, //although they have no interactive events! 
     colors : { normal : '#f00', hover : '#00f' }, 
     events : { 
      onDraw : function(ctx){ 

        ctx.fillStyle = this.colors[this.state]; 
        ctx.fillRect(this.x,this.y,this.w,this.h); 

        this.setDims(this.x,this.y,this.w,this.h); 
      } 
     } 

    }); 


} 

然後，當你想摧毀一個項目，只要你知道它的j和I指數，你可以用itemArray[j][i].destroy()刪除。

最後，請記住，destroy方法僅記錄爲觸發CanvasItem的銷燬事件。根據庫實現的內容，您可能需要編寫自己的銷燬事件以便實際將其從畫布中移除。