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

為簡單起見，我使用的是嵌入字體，但是您可以輕松地更改它：)這是基於您的代碼的快速解決方案，但是思路與前面所述的相同，因此我希望在文本中創建一個slice對象正確的位置，然后添加切片對象以形成輪子。 在您的代碼中，我嘗試復制此代碼，因此我為文本字段設置了一個位置，然后將其添加到一個小容器中，該容器的旋轉與幻燈片的數量成正比。 這可以改進，但是您應該有足夠的元素將其轉換為更好的代碼：

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;
}
   }

}