ActionScript - Inaccurate Graphics?

Question

i'm attempting to draw a red stroke (1 thickness) around a rounded rectangle but the stroke is not lining up correctly around the rounded corners.

my rounded rectangle's corners have an ellipseWidth and ellipseHeight of 40. since they are equal i'm confident in assuming that the curvature of each corner begins at minus half of the corner size. so instead of drawing my stroke all the way to the corner i will end the stroke at 20 pixels before the corner and curve it to 20 pixels after the corner. clear as mud?

interestingly, if i draw my stroke all the way around the rounded rectangle following the same code, the stroke is only inaccurately drawn around these two corners. additionally, if the stroke is increased to 2, the gaps are no longer visible.

//Rounded Rectangle
var rectWidth:uint = 300;
var rectHeight:uint = 100;
var rectCorners:uint = 40;

var rect:Shape = new Shape();
rect.graphics.beginFill(0);
rect.graphics.drawRoundRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight, rectCorners, rectCorners);

//Stroke
var stroke:Shape = new Shape();
stroke.graphics.lineStyle(1, 0xFF0000, 1, true, "normal", "none", "miter", 3);

//Stroke Around Top Right Corner
stroke.graphics.moveTo(rect.x + rectWidth / 2 - rectCorners / 2, rect.y - rectHeight / 2);
stroke.graphics.curveTo(rect.x + rectWidth / 2, rect.y - rectHeight / 2, rect.x + rectWidth / 2, rect.y - rectHeight / 2 + rectCorners / 2);

//Stroke Around Bottom Right Corner  
stroke.graphics.lineTo(rect.x + rectWidth / 2, rect.y + rectHeight / 2 - rectCorners / 2);
stroke.graphics.curveTo(rect.x + rectWidth / 2, rect.y + rectHeight / 2, rect.x + rectWidth / 2 - rectCorners / 2, rect.y + rectHeight / 2);

//Add To Display List
addChild(rect);
addChild(stroke);

---

UPDATE

the larger the round rect and its corners become, the more displaced my stroke becomes. i am no longer confident that my curvature/anchor points for my curveTo() functions are correct. any thoughts?

Answer 1

Why don't you use drawRoundRect to draw the stroke? Or use the curving for fill? Or set stroke, set fill and THEN drawRoundRect?

---

Ok, then check this code:

        var rectWidth:Number = 300;
        var rectHeight:Number = 100;
        var rectCorners:Number = 40;

        var rectWidthS:Number = 300 - 1;
        var rectHeightS:Number = 100 - 1;
        var rectCornersS:Number = 40 - 1;

        var rect:Shape = new Shape();
        rect.graphics.beginFill(0);
        rect.graphics.drawRoundRect(0, 0, rectWidth, rectHeight, rectCorners, rectCorners);

        //Stroke
        var stroke:Shape = new Shape();
        stroke.graphics.lineStyle(1, 0xFF0000, 1, true, "normal", "none", "miter", 3);

        //Stroke Around Top Right Corner
        stroke.graphics.moveTo (rectWidthS - rectCornersS / 2, 0);
        stroke.graphics.curveTo(rectWidthS,                   0, rectWidthS, rectCornersS / 2);

        //Stroke Around Bottom Right Corner  
        stroke.graphics.lineTo (rectWidthS,                   rectHeightS - rectCornersS / 2);
        stroke.graphics.curveTo(rectWidthS, rectHeightS, rectWidthS - rectCornersS / 2, rectHeightS);

It's the problem with the funny way the width and height is calculated. Whenever you want to place something on the LAST pixel of some shape, you have to place it on a postion x + width - 1! I am not sure if it is perfect, but from what I can see it does seem to look promising.

---

I left rectWidthS and rectHeightS values untouched, but after modifying to rectCornersS = 40, it seems to work perfectly. Take a look http://img137.imageshack.us/img137/7779/58480490.png. Or I fail to see something. I understand though that it still might not be working perfectly with more complex shapes, but it should be feasible with enough work.