플렉스 3 - 대각선으로 텍스트를 모양으로 그립니다.

Question

다음 구성 요소를 만들려고합니다.

정보를 위해 빈 공간에는 텍스트 컨트롤이 포함되어 있으며 (i) 아이콘과 "프로모션"텍스트가있는 검은 색 모서리를 나타내는 구성 요소를 만드는 것입니다.
문제가있는 부분은 대각선 텍스트가있는 검은 색 구석을 나타내는이 구성 요소입니다. 텍스트는 2 줄을 유지할 수 있어야합니다. 그리고 Black Corner는 텍스트의 크기로 조정할 수 있어야합니다. 그 텍스트는 회전이 있습니다 ...

이 작업을 수행하는 방법에 대한 의심이 있습니다.

• 각 텍스트 라인에 대해 서로 다른 컨트롤이 있어야합니까?
• 회전을 한 후에 텍스트를 형상으로 그려야하거나 두 구성 요소를 겹쳐야합니까? [텍스트를 셰이프로 드로잉하는 것에 대해 이야기하면 이 질문
• 사치스러운 계산을하지 않고 삼각형 모양의 적절한 크기를 얻을 수있는 방법이 있습니까?

  및 ... 이렇게 할 수있는 "쉬운"방법이 있습니까?

  당신이 제공 할 수있는 도움을 주셔서 감사합니다 :) 나는이 작은 구성 요소로 조금 잃어버린 것입니다.)

  감사합니다.
  BS_C3

  ---

  편집 1 :

  • 삼각형은 2 개의 크기가있을 수 있습니다 : 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.