Flex 3的 - 对角绘制文本的形状和大小调整

我试图创建以下组件：Flex 3的 - 对角绘制文本的形状和大小调整

enter image description here

只是供参考的空白将包含一个文本控件，和我m创建一个组件，用（i）图标和“促销”文本表示黑角。
我有问题的部分是这个组件代表对角线文本的黑角。文本必须能够保存2行。黑角必须能够适应文字的大小。更重要的是，文本具有一个旋转...

我有关于如何做到这一点有些疑惑：

我应该有不同的控制每个文本行？
我应该在形状中绘制文字（旋转后），还是应该重叠两个组件？ [当我谈论绘制形状中的文字时，我的意思与this问题中提出的方法相同]
是否有任何方法可以在不进行一些极端计算的情况下获得正确大小的三角形形状？

而且......你有没有更简单的方法可以做到这一点？

任何帮助，您可以提供非常感谢:)我与这个小部件:)

问候有点失落。
BS_C3

编辑1：

三角形可以具有2种尺寸：1个大小，将适合1线，而另一个大小以适合2行文字。
该文本将作为单个字符串发送，因此必须在需要时自动分为两行
我在考虑使用图形绘制三角形形状，然后使用蒙版来创建圆角 - >这是因为相同的组件将被用于没有圆角的应用程序的其他地方

来源

2011-03-30 BS_C3

哪些文本如何规则“调整它的大小：”我觉得这里的唯一真正的问题是确定一套可靠的规则并与任何授权创建该组件的人一起制定。你需要有一些限制或用户控制来解决问题。例如说此评论是在控制，是它指基于三角形的尺寸均匀地划分该整个文本块跨两行（在字符或线宽度或比例而言，是有史以来允许改变大小或尺寸的三角形？）需要更多的约束。 – shaunhusain 2011-03-30 17:25:39

嗨shaunhusain。确实有一些规则。三角形形状将有2种不同的尺寸：当它具有1行文字和当其具有2行文字。该文本将通过后台作为一个字符串被发送，这将有自动均匀地涂抹在整个文本块，如果它不能在一个单行适合分（如果它没有在两行适应它只会被troncated ）。 – 2011-03-31 08:26:40

好了，我终于写了类，这是结果：

public class Corner extends Canvas 
{ 
    private var infoIcon:Image; 
    private var text:Text; 
    private var triangle:Shape; 
    private var bgColor:uint; 

    public function Corner() 
    { 
     super(); 

     infoIcon = new Image; 

     text = new Text; 
     text.rotation = -45; 
     text.width = 75; 
     text.maxHeight = 30; 
     text.setStyle('color', '0xffffff'); 
     text.setStyle('textAlign', 'center'); 
     text.y = 53; 

     this.addChild(infoIcon); 
     this.addChild(text); 

     triangle = new Shape; 
    } 

    public function build(bgColor:uint = 0x61113D):void{ 
     this.bgColor = bgColor; 

     // info icon data 

     // set text  
     text.addEventListener(FlexEvent.UPDATE_COMPLETE, textHandler); 
     text.text = 'blabla'; 
     text.validateNow(); 
    } 

    /** 
    * 
    */ 
    private function textHandler(e:FlexEvent):void{ 
     switch(e.type){ 
      case FlexEvent.UPDATE_COMPLETE: 
       text.removeEventListener(FlexEvent.UPDATE_COMPLETE, textHandler); 
       drawTriangle(); 
       break; 
     } 
    } 

    /** 
    * 
    */ 
    private function drawTriangle():void{ 
     var h:int = 80; 
     // check if the text has 1 or 2 lines 
     if(text.height > 20) 
      h = 95; 

     // remove the triangle shape if it exists 
     if(this.rawChildren.contains(triangle)) 
      this.rawChildren.removeChild(triangle); 

     // draw triangle 
     triangle = new Shape; 
     triangle.graphics.moveTo(0, 0); 
     triangle.graphics.beginFill(bgColor); 
     triangle.graphics.lineTo(h, 0); 
     triangle.graphics.lineTo(0, h); 
     triangle.graphics.lineTo(0, 0); 
     triangle.graphics.endFill(); 

     this.rawChildren.addChildAt(triangle,0); 

     dispatchEvent(new MyEvent(MyEvent.CORNER_UPDATED)); 
    } 

    ... 

}

来源

2011-04-06 14:39:50

Flex很擅长将组件组更新为任何内容大小，动态更新。

对于你的建议，我可能会在角落创建“促销”组作为矩形，将它旋转并像你想要的那样适合它的角落，然后使用你使用的圆角矩形的副本作为组件背景，我会制作一个遮罩来裁剪“促销”组件，所以你不会看到交叠。

来源

2011-03-30 20:06:09 loogie

Loogie您好，感谢您的回答。我没有想到使用圆角矩形作为角落的主要组成部分。即使我做了，我仍然不知道如何摆放面具...>。< – 2011-03-31 08:21:21

Flex 3的 - 对角绘制文本的形状和大小调整

回答

相关问题