Flex 3 - 在形状中对角绘制文本并调整大小

Question

我正在尝试创建以下组件：

仅供参考，空白区域将包含一个文本控件，我正在创建一个组件，该组件代表带有 (i) 图标和“促销”文本的黑色角。
我遇到问题的部分是这个组件代表带有对角线文本的黑色角。文本必须能够容纳 2 行。并且黑角必须能够调整文本的大小。 更重要的是，文本有旋转...

我对如何执行此操作有一些疑问：

• 我应该为每个文本行设置不同的控件吗？
• 我应该在形状中绘制文本（旋转后）还是应该重叠两个组件？ [当我谈论在形状中绘制文本时，我的意思是与 这个问题]
• 有没有办法在不做一些奢侈计算的情况下得到三角形的正确大小？

而且......你有什么“更简单”的方法来做到这一点吗？

非常感谢您提供的任何帮助:)我对这个小组件有点迷失:)

问候。
BS_C3

---

编辑 1：

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

Answer 1

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

根据您的建议，我可能会在角落创建“促销”组作为矩形，旋转它并使其适合像你想要的那样，然后使用你用作主要组件背景的圆角矩形的副本，我会制作一个蒙版来剪切“促销”组件，这样你就看不到重叠。

Answer 2

好吧，我终于写了这个类，结果是这样的：

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

    ...

}