Flex 3 - رسم نص قطريا في شكل وضبط الحجم

Question

أحاول إنشاء المكون التالي:

فقط للحصول على معلومات، ستحتوي المساحة الفارغة على عنصر تحكم نصي، وأنا أقوم بإنشاء مكون يمثل الركن الأسود مع أيقونة (I) و "الترويج" النص.
الجزء الذي أواجه مشكلات معه هو هذا المكون الذي يمثل الزاوية السوداء مع النص القانوني. يجب أن يكون النص قادرا على الاحتفاظ بسطرين. والزاوية السوداء يجب أن تكون قادرة على التكيف مع حجم النص. ما هو أكثر من ذلك، يحتوي النص على دوران ...

أواجه بعض الشكوك حول كيفية القيام بذلك:

• يجب أن يكون لدي عناصر تحكم مختلفة لكل سطر نصي؟ يجب أن أرسم النص في الشكل (بعد القيام بالتناوب) أو يجب أن تتداخل على كلا المكونين؟ [عندما أتحدث عن رسم النص في الشكل، أقصد بنفس الطريقة كما هو مطلوب في هذا السؤال]
• هل هناك أي طريقة للحصول على الحجم المناسب لشكل مثلث دون القيام ببعض الحسابات الباهظة؟

  و ... هل لديك أي طرق "أسهل" للقيام بذلك؟

  شكرا كبير لأي مساعدة يمكنك تقديمها :) أنا ضائع قليلا مع هذا المكون الصغير :)

  التحيات.
  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.