テキストの修飾のサンプル

現在開発中のプロジェクトで、Labelコントールを楕円を囲み、楕円部分にマウスカーソルが乗った時にイベントを取得する必要に迫られて作成しました。他のプロジェクトでも簡単に流用できるようにMXMLコンポーネントとして作成しました。Labelコントロール等、テキストの修飾のやり方のサンプルとしてFlex備忘録に登録します。

MXML MindLabel コントロール

<?xml version="1.0" encoding="utf-8"?>
<!-- MindLabel.mxml -->

<!-- マインドラベル表示 -->
<mx:Label
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:MyComp="*"
    initialize="initmindlabel()"
    updateComplete="completetext()"
    mouseOver="mouseovertext(event)"
    mouseOut="mouseouttext(event)">

  <mx:Script>
    <![CDATA[

    public var nodetype:String;             // ノードタイプ(center,node)

    private const gap:Number = 5;           // 調整用隙間
    private const ofcolor:uint = 0xEBEBE9;  // マウスがいない時の色
    private const oncolor:uint = 0xE68701;  // マウスが乗った時の色
    private const bdcolor:uint = 0x939A9D;  // 枠の色
    private const alnum:Number = 0.75;      // アルファ透明度


    // 初期化処理
    private function initmindlabel():void {
      trace("initmindlabe()実行！ nodetype=["+nodetype+"]");
    }

    // 更新完了処理
    private function completetext():void {
      trace("completetetext()実行！txt=["+text+"]");
      if (text.length < 1) return;
      centercircle(ofcolor);   // センターサークル表示
    }

    // センターサークル表示
    private function centercircle(color:uint):void {
      //trace("x,y,w,h=["+x+","+y+","+width+","+height+"]");
      graphics.clear();
      var x1:Number = 0 - gap;
      var y1:Number = 0 - gap;
      var x2:Number = width + (gap * 2);
      var y2:Number = height + (gap * 2);
      // 楕円の塗りつぶし
      graphics.beginFill(color, alnum);
      //graphics.drawRect(x1,y1,x2,y2);
      graphics.drawEllipse(x1,y1,x2,y2);
      graphics.endFill();
      // 楕円の枠
      graphics.lineStyle(1, bdcolor);
      graphics.drawEllipse(x1,y1,x2,y2);
    }

    // マウスがテキスト部に乗った
    private function mouseovertext(ev:MouseEvent):void {
      //trace("mouseovertext()実行！");
      centercircle(oncolor);   // センターサークル表示
    }

    // マウスがテキスト部から離れた
    private function mouseouttext(ev:MouseEvent):void {
      //trace("mouseouttext()実行！");
      centercircle(ofcolor);   // センターサークル表示
    }

    ]]>
  </mx:Script>

</mx:Label>