Question

我使用mootools和mootools canvas库编写了以下代码。

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是一个基于类的JavaScript框架。为了使用它，你需要调用对象，就像它们是类而不是它们的构造函数一样。

CANVAS库是规则的一个例外，因为它是一个“静态”类。但是，在使用图层方法之前，需要初始化图层类。

当您使用Layer类的add方法时，您要求将新项添加到该Layer类。您可以使用此方法两次，一次在循环之前，一次在其中。但是，您没有初始化图层类。因此，我假设在循环应该初始化类之前的情况。这需要替换为var itemlayer = new Layer('items');

在循环中使用itemlayer.add时，您将传递并反对Layer对象，然后自动为您创建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的destroy事件。根据库实现的内容，您可能需要编写自己的destroy事件，以便从画布中实际删除它。

Answer 2

我不熟悉mootools的内部，但看起来item.destroy（）只调度一个事件而不是实际销毁画布上的项目。画布只是一个位图 - 它没有像SVG那样的各个基元的层或记录。

你需要通过重新绘制没有它们的画布，绘制它们或使用它来实际销毁矩形：

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

这将清除画布中由参数定义的矩形内的所有信息。

编辑：做了一点阅读后，看起来你将destroy（）函数传递给画布项的构造函数。此函数必须包含您要销毁项目的任何代码（clearRect，fillRect，等等）。

需要帮助使用此函数来使用javascript销毁画布上的项目

2 个答案: