【Raphael.js】テキストを描画する方法

print関数

前回はtext関数で、簡単なテキストの描画を行いました。

【Raphael.js】最も簡単でシンプルなテキスト描画 - RAPHAELIST

ただし、これはどちらかというとテキストの描画というよりは埋め込みです。今回は本当に描画しちゃいます。単純な埋め込みとは違い、様々なことができます。

実行結果

まずは結果から見てみましょう。以下のスクリプトを実行してみてね！

解説

ごついロックテイストなテキストが表示されましたね？print関数を使えばこのようにワンダフルでグレートな事が出来るんです。フォントが特殊ですが、これはまだ気にする必要はありません。 print関数を使えば、好きなフォントを描画出来るという事だけ覚えておいてください。text関数とは違い、サイズやレタースペース、位置の指定が可能です。ちょっと多いですね！

Paper.print( x, y, string, font-family, size, base, space);

Paper: Raphael関数で指定した描画エリア
x: テキストのX座標
y: テキストのY座標
string: 描画する文字列
font-family: Raphaelで扱えるようにしたfontオブジェクト
size: (省略可)テキストのサイズ。デフォルトは16
base: (省略可)垂直方向に中央揃えの場合は'middle'(デフォルト)。下揃えは'baseline'。
space: (省略可)隣り合う文字と文字の間隔を-1～1の間で指定します
返り値: 描画したprintエレメント