Question

Please help to solve the geometric issue. I’m creating multiple sectors of the wheel. Now I need to be placed in every sector the text oriented from the center of the circle to the edge. But somehow, everything goes awry.

Here is the class of one sector:

package comps
{

    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.filters.GlowFilter;
    import flash.geom.Matrix;
    import flash.geom.Point;
    import flash.geom.Vector3D;
    import flash.net.URLRequest;
    import flash.text.AntiAliasType;
    import flash.text.Font;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;

    public class Sector extends Sprite
    {
        private var imageX1:Number;
        private var imageY1:Number;
        private var imageX2:Number;
        private var imageY2:Number;
        [Embed(source="font/SEGOEUIB.TTF", fontFamily="SegoeUI", mimeType="application/x-font", embedAsCFF="false", advancedAntiAliasing="true")]
        private var MoolEmbed:Class;

        public function Sector(tip:String, rot:Number, centerX:Number, centerY:Number, innerRadius:Number, outerRadius:Number, startAngle:Number, arcAngle:Number, val:Number, color:uint, alpha:Number, url:String, value:Number, steps:int=20)
        {
            Font.registerFont(MoolEmbed);

            var myArc:Sprite = new Sprite();
            myArc.graphics.lineStyle(2);
            myArc.graphics.beginFill(color, alpha);
            drawSolidArc (myArc,centerX, centerY, innerRadius, outerRadius, startAngle, arcAngle, url, steps);
            myArc.graphics.endFill();
            this.addChild(myArc);

                var myFormat:TextFormat = new TextFormat();
                myFormat.size = 20;
                myFormat.align = TextFormatAlign.CENTER;
                myFormat.font = 'SegoeUI';
                myFormat.bold = true;

                var myText:TextField = new TextField();
                myText.defaultTextFormat = myFormat;
                myText.setTextFormat(myFormat);
                myText.embedFonts = true;
                myText.antiAliasType = AntiAliasType.ADVANCED;
                myText.text = url;
                this.addChild(myText);

                myText.wordWrap = true;
                myText.width = outerRadius - innerRadius;
                myText.height = 20;
                var sectorsNum:Number = rot/360;
                textRotation(myText, rot*(sectorsNum-value) - rot*0.5, centerX, centerY);

                myText.x = imageX1 + 0 * (imageX2 - imageX1);
                myText.y = imageY1 + 0 * (imageY2 - imageY1);
                //trace (myText.x  + " " + myText.y);
                var myGlow:GlowFilter = new GlowFilter();
                myGlow.color = 0xFFFFFF; 
                myGlow.blurX = 20; 
                myGlow.blurY = 20; 
                myGlow.strength = 2;
                myText.filters = [myGlow];
            }
        }

        private function textRotation (target:TextField, angle:Number, centerX:Number, centerY:Number):void{
            var point:Point=new Point(centerX + target.width/2, centerY + target.height/2);

            var m:Matrix=target.transform.matrix;
            m.tx -= point.x;
            m.ty -= point.y;
            m.rotate (angle*(Math.PI/180));
            m.tx += point.x;
            m.ty += point.y;
            target.transform.matrix=m;
        }

        private function drawSolidArc (drawObj:Object, centerX:Number,centerY:Number,innerRadius:Number,outerRadius:Number,startAngle:Number,arcAngle:Number,url:String,steps:int=20):void {
            var twoPI:Number = 2 * Math.PI;
            var angleStep:Number = arcAngle/steps;
            var angle:Number, i:int, endAngle:Number;
            var xx:Number = centerX + Math.cos(startAngle * twoPI) * innerRadius;
            var yy:Number = centerY + Math.sin(startAngle * twoPI) * innerRadius;
            var xxInit:Number=xx;
            var yyInit:Number=yy;
            drawObj.graphics.moveTo(xx,yy);
            for(i=1; i<=steps; i++) {
                angle = (startAngle + i * angleStep) * twoPI;
                xx = centerX + Math.cos(angle) * innerRadius;
                yy = centerY + Math.sin(angle) * innerRadius;
                drawObj.graphics.lineTo(xx,yy);
                if (i==steps*0.5-1){
                    imageX1 = xx;
                    imageY1 = yy;
                }
            }
            endAngle = startAngle + arcAngle;
            for(i=0;i<=steps;i++) {
                angle = (endAngle - i * angleStep) * twoPI;
                xx = centerX + Math.cos(angle) * outerRadius;
                yy = centerY + Math.sin(angle) * outerRadius;
                drawObj.graphics.lineTo(xx,yy);
                if (i==steps*0.5){
                    imageX2 = xx;
                    imageY2 = yy;
                }
            }
            drawObj.graphics.lineTo(xxInit,yyInit);
        }
    }
}

And that’s creating all the wheel:

sectorsNum = tarotAC.length;
                for (var i:int = 0; i < sectorsNum; i++){
                    var arcAngle:Number = - 1/sectorsNum;
                    var startAngle:Number = arcAngle*i;
                    var arc:Sector = new Sector(FlexGlobals.topLevelApplication.mode, 360/sectorsNum, 0, 0, stageW*0.1, stageW*0.5, startAngle, arcAngle, Number(sectorsNum - i), tarotAC.getItemAt(i).color, 1, tarotAC.getItemAt(i).datas, tarotAC.getItemAt(i).url);

                    con.addChild(arc);
                }

Answer 1

By looking at it, I would say your TextFields need to be moved up by their height. TextFields are created from the top and the coordinates you give them would fit better with the baseline. Maybe you could put your TextField in a Sprite, set the TextField’s y to -height and then manipulate the container instead of the text itself:

var container:Sprite = new Sprite();
container.addChild(myText);
this.addChild(container);
myText.y = -myText.height;
textRotation(container, rot*(sectorsNum-value) - rot*0.5, centerX, centerY);
//you should of course modify textRotation's first parameter type
container.x = imageX1 + 0 * (imageX2 - imageX1);
container.y = imageY1 + 0 * (imageY2 - imageY1);