createjs繪製扇形的方法

標籤：第一條   als   技術   inf   ros   move   pre   情況   UI   

扇形由三段線條組成，兩條直線和一條弧線，直線可以用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：

 1 function drawSector(mc, x, y, r, angle, startFrom, color) { 2      3     mc.graphics.clear();     4     mc.graphics.beginFill(color); 5     mc.graphics.moveTo(x, y); 6      7     angle = (Math.abs(angle) > 360) ? 360 : angle; 8     //為了使方法方便使用，這裡的起始角度和扇形弧度都用角度表示，由於三角函數用的弧度制，這裡先轉換為弧度。 9     startFrom = startFrom * Math.PI / 180;10     11     var x1=x+r * Math.cos(startFrom);12     var y1=y+r * Math.sin(startFrom);13     var endAngle=startFrom+angle*Math.PI/180;14     15     mc.graphics.lineTo(x1,y1);16     mc.graphics.arc(x,y,r,startFrom,endAngle,false);17     18     if (angle != 360) {19         mc.graphics.lineTo(x, y);20     }21     mc.graphics.endFill(); 22 }    

 

createjs繪製扇形的方法