How to cut a Shape out of BitmapData?

Question

I have a filled Shape, and a BitmapData that is the same width and height as the Shape's bounding box.
I need to cut the Shape from the BitmapData (basically draw the BitmapData onto the shape...) [like so: https://i.stack.imgur.com/VhdAm.png]

I use the rather hackish method of:

        public static function cutPoly(img:BitmapData, s:Shape, bounds:Bounds):BitmapData {
        var temp:BitmapData = new BitmapData(bounds.width, bounds.height, true);
        Main.inst.stageQuality("low"); //hack to kill anti-aliasing
        temp.draw(s,new Matrix());
        Main.inst.stageQuality("high"); // end hack

        //0xFF00FF00 is the color of the shape
        makeColTrans(temp,0xFF00FF00); //makes the color transparent :P
        //return temp;
        img.draw(temp);
        //img.draw(temp);
        temp.dispose();
        makeColTrans(img, 0xFFFFFFFF);
        return img;
    }

I was wondering if there is a better method...one that isn't just a hack.

erkmene · Accepted Answer · 2010-12-06T22:18:08.257

It can also be considered hack but you can add the bitmap and the (drawn) shape in a container sprite, mask the bitmap with the shape and draw the resulting image again. The only benefit you'd gain would be using the runtime's native drawing algorithms and that is only the case if your makeColTrans scans the whole bitmap pixel by pixel.

edited for code sample:

    public static function cutPoly(sourceBitmapData:BitmapData, maskShape:Shape, bounds:Rectangle):BitmapData {
        // you might not need this, supplying just the sourceBitmap to finalBitmapData.draw(), it should be tested though.
        var sourceBitmapContainer:Sprite = new Sprite();
        sourceBitmapContainer.addChild(sourceBitmap);
        sourceBitmapContainer.addChild(maskShape);

        var sourceBitmap:Bitmap = new Bitmap(sourceBitmapData);
        maskShape.x = bounds.x;
        maskShape.y = bounds.y;
        sourceBitmap.mask = maskShape;

        var finalBitmapData:BitmapData = new BitmapData(bounds.width, bounds.height, true, 0x00ffffff);
        // or var finalBitmapData:Bitmap = new BitmapData(maskShape.width, maskShape.height); not too sure about the contents of the bounds...
        finalBitmapData.draw(sourceBitmapContainer);

        return finalBitmapData;
    }

Nah, the makeColTrans uses BitmapData.threshold :P. I don't exactly understand what you mean though...can you give a small snippet of code? — Eli Lipsitz, Dec 05 '10 at 22:51
sorry for the late answer, please check the sample code above. Although not tested for this particular code, I used a similar method for carving out the pieces of a puzzle from an image. It was done only once and was quite fast for about thousand pieces. — erkmene, Dec 06 '10 at 22:22

score 1 · Answer 2 · answered Dec 05 '10 at 23:56

1

the second argument of the draw() method takes a transform matrix - you can specify offsets, rotation, skew, etc here. then use that bitmapdata object as the source of beginBitmapFill on the shape.

answered Dec 05 '10 at 23:56

momo

3,885
4
33
54

lithium.snepo · Answer 3 · 2010-12-23T02:05:16.840

Is the colour around the shape consistent? If so, you could find the first instance of that coloured pixel and floodFill() the bitmapdata with 0x00000000 from that coordinate, and then draw the result to a new transparent bitmapdata.

edit

Here's another example using thresholds. It's far from perfect, but it does get you part of the way there. In this case, the class "Tile" is just the image you provided in your question with a linkage ID.

import flash.display.BitmapData;
import flash.geom.Point;
import flash.display.Bitmap;

var sample : Tile = new Tile();

var alphaBitmap : BitmapData = new BitmapData ( sample.width, sample.height, true, 0x00000000 );
    alphaBitmap .draw ( sample );
    alphaBitmap.threshold( alphaBitmap, alphaBitmap.rect, new Point(), "<", 0xFFEFEFEF, 0xFFFFFFFF, 0xFFFFFFFF );
    alphaBitmap.threshold( alphaBitmap, alphaBitmap.rect, new Point(), "!=", 0xFFFFFFFF, 0x00000000 );

    addChild ( new Bitmap ( alphaBitmap ) );

var source : Tile = new Tile();
var output : BitmapData = new BitmapData ( sample.width, sample.height, true, 0x00000000 );
    output.copyPixels( source, source.rect, new Point(), alphaBitmap );

var outputBitmap : Bitmap = new Bitmap ( output );
    outputBitmap.x = outputBitmap.width;

addChild ( outputBitmap );

score 0 · Answer 4 · answered Feb 25 '11 at 18:01

If you're looking to do this "cookie-cut" algorithm mostly just out of BitmapData objects, consider this:

var bmp:BitmapData = pSourceBmp.clone();
var alphaBmp:BitmapData = new BitmapData(shape.width, shape.height, true, 0);

alphaBmp.draw( shape );

var alphaOrigin:Point = new Point();
var pasteOrigin:Point = new Point();

bmp.copyPixels( bmp, bmp.rect, pasteOrigin, alphaBmp, alphaOrigin, true);

NOTE: This code is not tested.

I've used something like this in a Blitting engine for "cookie-cutting" purpose, and it worked beautifully to extract shapes out of any given vector graphics. Interesting alternative to Masks.

How to cut a Shape out of BitmapData?

4 Answers4