周围的圆的中心沿半径文本 [英] The text around the center of the circle along the radius

查看:105
本文介绍了周围的圆的中心沿半径文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

请帮忙解决几何问题。我创建了车轮的多个部门。现在我需要被放置在每一个部门从圆到边缘的中心导向的文本。但不知何故,一切都被打乱。

下面是这个类的一个扇区的:

 包谱曲
{

    进口flash.display.Shape;
    进口flash.display.Sprite;
    进口flash.filters.GlowFilter;
    进口flash.geom.Matrix;
    进口flash.geom.Point;
    进口flash.geom.Vector3D;
    进口flash.net.URLRequest;
    进口在flash.text.AntiAlias​​Type;
    进口flash.text.Font;
    进口API元素flash.text.TextField;
    进口flash.text.TextFormat用于;
    进口使用flash.text.TextFormatAlign;

    公共类行业扩展Sprite
    {
        私人VAR imageX1:数字;
        私人VAR imageY1:数字;
        私人VAR imageX2:数字;
        私人VAR imageY2:数字;
        [嵌入(来源=字体/ SEGOEUIB.TTF,fontFamily中=SegoeUI,MIMETYPE =应用程序/ x-字体,embedAsCFF =假,advancedAntiAlias​​ing =真)
        私人VAR MoolEmbed:类;

        公共职能部门(提示:字符串,腐:号码,的centerX:号码,centerY:号码,innerRadius:号码,outerRadius:数量,由startAngle:号码,arcAngle:号码,VAL:数量,颜色:UINT,阿尔法:数量,网址:字符串值:编号,步骤:INT = 20)
        {
            Font.registerFont(MoolEmbed);

            VAR myArc:雪碧=新的Sprite();
            myArc.graphics.lineStyle(2);
            myArc.graphics.beginFill(颜色,透明度);
            drawSolidArc(myArc,的centerX,centerY,innerRadius,outerRadius,startAngle开始,arcAngle,网址,步骤);
            myArc.graphics.endFill();
            this.addChild(myArc);

                VAR myFormat:的TextFormat =新的TextFormat();
                myFormat.size = 20;
                myFormat.align = TextFormatAlign.CENTER;
                myFormat.font ='SegoeUI';
                myFormat.bold = TRUE;

                变种会将myText:文本字段=新的TextField();
                myText.defaultTextFormat = myFormat;
                myText.setTextFormat(myFormat);
                myText.embedFonts = TRUE;
                myText.antiAlias​​Type = AntiAlias​​Type.ADVANCED;
                myText.text =网址;
                this.addChild(会将myText);

                myText.wordWrap = TRUE;
                myText.width = outerRadius  -  innerRadius;
                myText.height = 20;
                VAR sectorsNum:数=转/ 360;
                textRotation(会将myText,腐*(sectorsNum值) - 腐* 0.5,的centerX,centerY);

                myText.x = imageX1 + 0 *(imageX2  -  imageX1);
                myText.y = imageY1 + 0 *(imageY2  -  imageY1);
                //跟踪(myText.x ++ myText.y);
                VAR myGlow:使用GlowFilter =新的GlowFilter();
                myGlow.color = 0XFFFFFF;
                myGlow.blurX = 20;
                myGlow.blurY = 20;
                myGlow.strength = 2;
                myText.filters = [myGlow]
            }
        }

        私有函数textRotation(目标:文本字段,角度:号码,的centerX:号码,centerY:编号)​​:无效{
            VAR点:点=新的点(的centerX + target.width / 2,centerY + target.height / 2);

            VAR M:矩阵= target.transform.matrix;
            m.tx  -  = point.x;
            m.ty  -  = point.y;
            m.rotate(角*(Math.PI / 180));
            m.tx + = point.x;
            m.ty + = point.y;
            target.transform.matrix =米;
        }

        私有函数drawSolidArc(drawObj:对象, centerX:Number,centerY:Number,innerRadius:Number,outerRadius:Number,startAngle:Number,arcAngle:Number,url:String,steps:int=20):void {
            VAR twoPI:数= 2 * Math.PI;
            VAR angleStep:数= arcAngle /步;
            VAR角度:电话号码,我:INT,endAngle:数字;
            VAR XX:数=的centerX + Math.cos(由startAngle * twoPI)* innerRadius;
            VAR YY:数= centerY + Math.sin(由startAngle * twoPI)* innerRadius;
            VAR xxInit:数= XX;
            VAR yyInit:数= YY;
            drawObj.graphics.moveTo(XX,YY);
            对于(i = 1; I< =步骤;我++){
                角=(由startAngle + I * angleStep)* twoPI;
                XX =的centerX + Math.cos(角)* innerRadius;
                YY = centerY + Math.sin(角度)* innerRadius;
                drawObj.graphics.lineTo(XX,YY);
                如果(我==步* 0.5-1){
                    imageX1 = XX;
                    imageY1 = YY;
                }
            }
            endAngle =由startAngle + arcAngle;
            对于(i = 0; I< =步骤;我++){
                角=(endAngle  -  I * angleStep)* twoPI;
                XX =的centerX + Math.cos(角)* outerRadius;
                YY = centerY + Math.sin(角度)* outerRadius;
                drawObj.graphics.lineTo(XX,YY);
                如果(我==步* 0.5){
                    imageX2 = XX;
                    imageY2 = YY;
                }
            }
            drawObj.graphics.lineTo(xxInit,yyInit);
        }
    }
}
 

这就是创建所有轮:

  sectorsNum = tarotAC.length;
                对于(VAR我:= 0; I< sectorsNum;我++){
                    VAR arcAngle:数=  -  1 / sectorsNum;
                    VAR由startAngle:数= arcAngle *我;
                    变种弧:扇区=新扇区(FlexGlobals.topLevelApplication.mode,360 / sectorsNum,0,0,stageW * 0.1,stageW * 0.5,startAngle开始,arcAngle,编号(sectorsNum  -  i)中,tarotAC.getItemAt(ⅰ)。颜色, 1,tarotAC.getItemAt(ⅰ).datas,tarotAC.getItemAt(ⅰ).URL);

                    con.addChild(弧);
                }
 

解决方案

看着它,我会说你的文本域需要通过自己的身高向上移动。文本域是从顶部和你给他们将适合与基准更好的坐标创建。也许你可以把你的文本字段的雪碧,设置文本域的y以-height,然后操纵容器而不是文字本身:

  VAR容器:雪碧=新的Sprite();
container.addChild(会将myText);
this.addChild(容器);
myText.y = -myText.height;
textRotation(集装箱,腐*(sectorsNum值) - 腐* 0.5,的centerX,centerY);
//你当然应该修改textRotation的第一个参数类型
container.x = imageX1 + 0 *(imageX2  -  imageX1);
container.y = imageY1 + 0 *(imageY2  -  imageY1);
 

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

解决方案

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

这篇关于周围的圆的中心沿半径文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