使用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的销毁事件。根据库实现的内容，您可能需要编写自己的销毁事件以便实际将其从画布中移除。