ホーム >> 左脳ActionScript3 >> アクションスクリプト3 >> TextFieldクラス >> 表示位置のプロパティ
表示位置のプロパティ
では、実際にスクロールバーを作るにはどうしたらよいでしょうか。

まずは、入力されたテキストの状態を知る必要が在ります。 「横幅が何文字でどれくらいの幅」になるのか、「縦幅が何行でどれくらいの幅」あるのか、をリアルタイムで知る必要が在るのです。
テキスト内容が変化した時に、この「横幅」「縦幅」を知る事が出来れば、テキスト入力に合わせスクロールバーを動かす事が出来る様になります。

リアルタイムでの「テキスト内容の変化」の検知方法は、既に説明してある「Event.CHANGEを監視する方法」で実現します。
「横幅」「縦幅」は、以下のプロパティで取得する事が出来ます。

  • numLinesプロパティ
    縦幅の基本となる行数を取得できます。1行から始まり、テキストの状態で変化します。

  • textWidthプロパティ
    物理的な横幅を取得できます。
    TextField では、(フォント指定にもよりますが)文字毎にその幅が一定ではありません。アルファベット一つ取っても「Q」と「l」では幅が違います。 そこで、文字数ではなく、実際の表示幅を取得する事になります。

  • textHeightプロパティ
    物理的な縦幅を取得できます。
    TextField では、文字に装飾が出来ます。そのため、フォントサイズ等を変更した装飾文字を含む場合、行ごとの縦幅が異なる場合があります。 この場合は、textWidthプロパティ と同じ考えかたで、直接、物理的な実際の表示高さを参照する必要が出てきます。


これらのプロパティをリアルタイムで表示するサンプルです。
Get Adobe Flash player

private var txt_input:TextField;    //  入力領域
private var txt_status:TextField;   //  状態表示領域
//  画面構成の初期化
private function TextField_multline():void 
{
    txt_input   =   new TextField();
    txt_input.x =   20; //  横位置
    txt_input.y =   20; //  縦位置
    txt_input.width     =   200;    //  幅
    txt_input.height    =   100;    //  高さ
    txt_input.multiline =   true;   //  複数行
    txt_input.type  =   flash.text.TextFieldType.INPUT; //  入力タイプ
    txt_input.text  =   ">"; //  表示テキスト
    txt_input.background    =   true;   //  背景色指定有効化
    txt_input.backgroundColor   =   0xa0e0e0;   //  色
    addChild(txt_input);
    //
    txt_status  =   new TextField();
    txt_status.x    =   20;
    txt_status.width    =   200;
    txt_status.height   =   20;
    addChild(txt_status);
    //  テキスト変化イベント監視開始
    txt_input.addEventListener(Event.CHANGE, change_text);
}
//  テキスト内容の変化を受けるイベント
private function change_text(e:Event):void 
{
    txt_status.text =   txt_input.numLines + "行(" + txt_input.textWidth + " x " + txt_input.textHeight + ")";
}


これらのプロパティを使えば、テキストに合わせてスクロールバーを動かす事が出来るようになるでしょうか?

実は、まだ足りない情報があります。

tfmArea.PNG テキストを TextField の横幅を越える入力をするとスクロールしますが、 スクロールバーの中の、スクロールボタンを「スクロールバーの何処に移動」させるのか、が分りません。

TextField の「内部のテキスト領域の何処を表示するか」が分らないと スクロールバーのスクロールボタンの位置を決められないのです。

左図の黒枠が内部のテキスト領域、青い四角が物理的な表示領域で、 赤い矢印で示された表示領域の位置指定が必要になります。
そして、TextField が内部で管理している表示位置のプロパティが以下の4つです。

  • scrollHプロパティ
    scrollHプロパティ は、テキストの表示位置を物理的な横幅(ピクセル数)で扱います。 0 ~ maxScrollHプロパティ までの範囲で変化します。
  • maxScrollHプロパティ
    scrollHプロパティ が取りうる最大位置を返します。

  • scrollVプロパティ
    scrollVプロパティ は、テキストの表示行数を扱います。 0 ~ maxScrollVプロパティ までの範囲で変化します。
  • maxScrollVプロパティ
    scrollVプロパティ が取りうる最大行数を返します。

表示位置を画面に出すサンプル。
Get Adobe Flash player
(変更のあったルーチンのみ。)

//  テキスト内容の変化を受けるイベント
private function change_text(e:Event):void 
{
    txt_status.text =   "(" +   txt_input.scrollH   +   "px"
                    +   "," +   txt_input.scrollV   +   "行"
                    +   "):最大"
                    +   "(" +   txt_input.maxScrollH    +   "px"
                    +   "," +   txt_input.maxScrollV    +   "行"
                    +   ")";
}

表示するプロパティのみを変更したコード。

テキストがスクロールを始めるチョっと手前まで入力をしないと、値が変化しません。
実は、上記の4つのプロパティは、TextField にスクロールバーを実装する為に設計されているような所があり、 ユーザー(Flash作成者は)TextField 内部のこれらのプロパティだけで、スクロールバーを実装する事が出来るようです。


>> スクロールバーの描画

トラックバック(0)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/198

コメントする

ホーム >> 左脳ActionScript3 >> アクションスクリプト3 >> TextFieldクラス >> 表示位置のプロパティ