Drawing part of a perfect circle using a curve

I need to draw part of a perfect circle using graphics.curveTo(I have a radius and an angle that I want to draw), but I cannot figure out the exact formula for cotorol x & y to make the curve perfect

I know how to do this with a loop and many lineTo, but this is not enough for my needs ...

early!

+3
source share
3 answers

I use this function to draw circle segments (I think I ported it from the AS2 online example on how to draw full circles long ago):

    /**
     * Draw a segment of a circle
     * @param graphics      the graphics object to draw into
     * @param center        the center of the circle
     * @param start         start angle (radians)
     * @param end           end angle (radians)
     * @param r             radius of the circle
     * @param h_ratio       horizontal scaling factor
     * @param v_ratio       vertical scaling factor
     * @param new_drawing   if true, uses a moveTo call to start drawing at the start point of the circle; else continues drawing using only lineTo and curveTo
     * 
     */
    public static function drawCircleSegment(graphics:Graphics, center:Point, start:Number, end:Number, r:Number, h_ratio:Number=1, v_ratio:Number=1, new_drawing:Boolean=true):void
    {
        var x:Number = center.x;
        var y:Number = center.y;
        // first point of the circle segment
        if(new_drawing)
        {
            graphics.moveTo(x+Math.cos(start)*r*h_ratio, y+Math.sin(start)*r*v_ratio);
        }

        // draw the circle in segments
        var segments:uint = 8;

        var theta:Number = (end-start)/segments; 
        var angle:Number = start; // start drawing at angle ...

        var ctrlRadius:Number = r/Math.cos(theta/2); // this gets the radius of the control point
        for (var i:int = 0; i<segments; i++) {
             // increment the angle
             angle += theta;
             var angleMid:Number = angle-(theta/2);
             // calculate our control point
             var cx:Number = x+Math.cos(angleMid)*(ctrlRadius*h_ratio);
             var cy:Number = y+Math.sin(angleMid)*(ctrlRadius*v_ratio);
             // calculate our end point
             var px:Number = x+Math.cos(angle)*r*h_ratio;
             var py:Number = y+Math.sin(angle)*r*v_ratio;
             // draw the circle segment
             graphics.curveTo(cx, cy, px, py);
        }

    }

I think he is close enough to perfect circles. I really don't understand the math inside, but I hope the options are clear enough for you.

+7

( ) , .

API Flash Player 11/AIR 3, cubCurveTo(), , , , .

+3

You cannot draw a perfect circle with bezier curves. You only bring it closer. See http://cgafaq.info/wiki / BΓ©zier_circle_approximation.

+1
source

All Articles