ActionScript - Drawing an image in the center of a shape in actionscript

Question

I'm trying to draw an image in actionscript, I set it as a BitmapFill within a rectangle. The problem is that if I move the rectangle away from the origin(0,0), in my case I start drawing the rectangle at (20,35), the bitmap background doesn't follow along. The background is always drawn at (0,0) and then repeated, so I don't get a centered image but rather 2 halved images. Here's what my code looks like:

public class PageTileRenderer extends VBox 
{
  private var sp:Shape;

  [Embed(source="../../../../assets/content.png")]
  private var contentIconClass:Class;
  private var contentIcon:Bitmap = new contentIconClass ();

  // ...

  private function drawIcon():void{
    sp.graphics.beginBitmapFill(contentIcon.bitmapData);
    sp.graphics.drawRect(20, 35, 13, 13);
    sp.graphics.endFill();
  }
}

So my question is how to move the background fill origin. Or is there another solution to draw the image centered.

Thanks in advance for your help.

Answer 1

You can use a transformation matrix to move the origin of your bitmap. It can be passed as an argument to beginBitmapFill (using your existing code):

private function drawIcon():void{
  var matrix:Matrix = new Matrix();
  matrix.translate(20, 35);
  sp.graphics.beginBitmapFill(contentIcon.bitmapData, matrix);
  sp.graphics.drawRect(20, 35, 13, 13);
  sp.graphics.endFill();
}

You can also rotate and scale the bitmap fill using the other Matrix methods.

Answer 2

private function init():void
{
     loader = new Loader();
     loader.load(new URLRequest("benny.jpg"));
     loader.contentLoaderInfo.addEventListener(Event.COMPLETE, action);
}
private function action (e:Event)
{
    var bmpData:BitmapData = new BitmapData(180,220);
    bmpData.draw(e.target.content);
    var bmp:Bitmap = new Bitmap(bmpData);
    with(bg.graphics){
        beginFill(0xefefef,1);
        drawRoundRect(0,0,300,300,3,3);
        endFill();
    }
    addChild(bg);
    bg.x = stage.stageWidth/2-bg.width/2;
    bg.y = stage.stageHeight/2-bg.height/2;
    bg.addChild(bmp);
    bmp.x = bg.width/2-bmp.width/2;
    bmp.y = bg.height/2-bmp.height/2;
}