1

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

在此处输入图像描述

仅供参考，空白区域将包含一个文本控件，我正在创建一个组件，该组件代表带有 (i) 图标和“促销”文本的黑色角。
我遇到的问题是这个组件用对角线文本表示黑色角。文本必须能够容纳 2 行。黑角必须能够适应文本的大小。更何况文字还有轮播……

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

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

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

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

问候。
BS_C3

编辑1：

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

2 回答 2

0

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

根据您的建议，我可能会在角落中将“促销”组创建为矩形，将其旋转并按照您的意愿将其安装到角落，然后使用您用作主要组件背景的圆角矩形的副本，我会制作一个蒙版来剪切“促销”组件，这样你就看不到重叠了。

于 2011-03-30T20:06:09.977 回答
0

好吧，我终于写了这个类，结果如下：

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-06T14:39:50.063 回答