Question

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

enter image description here

仅供参考，空白区域将包含文本控件，我正在使用（i）图标和“促销”文本创建一个代表黑角的组件。
我遇到问题的部分是这个组件用对角文本表示黑角。文本必须能够容纳2行。黑角必须能够适应文本的大小。更重要的是，文本有一个轮换......

我对如何做到这一点有疑问：

我应该为每个文本行设置不同的控件吗？
我应该在形状中绘制文本（在旋转之后）还是应该重叠两个组件？ [当我谈到在形状中绘制文字时，我的意思与this问题中提到的方式相同]
有没有办法在不进行一些奢侈计算的情况下获得三角形的合适尺寸？

并且......你有什么“更容易”的方法吗？

非常感谢您提供的任何帮助:)我对这个小组件感到有些失落：）

的问候。
BS_C3

编辑1：

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

Answer 1

Flex非常擅长将组件更新为其内容的大小，动态更新...

对于你的建议，我可能会在角落里创建一个“促销”组作为一个矩形，旋转它并按照你想要的方式装到角落，然后使用你用作maing的圆角矩形的副本组件背景，我做了一个掩码来剪切“促销”组件，所以你看不到重叠。

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

    ...

}

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

2 个答案: