Createjs how to draw a fan

The sector consists of three lines, two lines and an arc, and the line can be drawn with the LineTo function in Createjs, and the arc is drawn with the GRAPHICS.ARC function.

first, about the Graphics.arc API in Createjs

Graphics.arc is used to draw an arc, the function signature is as follows:

Graphics.Arc(x, y,半径,开始的弧度a,结束的弧度b,逆时针方向的)

By default, the angle and end angle of the start point is the Radian (with a value of 0~2π) that rotates counterclockwise from the x-axis, and the last parameter determines whether to rotate counterclockwise or clockwise (by default, True, counterclockwise). This example is programmed in clockwise order, such as:

Two, the known center, RADIUS, starting angle and radians to draw a fan-shaped method

For example, the sector consists of three line segments (two straight lines and an arc), when you draw the first line segment, you need to know the position of point A, due to the known center (x, y), starting angle (Startfrom) and radius r, according to the trigonometric functions, a point is easy to find out, namely:

In order to make the method convenient to use, here the starting angle and the sector radian parameters are represented by angle, because trigonometric functions with the radian system, here first converted to radians. Startfrom = Startfrom * Math.pi/180;var x1=x+r * Math.Cos (Startfrom); var y1=y+r * Math.sin (Startfrom);

When drawing an arc, according to the above Graphic.arc parameters we need to calculate the end angle, with the starting angle + sector Radian can:

var endangle=startfrom+angle*math.pi/180;

Finally, draw the segment back to the center of the circle. Here's the code, which adds the color of the fill parameter:

1 functionDrawsector (MC, X, Y, R, Angle, Startfrom, color) {2     3 mc.graphics.clear (); 4 Mc.graphics.beginFill (color);5 mc.graphics.moveTo (x, y);6     7Angle = (Math.Abs (angle) > 360)? 360: angle;8     //in order to make the method convenient to use, here the starting angle and the sector arc are represented by angle, because trigonometric functions with the radian system, here first converted to radians. 9Startfrom = Startfrom * math.pi/180;Ten      One     varX1=x+r *Math.Cos (startfrom); A     varY1=y+r *Math.sin (startfrom); -     varendangle=startfrom+angle*math.pi/180; -      the Mc.graphics.lineTo (x1,y1); -Mc.graphics.arc (X,y,r,startfrom,endangle,false); -      -     if(Angle! = 360) { + mc.graphics.lineTo (x, y); -     } + Mc.graphics.endFill (); A}

Createjs how to draw a fan