Flash/ActionScript: Draw a display object "onto" another

Answer 1

Using the display objects getBounds function can be a reliable solution to translate the coordinates while drawing :

private function drawOntoGraphics(source : IBitmapDrawable, target : Graphics, position : Point = null) : void
{
        position = position == null ? new Point() : position;

        var bounds : Rectangle = DisplayObject(source).getBounds(DisplayObject(source));
        var bitmapData : BitmapData = new BitmapData(bounds.width, bounds.height, true, 0x00000000);

        bitmapData.draw(source, new Matrix(1, 0, 0, 1, -bounds.x, -bounds.y), null, null, null, true);
        target.beginBitmapFill(bitmapData, new Matrix(1, 0, 0, 1, bounds.x + position.x, bounds.y + position.y));
        target.drawRect(bounds.x + position.x, bounds.y + position.y, bounds.width, bounds.height);
}

In addition to your comments... Below the same method using a BitmapData instead of the Graphics object as canvas:

private function drawOntoBitmapData(source : IBitmapDrawable, target : BitmapData, position : Point = null) : void
{
    position = position == null ? new Point() : position;
    var bounds : Rectangle = DisplayObject(source).getBounds(DisplayObject(source));
    var bitmapData : BitmapData = new BitmapData(bounds.width, bounds.height, true, 0x00000000);
    bitmapData.draw(source, new Matrix(1, 0, 0, 1, -bounds.x, -bounds.y), null, null, null, true);
    target.draw(bitmapData, new Matrix(1, 0, 0, 1, bounds.x + position.x, bounds.y + position.y));
}

Answer 2

The way i see it you have several ways to approach this:

• Use the graphics property of a "canvas" Shape
  Pros: Nice and simple
  Cons: Very limited, especially if you need to remove things, since you would have to redraw the whole canvas.

• Use a Bitmap and the .draw() method
  Pros: Also nice and simple, and you can do duplication of things more easily.
  Cons: Basically has the same problems as the prior approach, deleting anything would need a complete redraw. Also it won't be scalable since it's a bitmap.

• Use a Sprite and add primitives as children
  Pros: Very flexible.
  Cons: This allows you to move, scale and delete objects individually. However, it will be slightly more complicated than the previous two options.

Using the last approach (which I would recommend if you're going to do anything more than something very small with this) your problem can be solved by using Bitmaps that you add to your "drawing", these support transparency (like you've found out) and are a bit more straightforward than using bitmapFill (which is a bit tricky to get right).

I have an example of using a bitmap to clone and draw other DisplayObjects on my blog. It's not exactly what you want but the code might be of some use, atleast the matrix part for the draw method.

Answer 3

bzlm - you could always make the starting X position a constant, and combine drawRect with a Matrix translate.

var xPos:Number = 750;
var matrix:Matrix = new Matrix();
matrix.translate(xPos,0);
mySprite.graphics.beginBitmapFill(myBitmap,matrix);
mySprite.graphics.drawRect(xPos,yPos,imgWidth,imgHeight);