[Sugar-devel] [Karma] question about image loading

[Felipe López Toledo]

>but how do I temporarily erase the normal monkey and draw the happy
>monkey?think in canvas as a big rectangle, whatever you draw are pixels and
not objects, so, you can not clear an object :(....at least, it's not as
easy

the procedure I have follow with my early experiments:
proc 0)
0. draw the bg image
1. draw the shape( at position 0). set x=1
2. "wait"
3. clear the canvas
4. draw the bg image
5. draw the shape (at position x )
6. loop 2. x+=1

maybe you won't need step 3 or 4, but anyway it's a major issue: we're
clearing the whole canvas and/or redrawing all the objects (think about all
the time and cpu wasted rendering all the objects)

proc 1)
0. draw the bg image
1. draw the shape( at position 0). set x=1
2. calculate the next shapes's position and calculate the position of the
overlapping rectangle (bg and shape) at the next shape iteration (at
position x)
3. get the image data of the overlapping rectangle (calculated on step 2)
using context.getImageData()
4. "wait"
5. redraw the overlapping rectangle using putImageData()
6. draw the shape (at position x)
7. loop 2. x+=1

it's more complicated, but we save time and cpu (neither clearing the
canvases nor redrawing all the objects), please note that we also waste time
and cpu saving a certain canvas area, but it's just a small region. The
issue using this method is that: getImageData will throw you an
NS_ERROR_DOM_SECURITY_ERR error (tested with ff 3.5.2) when the images are
not on the same domain. I got this error when loading the html document
using file:///

I have used proc 0) on quadrilaterals

2009/8/24 Bryan Berry <bryan at olenepal.org>

> Hey Felipe,
>
> I am trying to add the sprite for the "happy monkey." The monkey starts
> off in the normal position, then when the user gets the answer right I
> want to briefly show the happy monkey image instead.
>
> I am completely confused how to load the happy monkey
> I am trying to 1st draw the normalmonkey w/
>
> context.drawImage(....)
>
> but how do I temporarily erase the normal monkey and draw the happy
> monkey?
>
> below is my current, horrible, ineffective code
>
>        //draw monkey
>        var monkeyNormalImg = new Image();
>        var monkeySadImg = new Image();
>        monkeyNormalImg.src = 'chimp/normal_200x209.png';
>        monkeySadImg.src = 'chimp/sad_200x209.png';
>
>        monkeyNormalImg.onload = function () {
>            monkeyCtx.drawImage(monkeyNormalImg, 0,20);
>        };
>
>        var redrawMonkey = function () {
>                monkeySadImg.onload = function () {
>                    monkeyCtx.drawImage(monkeySadImg, 0,20);
>                };
>
>        };
>
>
>
> --
> Bryan W. Berry
> Technology Director
> OLE Nepal, http://www.olenepal.org
>
>


-- 
Felipe López Toledo
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.sugarlabs.org/archive/sugar-devel/attachments/20090824/e75b67ea/attachment-0001.htm