表示モード

文字列を中央寄せ・右寄せする ​

文字列は textAlign プロパティで中央・右に寄せることができます。

凡例 ​

javascript
var label = new g.Label({
  ...,      // その他のプロパティ
  textAlign: "center", // 中央寄せする
  width: 100, // 中央寄せに使う描画の幅
  widthAutoAdjust: false // 幅を自動で更新しない
});
scene.append(label);
javascript
label.textAlign = "center";
label.width = 100;
label.widthAutoAdjust = false;
label.invalidate(); // invalidate() で表示に反映

利用例 ​

次のコンテンツは、文字列を中央揃えで表示します。

詳細 ​

Label の文字は、何も指定が無い場合はエンティティ矩形 (幅が width プロパティ、高さが height プロパティの矩形)の中で左寄せに配置されます。そのため、このときエンティティの X,Y 座標に一番近いのは最初の文字の左上です。 この配置は textAlign で変更することができます。 textAlign に "center" を指定した場合、文字列全体の中央がエンティティの矩形の中央に一致します。同様に、 "right" を指定した場合、文字列の右端をエンティティ矩形の中で右寄せに配置します。

textAlign を使う場合、 width と widthAutoAdjust プロパティを指定する必要があることに注意してください。文字を中央や右に寄せる場合、その位置を決めるためには幅が決まっている必要があります。この幅に基づいて、中央や右端の座標が決まります。また、 widthAutoAdjust プロパティに false を指定する必要があります。このプロパティが true の場合、 width は自動的に最小の値に更新されます。そのため、 textAlign を指定しても期待する描画が得られなくなります。

関連情報 ​