Question

I have a BitmapData object named myBitmapData. It was loaded of PNG of size 104×104. This PNG represents a red circle on the transparent background.
There is also a Sprite object named myBackground. I want render that red circle into myBackground.

myBackground.graphics.beginBitmapFill(myBitmapData);
myBackground.graphics.drawRect(0, 0, myBitmapData.width, myBitmapData.height);
myBackground.graphics.endFill();
addChild(myBackground);

Everything is fine. I see a red circle in the left top of myBackground.

But when I change the third line to

myBackground.graphics.drawRect(0, 52, myBitmapData.width, myBitmapData.height);

and expect my circle to be translated 52 pixels down, I actually obtain something strange (for me :)): there are two red half-circles (they form like hourglass).

So, the question is: how do I render myBitmapData into the random position of myBackground?

P.S.
In the case of

myBackground.graphics.drawRect(0, 104, myBitmapData.width, myBitmapData.height);

it is circle again 🙂

Answer 1

This is caused by beginBitmapFill‘s default repeat = true parameter. There’s an example in the docs. Disabling the repetition won’t work though, you’d just get a half circle then.

There are several ways to fix this:

• Use a Matrix with a translation (displacement) as argument in beginBitmapFill.
• Draw the rectangle at 0,0 on another Sprite, and move that sprite to where you want it on the background.
• Don’t draw directly to the background, but to another bitmap using copyPixels. Then fill the background with that bitmap.