determine how much space is left on a drawing application

Question

I have a drawing application like http://www.flashperfection.com/tutorials/Mouse-Drawing-in-AS3-96618.html where the user can select a brush size to draw. I need a way to determine that all the surface has been drawn. Any code or ideas on how to accomplish that?

Answer 1

My idea would be to do this by using a pixel-level collision detection. There are some open-source frameworks for this (try http://www.coreyoneil.com/Flash/CDK/documentation/), which returns a percentage of coverage. You can compare the drawn lines with the whole surface, and check if there is full coverage.

You would have to check the documentation for a complete script, but this would be my way to go.

Answer 2

A thing that comes to mind, is look for white pixels in the image assuming your background(blank canvas) is white.

something like:

function getWhiteRatio(bitmapData:BitmapData,rect:Rectangle):Number{
    var numPixels:int = rect.width * rect.height;
    var white:int = 0;
    var pixels:Vector.<uint> = bitmapData.getVector(rect);
    for(var i:int = 0 ; i < numPixels; i++){
        if(pixels[i] == 4294967295) white++;
    }
    return white/numPixels;
}

This function would return the a ratio of white pixels (number of white pixels in relation to the total number of pixels inside an image). If the ratio is close to 1, your pixels are mostly white, therefore you've got a clear canvas.

You might need to make a BitmapData copy of your vector(drawing API generated) canvas using the draw() method every now and then and check for a full canvas.

If you have a custom background(not a single colour), then you would need a slightly different approach:

1. You would have a bitmapData made by drawing 2 bitmaps(original canvas and current canvas) with BlendMode.DIFFERENCE.
2. Count the black pixels in the difference bitmap. If the pixels are all black, there is no difference. The less black pixels there are, the more stuff your have on the canvas.

HTH, George