Scale9Grid and Bitmaps - do they work together or not?

Question

I'm not used to the Flash IDE yet, so I'm writing clean code in FlashDevelop. I got a sprite from various graphical assets, one of which was intended for use with this extremely useful scale9Grid function ... It didn’t work. Since I did this for the first time in my life, I thought I screwed something, but then I tried drawRoundRect and beginFill (and not startBitmapFill), and it worked as expected. My logical thought was that it does not work with bitmaps (despite the fact that in the Adobe Livedocs example they use the orangoutang image to demonstrate the capabilities of scale9Grid).

After that, I read a lot of opinions, starting with "it works fine" and ending with the words "it does not work, unscrew Adobe." So now I wonder if it works or not?

I found how I can specify scale9Grid parameters directly in the Embed expression, but my inline image is a sprite. I guess it won’t work anyway, right?

Answer 1

I hit my head on the scale grid until I found an article. A scale grid has many limitations if they do not match it. If you can't get around them, here is a 9-bit approach: ScaleObject .

Answer 2

[Embed] , scale9Grid .

scale9Grid API ( Graphics), Bitmaps. Shape Sprite:

shape.graphics.beginBitmapFill(bitmapData);

, , :

var rect:Rectangle = new Rectangle(20, 20, 60, 10);
var gridX:Array = [rect.left, rect.right, bitmapData.width];
var gridY:Array = [rect.top, rect.bottom, bitmapData.height];

shape.graphics.clear();

var left:Number = 0;
for (var i:int = 0; i < 3; i++) {
    var top:Number = 0;
    for (var j:int = 0; j < 3; j++) {
        shape.graphics.beginBitmapFill(bitmapData);
        shape.graphics.drawRect(left, top, gridX[i] - left, gridY[j] - top);
        shape.graphics.endFill();
        top = gridY[j];
    }
    left = gridX[i];
}
shape.scale9Grid = rect;

endFill() . , , scale9Grid, - .

Answer 3

scale9Grid, . , .

http://www.dreaminginflash.com/2007/12/03/9-slice-and-bitmap/

UPDATE:

On understanding scaling. Look at this image. If necessary, red will scale.

Answer 4

Good piece, Tyler Wright !

Some optimization:

static public function drawAndScale9Grid(s : Shape, bitmapData : BitmapData, rect : Rectangle) : void {
    const gridX : Vector.<Number> = Vector.<Number>([rect.left, rect.right, bitmapData.width]);
    const gridY : Vector.<Number> = Vector.<Number>([rect.top, rect.bottom, bitmapData.height]);

    const g : Graphics = s.graphics;
        g.clear();

    var left : Number = 0;
    var i : int, j : int;
    const n : uint = gridX.length, m : uint = gridY.length;
    while(i < n) {  
        j = 0; // reset j
        var top : Number = 0;
        while(j < m) {
            // draw shape with special coords of bitmapdata
            g.beginBitmapFill(bitmapData);
            g.drawRect(left, top, gridX[i] - left, gridY[j] - top);
            g.endFill();

            top = gridY[j];

            j++;
        }
        left = gridX[i];

        i++;
    }
    s.scale9Grid = rect;
}