モーションタイポ再び (5)
2008/02/23 19:51 - AS3.0
getCharBoundaries で得られる境界ボックスの Rectangle と1文字ずつバラバラにしたテキストフィールドとの関係はどうなっているのか。 今回はその点を見てみます。
前回掲示したgetCharBoundaries 挙動テストサンプルを改造します。 改造対象はテキストフィールドのテキストを1文字ずつ取得するループ部分。
改造後コードでは、createChar() というメソッドに名前を変更しています。
境界ボックスを生成するメソッド drawBoundary() に加え、テキストフィールドを生成する createCharTextField() メソッドをループ部分で呼び出すようにします。
以下のようなテキストフィールドに対して、1文字ずつテキストフィールドを生成配置してみます。
まずは各文字ごとに得られた Rectangle のプロパティ x、y を、各文字のテキストフィールドの x、y に単純に代入した場合。
灰色の文字が 1文字ずつ分割したテキストフィールド、赤い枠は前回同様、getCharBoundaries() メソッドで得られた Rectangle の外縁です。
charFld.x = r.x + marginX; charFld.y = r.y + marginY;
charrFld が 1文字ずつ生成するテキストフィールド、r が Rectangle、marginX と marginY は下地テキストフィールドをセンタリングしたときのマージン値です。
各文字テキストフィールドが、下地である文字列テキストフィールドの文字に対して、X座標、Y座標ともに少しズレていますね。
以前も書いたことがありますが、テキストフィールドは2ピクセルのマージンが取られるようになっています。ActionScript 3.0 の LiveDocs だと flash.text.TextLineMetrics クラスのページに図解されています。「2ピクセル幅のふち取り」と書いてありますね。
ズレはおそらくこの2ピクセルに起因するものでしょう。
では、各文字テキストフィールドを 2ピクセルずつズラして配置してみましょう。
charFld.x = r.x + marginX - 2; charFld.y = r.y + marginY - 2;
今度は各文字テキストフィールドと下地の文字列テキストフィールドの対応文字がピッタリ重なりました。
なお、各文字のテキストフィールドのボーダーを表示させると以下のようになります。
灰色の枠線が各文字テキストフィールドのボーダーです。
このサンプルから、境界ボックスというのはテキストフィールドの「2ピクセル幅のふち取り」を取り除いた部分であることが分かります。
シリーズ
- モーションタイポ再び (9)
- モーションタイポ再び (8)
- モーションタイポ再び (7)
- モーションタイポ再び (6)
- モーションタイポ再び (4)
- モーションタイポ再び (3)
- モーションタイポ再び (2)
- モーションタイポ再び (1)
