Can't remove an item from the canvas once added! Why is this happening to me... :'( [Mootools Canvas Library]

4 views
Skip to first unread message

shouvik

unread,
Sep 20, 2010, 5:08:59 AM9/20/10
to MooTools Users
Hi All,

I have asked this question before and it seemed that the code I was
using was pretty confusing. So this is a virtually dumbed down version
of the same code. I draw a square on the canvas using the add
function. Likewise I should be able to remove the item from the canvas
using the remove function! Alas, it doesn't seem to happen.

Here is the code

$(window).addEvent('load',function(){


CANVAS.init({ canvasElement : 'canvas' });
CANVAS.layers.add( new Layer({
id : 'myLayer'
}));

var colors = [
'rgba(255,0,0,1)',
];

var pos = [
{ x: 150, y : 100 },
]

var foo = new CanvasItem({
id : 'item',
x : pos[0].x,
y : pos[0].y,
fillStyle : colors[0],
events : {
onDraw : function(ctx)
{
ctx.fillStyle = this.fillStyle;
ctx.fillRect(this.x,this.y,200,200);
}
}
});

CANVAS.layers.get('myLayer').add(foo);
CANVAS.draw();
CANVAS.layers.get('myLayer').remove(foo);
CANVAS.draw();
});

It can also be seen here is jsfiddle
http://jsfiddle.net/WRRns/4/
The library I am using to implement this is via mootools canvas
library. Here is the link of the functions.
http://forvar.de/js/mcl/docs.Layer.html#fn-remove

Thanks

Sean McArthur

unread,
Sep 20, 2010, 12:49:40 PM9/20/10
to mootool...@googlegroups.com
I've never used it, and I haven't had time to read the source code, but the documentation suggests that you pass the item ID to `remove`.

CANVAS.layers.get('myLayer').remove(foo.id);

Yet, that didn't work either... So I searched the source code. It seems the Layer.remove function has a bug in it. It doesn't pass the ID to the destroy and erase methods, it passes the hard coded string 'id'.

shouvik

unread,
Sep 21, 2010, 12:34:18 AM9/21/10
to MooTools Users
Thanks Sean. I noticed it too. Since I am a novice I suspected I was
making an error somewhere. So I decided to take a second opinion :)

Now I seem to have identified the bug. The corrected lib can be found
here. http://gist.github.com/raw/589185/09ca0dea770aff745ab9f429920f132dba0230c3/mcl-min.js

Thanks for your assistance.

tofu

unread,
Oct 8, 2010, 11:43:52 AM10/8/10
to MooTools Users
hi shouvik
it's a bit hard to read what changed in the minified version on the
gist you sent.
could you fork and commit?
cheers
eni

On Sep 21, 6:34 am, shouvik <shouvik...@gmail.com> wrote:
> Thanks Sean. I noticed it too. Since I am a novice I suspected I was
> making an error somewhere. So I decided to take a second opinion :)
>
> Now I seem to have identified the bug. The corrected lib can be found
> here.http://gist.github.com/raw/589185/09ca0dea770aff745ab9f429920f132dba0...

tofu

unread,
Oct 9, 2010, 11:13:43 AM10/9/10
to MooTools Users

shouvik

unread,
Oct 12, 2010, 2:19:01 AM10/12/10
to MooTools Users
Check this out. A fully functioning fiddle that I made to show how the
library can be used to create a complex mouse interaction form. :)
Wish someone could make it touch sensitive.. :)

On Oct 9, 8:13 pm, tofu <enrique.e...@gmail.com> wrote:
> Nevermind, got ithttp://github.com/eerne/mootools-canvas-lib/commit/816789e76e1fd10946...

shouvik

unread,
Oct 12, 2010, 2:19:45 AM10/12/10
to MooTools Users
Sorry forgot to link the fiddle :P.. http://jsfiddle.net/3GC5h/3/
Reply all
Reply to author
Forward
0 new messages