Flash as3旋轉輪

Question

我正在試圖創建一個帶有文本的旋轉輪。我已經創建了輪子，並基於我提供給它的顏色完美填充。現在我正在嘗試向每個輪子的部分添加文本，但遇到了一些問題。我似乎無法讓文字在每種顏色中正確顯示。我希望有人能幫助我正確地工作。我試圖讓文本起作用的地方在_drawSlice函數中。我試圖找出讓它正常工作的邏輯。任何幫助表示讚賞。這裏是我的代碼：

package { 
import flash.display.MovieClip; 
import flash.display.Sprite; 
import flash.text.TextFormat; 
import flash.text.TextField; 
import flash.display.BitmapData; 
import flash.display.Bitmap; 

public class PieChart extends MovieClip{ 
    //settings 
    private var _radius:Number = new Number(100); 

    //storage 
    private var slices:Array = new Array(); 
    private var _startAngle:Number = new Number(0); 

    public function PieChart() { 
     this._setup(_radius); 

     for(var i:int=0;i<2;i++){ 
      this.addSlice(0xCF5351,'Maroon'); //maroon 
      this.addSlice(0x3DA261,'Green'); //green 
      this.addSlice(0x4485C3,'Blue'); //blue 
      this.addSlice(0xF8F66D,'Yellow'); //yellow 
      this.addSlice(0x9D499B,'Purple'); //purple 
      this.addSlice(0xF99F44,'Orange'); //orange 
     } 
     this.x = 150; 
     this.y = 150; 
     this.draw(); 
    } 

    public function addSlice(color:Number,text:String):void { 
     var slice:Array = ["slice"+slices.length,color,text]; 
     slices.push(slice); 
    } 

    public function draw():void { 
     var angle:Number=((100/slices.length)*360)/100; 

     for(var i:int=0;i<slices.length;i++){ 
      this._drawSlice(_radius,_startAngle,slices[i][1],1,angle,slices[i][2]);       
      _startAngle-=angle; 
     } 
    } 

    private function _drawSlice(radius:Number,angle:Number,color:Number,alpha:Number,arc:Number,txt:String):void { 
     var sprite:Sprite = new Sprite(); 

     sprite.graphics.beginFill(color,alpha); 

     //setup the variables 
     var segAngle:Number, theta:Number, angle:Number, angleMid:Number, segs:Number, ax:Number, ay:Number, bx:Number, by:Number, cx:Number, cy:Number; 

     //start at point 0,0 
     sprite.graphics.moveTo(0, 0); 
     //get the number of segments 
     segs = Math.ceil(Math.abs(arc)/45); 
     // Now calculate the sweep of each segment. 
     segAngle = arc/segs; 
     // The math requires radians rather than degrees. To convert from degrees 
     // use the formula (degrees/180)*Math.PI to get radians. 
     theta = -(segAngle/180)*Math.PI; 
     // convert angle _startAngle to radians 
     angle = -(_startAngle/180)*Math.PI; 
     // draw the curve in segments no larger than 45 degrees. 
     if (segs>0) { 
      // draw a line from the center to the start of the curve 
      ax = Math.cos(_startAngle/180*Math.PI)*radius; 
      ay = Math.sin(-_startAngle/180*Math.PI)*radius; 
      sprite.graphics.lineTo(ax, ay); 

      // Loop for drawing curve segments 
      for (var i:int = 0; i<segs; i++) { 
       angle += theta; 
       angleMid = angle-(theta/2); 
       bx = Math.cos(angle)*radius; 
       by = Math.sin(angle)*radius; 
       cx = Math.cos(angleMid)*(radius/Math.cos(theta/2)); 
       cy = Math.sin(angleMid)*(radius/Math.cos(theta/2)); 
       sprite.graphics.curveTo(cx, cy, bx, by); 
      } 

      // close the wedge by drawing a line to the center 
      sprite.graphics.lineTo(0, 0); 
     } 

     var txtFormat:TextFormat = new TextFormat(); 
     txtFormat.color = 0xFFFFFF; 
     txtFormat.size = 16; 

     var txtField:TextField = new TextField; 
     txtField.text = txt; 
     txtField.setTextFormat(txtFormat); 

     var bmpData:BitmapData = new BitmapData(sprite.width,sprite.height,true,0x000000); 
     bmpData.draw(txtField); 

     var bmp:Bitmap = new Bitmap(bmpData,"auto",true); 
     bmp.rotation = (_startAngle*-1)-20; 
     bmp.y -= 20; 

     sprite.addChild(bmp); 
     this.addChild(sprite); 
    } 

    private function _setup(radius:Number):void { 
     this._radius = radius; 
    } 

} 

}

Answer 1

