플렉스 3 - 대각선 모양으로 텍스트를 그릴 및 크기에게 나는 다음과 같은 구성 요소를 만들려고 해요

Question

조정 :

이

그냥 정보, 빈 공간이 텍스트 컨트롤을 포함 할 것, 나는 ' m (i) 아이콘과 "promotion"텍스트를 사용하여 검정색 모서리를 나타내는 구성 요소를 만듭니다.
문제가있는 부분은 대각선 텍스트가있는 검은 색 모서리를 나타내는이 구성 요소입니다. 텍스트는 2 줄을 입력 할 수 있어야합니다. 그리고 검은 색 모퉁이는 텍스트의 크기에 맞게 조정할 수 있어야합니다. 각 텍스트 라인

• 내가 가지고해야 다른 컨트롤 : 무엇이 더 텍스트가 회전 ...

  나는이 작업을 수행하는 방법에 대한 몇 가지 의문에 봉착있다?

• (회전 한 후) 도형에 텍스트를 그릴 지, 아니면 두 구성 요소를 겹치게해야합니까? [도형을 그리는 것에 대해 이야기 할 때, this 질문에서와 같은 의미입니다]
• 과도한 계산을 수행하지 않고 삼각형 모양의 적절한 크기를 얻을 수있는 방법이 있습니까?

그리고 ...이 작업을 수행하는 데 "쉬운"방법이 있습니까?

당신이 제공 할 수있는 어떤 도움 주셔서 큰 감사합니다 :) 나는이 작은 구성 요소 :

감사로 손실 조금 있어요.
BS_C3

---

편집 1 :

• 삼각형은 2 개 크기있을 수 있습니다 : 1 개 라인을 맞는 1 개 크기를 다른 크기의 텍스트 2 라인에 맞게.
• 텍스트는 하나의 문자열로 보내 지므로 필요할 경우 자동으로 두 줄로 나눠야합니다.
• 그래픽을 사용하여 삼각형 모양을 그린 다음 마스크를 사용하여 둥근 모서리를 만듭니다. -> 둥근 모서리가없는 응용 프로그램의 다른 위치에서 동일한 구성 요소가 사용되기 때문입니다.

Answer 1

글쎄, 나는 마침내 클래스를 작성하고이 결과 :

텍스트 방법에 대한 규칙은 무엇

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

플렉스는 동적으로 업데이트하면서 그 크기에 관계없이 그룹 구성 요소를 업데이트하는 데 꽤 뛰어납니다.

당신의 제안에 대해 나는 모퉁이에 "프로모션"그룹을 직사각형을 회전시키고 원하는대로 모서리에 맞출 수 있습니다. 그런 다음 둥근 직사각형의 복사본을 사용하여 maing 구성 요소 배경으로 사용합니다. 마스크를 만들어 "판촉"구성 요소를 잘라서 볼 수 없도록합니다. 중복.