I created a function to draw a rectangle with rounded corners, in an app I'm building that needs to be able to draw a keyboard layout.

private function drawKey():Void{ var kw:Number = keyWidth; // 40 var kh:Number = keyHeight; // 27 var kr:Number = keyRadius; // 2 var kt:Number = kw-kr; var ks:Number = kh-kr; keymc = this.createEmptyMovieClip("keybg_mc", 100); with (keymc){ lineStyle(1, 0x000000); beginFill(0xffffff); moveTo(0, kr); curveTo(0,kr,kr,0); lineTo(kt, 0); curveTo(kt,0,kw,kr); lineTo(kw,ks); curveTo(kw,ks,kt,kh); lineTo(kr,kh); curveTo(kr,kh,0,ks); lineTo(0,kr); endFill(); } };

This works fine, but the problem is, if I include a line on the shape, the corners of the outline don't match - by which I mean they appear to be of different radiuses. If I don't include a line on the shape, it turns out perfectly uniform, but the line seems to be behaving different in each corner:

(here's a screencap of each (with and without the outline) - magnified to 500%)

As you can see, the top left and bottom right corners of the outline version are of a different radius, and different from the other two corners. It's not a huge difference, but it's noticeable and throws off the look of a symmetrical rectangle with all corners the same.

I've tried adjusting the line width (from hairline to much thicker). At much thicker widths, it's less of a problem, but that doesn't work with the design.

Is there any way to fix this?

are you on whole pixels? Two squares?

If I trace the x/y pos of the clips and their parent, they're all on whole pixels.

Two squares?

one smaller on top of the other, the larger one is border. could try converting border to a fill creating at design time and using 9 slice scaling?

Gotcha.

Yeah, I thought briefly about doing two squares stacked, to achieve the look of the line, but the main background of the rectangle needs to be able to be semi-transparent, so that would complicate layering it above a larger rectangle to fake the border...

I've never played with the 9-slice scaling, but it seems like that might have to be the solution if I can't get these AS-created corners to be uniform...

Thanks for the input. I appreciate it.

There were a few problems. First your anchor point was matching your start points, which is going to look different in every corner since the trajectory is weighted from a different edge in each corner. Your corners were actually offset angles.

Also, you need to turn stroke hinting on. linestyle includes stroke hinting.

This works:

var kw:Number = 50; // 40

var kh:Number = 30; // 27

var kr:Number = 4; // 2



keymc = this.createEmptyMovieClip("keybg_mc", 0);

with (keymc){

    lineStyle(1, 0x000000,100,true,true,"round","round",1);

    beginFill(0xffffff);

    moveTo(0, kr);

    curveTo(0,0,kr,0);

    lineTo(kw-kr, 0);

    curveTo(kw,0,kw,kr);

    lineTo(kw,kh-kr);

    curveTo(kw,kh,kw-kr,kh);

    lineTo(kr,kh);

    curveTo(0,kh,0,kh-kr);

    lineTo(0,kr);

    endFill();

}

keymc._x=30; keymc._y=30;

For true pixel perfection you should be doing left left, right right, not clockwise. but shrug, the difference at this point is pretty moot.

For the real deal, your corners should really contain two curveTo calls in each using Quadratic Bezier curves.

Very much appreciated Persist.

I love learning something new

linestyle corners and curveTo is some of of the tricker ones.

9 slice is awesome too, but I think at the tiny pixel size you're looking for, it might be a little overkill.