createjs繪制扇形的方法

扇形由三段線條組成，兩條直線和一條弧線，直線可以用createjs中的lineTo函數畫出，弧線用Graphics.arc函數來畫。

一、關於createjs中的Graphics.Arc API

Graphics.Arc用來畫一條弧線，函數簽名如下：

Graphics.Arc(x, y,半徑,開始的弧度a,結束的弧度b,逆時針方向的)

默認情況下開始的角度和結束的角度指從x軸方向開始逆時針旋轉的弧度（弧度取值為0~2π），最后一個參數決定是按逆時針還是順時針旋轉（默認為true，即按逆時針方向）。本實例按順時針編程，如下圖：

 

 

二、已知圓心、半徑、起始角度和弧度畫扇形的方法

 

如上圖，扇形由三條線段組成（兩條直線和一條弧線），畫第一條線段時，需要知道a點的位置，由於已知圓心（x，y）、起始角度（startFrom）和半徑r，根據三角函數，a點很容易求出，即：

//為了使方法方便使用，這里的起始角度和扇形弧度參數都用角度表示，由於三角函數用的弧度制，這里先轉換為弧度。
startFrom = startFrom * Math.PI / 180;
	
var x1=x+r * Math.cos(startFrom);
var y1=y+r * Math.sin(startFrom);

畫弧線時,根據以上Graphic.Arc 參數可知需要先算出結束角度，用起始角度+扇形弧度即可：

var endAngle=startFrom+angle*Math.PI/180;

最后，再將線段畫回至圓心即可。代碼如下，這里加入了填充顏色的參數color：

function drawSector(mc, x, y, r, angle, startFrom, color) {
    
    mc.graphics.clear();    
    mc.graphics.beginFill(color);
    mc.graphics.moveTo(x, y);
    
    angle = (Math.abs(angle) > 360) ? 360 : angle;
    //為了使方法方便使用，這里的起始角度和扇形弧度都用角度表示，由於三角函數用的弧度制，這里先轉換為弧度。
    startFrom = startFrom * Math.PI / 180;
    
    var x1=x+r * Math.cos(startFrom);
    var y1=y+r * Math.sin(startFrom);
    var endAngle=startFrom+angle*Math.PI/180;
    
    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(); 
}