爲了簡便起見，我使用嵌入字體，但你可以很容易地改變:)這是基於你的代碼快速的解決方案，但想法是與前面解釋的一樣，我希望創建一個切片對象，並將文本放在正確的位置，然後添加切片對象以形成輪子。在你的代碼中，我嘗試複製這個，所以我爲textfield設置了一個位置，然後將它添加到一個小的容器中，該容器的旋轉與幻燈片的數量成正比。這可以改善，但你應該有足夠的元素把它變成更好代碼：

package { 
import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.display.MovieClip; 
import flash.display.Sprite; 
import flash.text.TextField; 
import flash.text.TextFormat; 

public class PieChart extends MovieClip{ 
//settings 
private var _radius:Number = new Number(100); 


[Embed(source="fonts/Arial.ttf", 
    fontName="PCArial", 
    mimeType="application/x-font-truetype", 
    embedAsCFF= "false")] 
public var PCArial:Class; 

//storage 
private var slices:Array = new Array(); 
private var _startAngle:Number = new Number(0); 

public function PieChart() { 
    this._setup(_radius); 

    for(var i:int=0;i<2;i++){ 
     this.addSlice(0xCF5351,'Maroon'); //maroon 
     this.addSlice(0x3DA261,'Green'); //green 
     this.addSlice(0x4485C3,'Blue'); //blue 
     this.addSlice(0xF8F66D,'Yellow'); //yellow 
     this.addSlice(0x9D499B,'Purple'); //purple 
     this.addSlice(0xF99F44,'Orange'); //orange 
    } 
    this.x = 150; 
    this.y = 150; 
    this.draw(); 
} 

public function addSlice(color:Number,text:String):void { 
    var slice:Array = ["slice"+slices.length,color,text]; 
    slices.push(slice); 
} 

public function draw():void { 
    var angle:Number=((100/slices.length)*360)/100; 

    for(var i:int=0;i< slices.length;i++){ 
     this._drawSlice(_radius,_startAngle,slices[i][1],1,angle,slices[i][2] , i);       
     _startAngle-=angle; 
    } 
} 

private function _drawSlice(radius:Number,angle:Number,color:Number,alpha:Number,arc:Number,txt:String , j:int):void { 
    var sprite:Sprite = new Sprite(); 

    sprite.graphics.beginFill(color,alpha); 

    //setup the variables 
    var segAngle:Number, theta:Number, angle:Number, angleMid:Number, segs:Number, ax:Number, ay:Number, bx:Number, by:Number, cx:Number, cy:Number; 

    //start at point 0,0 
    sprite.graphics.moveTo(0, 0); 
    //get the number of segments 
    segs = Math.ceil(Math.abs(arc)/45); 
    // Now calculate the sweep of each segment. 
    segAngle = arc/segs; 
    // The math requires radians rather than degrees. To convert from degrees 
    // use the formula (degrees/180)*Math.PI to get radians. 
    theta = -(segAngle/180)*Math.PI; 
    // convert angle _startAngle to radians 
    angle = -(_startAngle/180)*Math.PI; 
    // draw the curve in segments no larger than 45 degrees. 
    if (segs>0) { 
     // draw a line from the center to the start of the curve 
     ax = Math.cos(_startAngle/180*Math.PI)*radius; 
     ay = Math.sin(-_startAngle/180*Math.PI)*radius; 
     sprite.graphics.lineTo(ax, ay); 

     // Loop for drawing curve segments 
     for (var i:int = 0; i<segs; i++) { 
      angle += theta; 
      angleMid = angle-(theta/2); 
      bx = Math.cos(angle)*radius; 
      by = Math.sin(angle)*radius; 
      cx = Math.cos(angleMid)*(radius/Math.cos(theta/2)); 
      cy = Math.sin(angleMid)*(radius/Math.cos(theta/2)); 
      sprite.graphics.curveTo(cx, cy, bx, by); 
     } 

     // close the wedge by drawing a line to the center 
     sprite.graphics.lineTo(0, 0); 
    } 

    var txtFormat:TextFormat = new TextFormat("PCArial"); 
    txtFormat.color = 0xFFFFFF; 
    txtFormat.size = 16; 

    var txtField:TextField = new TextField; 
    txtField.text = txt; 
    txtField.x = 30; 
    txtField.y = -18; 
    txtField.rotation = -18 ; 
    txtField.embedFonts = true; 
    txtField.setTextFormat(txtFormat); 

    var txtSprite:Sprite = new Sprite(); 

    txtSprite.rotation = (360/slices.length * j); 
    txtSprite.addChild(txtField); 

    sprite.addChild(txtSprite); 
    this.addChild(sprite); 
} 

private function _setup(radius:Number):void { 
    this._radius = radius; 
} 
    } 

}