I am trying to create a spinning wheel with text on it. I have created the wheel and it is populating perfectly based on the colors that I supply to it. Now I am trying to add text to each of the parts of the wheel but am running into some problems. I cannot seem to get the text to display properly within each of the colors. I was hoping someone could help me get this to work properly. The place where I am trying to get the text to work is in the _drawSlice function. I am trying to figure out the logic to get it to work properly. Any help is appreciated. Here is my code:
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;
}
}
}
For simplicity's sake, I'm using embed fonts, but you can easily change that :) This is a quick solution based around your code, but the thinking was the same as explained earlier, I would favor creating a slice object with the text in the right position , then add the slice objects to form the wheel. Within your code I tried to replicate this, so I set a position for the textfield which is then added to a small container whose rotation is proportional to the numbers of slides. This can be improved but you should have enough elements to turn this into nicer code:
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;
}
}
}