• Advertisement
Sign in to follow this  

[web] Flex BitmapAsset + graphics.drawRect with Matrix

This topic is 2661 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I originally posted this to the ActionScript forums, but this might be a better place to get an answer.

Ok, newbie question!

As part of my 'trying to figure this tech out' I have been trying to re-implement some HTML5 Canvas tutorials in Flex so I can compare the two more directly. In this case I am trying to convert Matthew Casperson's "Advanced Image Manipulations with the Canvas Element tutorial to Flex. I am trying to keep to the 'how' as closely as possible even though I know the same result could be accomplished in Flex using addChild and such.

The basic tick loop it uses basically does:

clear the canvas
translate the canvas so it is centerd (width/2-image.width/2 etc)
preform transformation (rotate, alpha, shear, or scale)
blit image to translated origin


context2D.clearRect(0, 0, canvas.width, canvas.height);
context2D.drawImage(image, 0, 0);

To try to accomplish this in flex I have done something along these lines (just using the rotate case for simplicity):

public class SimpleCanvas extends UIComponent
[Embed(source = '../assets/jsplatformer1-smiley.jpg')]
public static const SmileImage:Class
private var SmileAsset:BitmapAsset = null;

public function init():void
SmileAsset = new SmileImage() as BitmapAsset;

public function onTick():void
var tm:Matrix = new Matrix();
tm.translate( -SmileAsset.width/2, -SmileAsset.height/2 )
tm.translate( (width/2 ), (height/2) )

Now, this has gotten me most of the way there, but has a problem. The image ends up in the center correctly, and rotates correctly, but I get a strange artifact with black bars extending from the top/bottom/left/right of the bitmap (the places where black pixels boarder the image) off into infinity.

I tried doing the drawRect based off the width/height of the image, but it ends up only drawing around the untranslated origin of the canvas (where there is no image). I tried creating a point, translating it using transformPoint and using that plus the image width/height, but that point also rotates resulting in a moving window of correctness on the canvas.

So, any suggestions here? Is there a way I can eliminate the artifacts, or perhaps a better way to handle this that still follows the original 'how' of the HTML5 example?


Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement