【Raphael.js】境界線に様々な破線パターンを指定する方法

stroke-dasharray属性

線を点線、破線にする"stroke-dasharray"属性について説明します。破線も様々なスタイルが選択できますが、直感的なパターン文字列を属性値として指定することで破線を形成していきます。

実行結果

以下サンプルです。再生ボタンで実行！

解説

破線は"."、"--"、" "などの記号を組み合わせることで作る事が出来ます。直感的でしょ？

• "." = 点
• "-" = 短い線分
• "--" = 長い線分
• " " = 破線の間隔

こんな感じです。パターンは自由にできるかというとそうでもなく、以下のパターンから選択する必要があります。

破線パターン

• “-” … 短い線分のみが集合した破線
• “.” … 点のみが集合した破線
• “--” … 長い線分が集合した破線
• “-.” … 短い線分と点が集合した破線
• “-..” … 短い線分と点2つが集合した破線
• “. ” … 広めの間隔の点が集合した破線
• “- ” … 間隔の長い短い線分が集合した破線
• “- .” … 短い線分と点との間隔を広めにした破線
• “--.” … 長い線分と点が集合した破線
• “--..” … 長い線分と2つの点が集合した破線

モールス信号みたいですね。

Element.attr( {"stroke-dasharray":"pattern"} );

• Element: 描画したRaphaelエレメント
• pattern: 上記の入力パターン