# [web] Flex BitmapAsset + graphics.drawRect with Matrix

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

## 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
untranslate

(specifically)
    context2D.clearRect(0, 0, canvas.width, canvas.height);    context2D.save();    context2D.translate(HALFCANVASWIDTH - HALFIMAGEDIMENSION, HALFCANVASHEIGHT - HALFIMAGEDIMENSION);    currentFunction();    context2D.drawImage(image, 0, 0);    context2D.restore();

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.rotate(sineWave)            tm.translate( (width/2 ), (height/2) )            graphics.clear()            graphics.beginBitmapFill(SmileAsset.bitmapData,tm,false,true)            graphics.drawRect(0,0,width,height);            graphics.endFill();  }

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?

Thanks.

1. 1
2. 2
Rutin
21
3. 3
JoeJ
18
4. 4
5. 5

• 14
• 40
• 23
• 13
• 13
• ### Forum Statistics

• Total Topics
631722
• Total Posts
3001892
×