1

次のコンポーネントを作成しようとしています。

ここに画像の説明を入力

参考までに、空白スペースにはテキスト コントロールが含まれ、(i) アイコンと「プロモーション」テキストで黒い角を表すコンポーネントを作成しています。
私が問題を抱えている部分は、斜めのテキストで黒いコーナーを表すこのコンポーネントです。テキストは 2 行を保持できる必要があります。また、黒い角はテキストのサイズに合わせて調整できなければなりません。しかも文字に回転が…

これを行う方法についていくつか疑問があります。

  • テキスト行ごとに異なるコントロールを使用する必要がありますか?
  • (回転を行った後) 形状にテキストを描画する必要がありますか、それとも両方のコンポーネントを重ねるだけですか? [テキストを形に描くというのは、この質問で尋ねたのと同じ意味です]
  • 余計な計算をせずに三角形の適切なサイズを取得する方法はありますか?

そして...これを行うための「より簡単な」方法はありますか？

あなたが提供できる助けに大いに感謝します:)私はこの小さなコンポーネントで少し迷っています:)

よろしく。
BS_C3

編集1：

  • 三角形には 2 つのサイズがあります。1 つのサイズは 1 行に収まるサイズで、もう 1 つのサイズは 2 行のテキストに収まるサイズです。
  • テキストは 1 つの文字列として送信されるため、必要に応じて自動的に 2 行に分割する必要があります。
  • グラフィックスを使用して三角形を描画し、マスクを使用して角を丸くすることを考えていました --> これは、角を丸くせずに、アプリケーションの他の場所で同じコンポーネントを使用するためです。
4

2 に答える 2

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 に答える
0

Flex は、グループ コンポーネントをそのコンテンツのサイズに合わせて更新し、その場で動的に更新するのが得意です。

あなたの提案のために、私はおそらくコーナーに「プロモーション」グループを長方形として作成し、それを回転させて、必要に応じてコーナーに合わせてから、主要なコンポーネントの背景として使用する丸みを帯びた長方形のコピーを使用します。 「プロモーション」コンポーネントをカットするマスクを作成して、オーバーラップが表示されないようにします。

于 2011-03-30T20:06:09.977 に答える