How to offset the position of a clipping mask?

(♥Armel Gibson♥) #1

Hey everyone

I’m trying to use the drawMask property of an Image, but I’m not sure how to.

I’m trying to draw an image on top of another one, and only show the pixels of the first image that are overlapping the second one. Here is a mockup to show what I want:

http://imgur.com/a/6xTkU

I have a face background (the yellow one), and I’m adding a mouth image at a somewhat random position on top of it. I want to use the background face as a clipping mask for the mouth to produce something like the 3rd picture.

What I’m doing is:

var clippingMask:BitmapData = FP.getBitmap(Embed.MASK_FACE);
mouth.drawMask = clippingMask;

The problem is the face mask is positioned at the 0,0 of the mouth. How can I offset it to the position of the real background face so it can show only the mouth part that I need?

Or maybe I’m going in the wrong direction and there is another way to achieve what I want?

Thanks in advance everyone~

(Martí Angelats i Ribera) #2

I think you’ll have to generate another BitmapData before using the draw Mask. It can be done with this code (not sure if works nor if it’s the best one becouse i haven’t tested it)

public static function offBitmapData(source:BitmapData, offset:Point):BitmapData
{
	var bd:BitmapData = new BitmapData((source.width + offset.x), (source.height + offset.y), true, 0);
	bd.copyPixels(source, source.rect, offset);
}

And then use

var clippingMask:BitmapData = offBitmapData(bitmapData, offset);
mouth.drawMask = clippingMask;

I hope it helps you.

PS: If you don’t understand any parts of the code, feel free to ask them.

Note: The offset can’t be negative. If you want a negative offset you’ll have to move all the other images.