I had a little trouble with the slice9Grid applied to shapes created with the Drawing API. I thought I would share in the hopes of saving other people from the frustration.

The real problem is really with the Drawing API and strokes. Perhaps this should have been obvious to others but I assumed that when I created a shape - say a rectangle - that went from (0, 0) in the top corner to say (100, 200) in the bottom corner then I would have a rectangle that was 100×200 pixels. Not quit, the stroke gets applied to the outside so the diminsions need to take that into account.

(This really is obvious when I think about how the rectangle tool draws on the stage but I just didn’t think about it until I’d spent an hour with the frakking code.)

Here’s some sample code:

var rect:MovieClip = this.createEmptyMovieClip(”rectangle_mc”, 1);

rect.lineStyle(2, 0xFF0000, 100, true, “none”);
rect.moveTo(0, 0);
rect.lineTo(0, 200);
rect.lineTo(100, 200);
rect.lineTo(100, 0);
rect.lineTo(0, 0);

trace(rect._x); // output: 0
trace(rect._y); // output: 0;

trace(rect._width); // output: 104;
trace(rect._height); // output: 204;

The good news is that the top corner stays at (0, 0). It would really suck if it moved to (-2, -2) because of a stroke that was 2 pixels thick.

I was using lineTo and curveTo to draw a rectangle with round corners and then applying the slice9Grid to it. It would seem that if my corners were say 8 pix then my grid would like like this:

var grid:Rectangle = new Rectangle(8, 8, rect._width - 16, rect._height - 16);

So when I did this and then stretched out my rectangle the corners got all Flash7 on me.

I wish there was a way to visualize the grid with Actionscript like there is if you create a MovieClip on the stage.

So here’s the essential code that works.

var stroke:Number = 2;
var corner:Number = 8;

var grid:Rectangle = new Rectangle(corner stroke, corner stroke, rect._width - (corner*2) - (stroke*2), rect._height - (corner*2) - (stroke*2) );

I’ll post the code for my RoundRect in the next blog entry.