【Raphael.js】線端の形状と接続面の描画を指定する方法

"stroke-linecap"属性と "stroke-linejoin"属性

さて、ここでは線端の形状と接続面の描画について説明します。

実行結果

まずは実行してみましょう。大体これで感じは掴めるかなと思います。

解説

線端とか接続面とか難しく書いてますが、要はペン先の丸いサインペンで描くか四角いマーカーで描くかの違いです。 "stroke-linecap"属性は、線の終わりがどのように終わるかを示します。"butt"は何もつけません。”square”は四角をつけます。ただし、何もつけない"butt"も最終的に四角で終わっている為、両者にはほとんど差がありません。強いて言えば長さが少し変わるくらいです。 ”stroke-linejoin”属性は角の描画を制御します。"bevel"は四角いマーカーで角を描いたような感じになり、”round”は丸いコーナーを描きます。”miter”はかっこよい鋭角をつくります。 この”miter”に関しては”stroke-miterlimit”という属性でしきい値を指定できます。ここは"bevel"でいいけどこういうところは"miter"にしたいという制御に使えます。

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

• Element: 描画したRaphaelエレメント
• pattern: “butt”, “square”, “round”

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

• Element: 描画したRaphaelエレメント
• pattern: “bevel”, “round”, “miter”

Element.attr( {"stroke-miterlimit": threshold} );

• Element: 描画したRaphaelエレメント
• threshold: linejoinがmiterの時のしきい値