需要帮助使用此函数来使用javascript销毁画布上的项目 [英] Need help using this function to destroy an item on canvas using javascript
问题描述
我使用mootools和mootools canvas库编写了以下代码。
I have the following piece of code written using mootools and mootools canvas library.
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();
}
}));
现在我想做的是在画布上绘制方块后立即销毁它们。
Now what I would like to do is destroy the squares soon after they are drawn on the canvas.
文档中给出的函数是
item.destroy( );
问题是，无论我怎么做，我都无法做到从画布上摧毁物体！这样做的正确方法是什么？
The problem is, no matter how I do it, I am not able to destroy the objects from the canvas! What would be the correct way to do it?
推荐答案
Mootools是一个基于类的JavaScript框架。为了使用它，你需要像对象一样调用对象而不是它们的构造函数。
Mootools is a class based JavaScript framework. In order to use it you need to call objects as if they were classes and not their constructors directly.
CANVAS库是规则的一个例外，因为它是静态的阶级。但是，在使用图层方法之前，需要初始化图层类。
The CANVAS library is an exception to the rule as it is a "static" class. However, before you can use layer methods, you need to initialize the layer class.
当您使用Layer类的add方法时，您要求新项目被添加到该Layer类。您可以使用此方法两次，一次在循环之前，一次在其中。但是，您没有初始化图层类。因此，我假设在循环应该初始化类之前的情况。这需要替换为 var itemlayer = new Layer（'items'）;
When you use the add method of the Layer class, you are asking for new items to be added to that Layer class. You use this method twice, once just before the loop and once just inside it. However, at no point do you initialize the layer class. Therefore, I assume that case before the loop is supposed to initialize the class. This needs to be replaced with var itemlayer = new Layer('items');
使用<$ c时$ c> itemlayer.add 在循环内部，您传递并反对Layer对象，然后为您自动创建CanvasItem对象。然后它会将这些对象返回给您。由于destroy方法是CanvasItem类的成员，因此需要在变量中捕获它们才能调用它。由于它发生在循环内，如果你想删除循环外的对象，你需要一个数组。
When using itemlayer.add inside the loop, you are passing and object to the Layer object which is then automatically creating the CanvasItem objects for you. It then returns these objects to you. Since the destroy method is a member of the CanvasItem class, you need to catch them in a variable in order to call it. Since it is happening inside a loop, if you wish to delete the objects outside of the loop, you will need an array.
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（）删除它。
Then when you wish to destroy an item, as long as you know its j and i index, you can delete it with itemArray[j][i].destroy().
最后，请记住，destroy方法仅记录为触发CanvasItem的destroy事件。根据库实现的内容，您可能需要编写自己的destroy事件，以便从画布中实际删除它。
Finally, keep in mind that the destroy method is only documented as firing the CanvasItem's destroy event. Depending on what the library has implemented, you may need to write your own destroy event in order to actually remove it from the canvas.
这篇关于需要帮助使用此函数来使用javascript销毁画布上的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
