Flex 3 - 对角线绘制形状并调整尺寸

Question

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

只是为了信息，空白空间将包含文本控件，我正在创建一个组件，表示具有（i）图标和“促销”文本的黑角色。
我有问题的部分是表示具有对角线文本的黑角的此组件。该文本必须能够持有2行。黑角必须能够调整到文本的大小。 更重要的是，文本有旋转...

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

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

  和......你有任何“更容易”的方法来做这件事吗？

  对您提供的任何帮助感到非常感谢:)我有点丢失这个小部分:)

  问候。
  bs_c3

  ---

  编辑1：

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

Answer 1

Well, I finally wrote the class and this is the result:

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

    ...

}

Answer 2

Flex is pretty good at updating group components to whatever size thier contents become, updating dynamically on the fly..

for what your suggesting, I'd probably create the "Promotion" group in the corner as a rectangle, rotate it and fit it to the corner like you want, then using a copy of the rounded rect you use as the maing component background, i'd make a mask to cut the "Promotion" component so you don't see the overlap.