Drawing using curveTo

Question

The task is to draw custom shape using curveTo graphics method.

The problem is that paths joins are not exact.

Result is:

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            // TODO Auto-generated method stub

            test.graphics.clear();
            test.graphics.lineStyle(1);
            drawBorder(test.graphics, 200, 200);
        }

        private function drawBorder(g: Graphics, width: Number, height: Number): void
        {
            var cornerRadius: int = 20;
            var pointerWidth: int = 4;
            var pointerHeight: int = 10;
            var pointerBottomGap: int = 6;

            width -= pointerWidth;

            g.moveTo(0, height - cornerRadius);
            g.lineTo(0, cornerRadius + 1);
            g.curveTo(0, 0, cornerRadius, 0);
            g.lineTo(width - cornerRadius, 0);
            g.curveTo(width, 0, width, cornerRadius);
            var pointerY: int = height - pointerHeight - pointerBottomGap;
            g.lineTo(width, pointerY);
            g.lineTo(width + pointerWidth, pointerY + pointerHeight);
            g.lineTo(width - pointerWidth, pointerY + pointerHeight + 1);
            g.curveTo(width - pointerWidth, height, width - cornerRadius, height);
            g.lineTo(cornerRadius, height);
            g.curveTo(0, height, 0, height - cornerRadius);
        }

    ]]>
</fx:Script>

<mx:UIComponent 
    id="test"
    x="100" y="100"/>

The question could be rephrased - How to draw rect with corner radius using curveTo method?

Answer 1

Increasing the thickness of the line stroke weight will help; as well, try specifying caps and joint:

import flash.display.CapsStyle;
import flash.display.JointStyle;
import flash.display.LineScaleMode;

graphics.lineStyle(2,
                   0x0,
                   1.0,
                   true,
                   LineScaleMode.NORMAL,
                   CapsStyle.SQUARE,
                   JointStyle.MITER);

drawBorder(graphics, 200, 200);

Answer 2

If you're referring to the odd anti-aliasing, try turning on pixel hinting:

targetSprite.graphics.lineStyle(1.0, 0x000000, 1.0, true);