javascript - raphaeljs で attr の stroke-dasharray、stroke-linecap、stroke-linejoin を使用する方法

Question

誰かがこれらの属性の実際の例を教えてもらえますか: stroke-dasharray、stroke-linecap、stroke-linejoin 私はそれらを使用しようとしましたが、それらの値のセンテキスト構造をよく理解していません。

Answer 1

Phrogz の回答はプレーンな SVG には最適ですが、この質問にはRaphaelというタグも付けられています。Raphael にはストローク設定の良い例があまりないため、ここに完全なライブ デモを示します。

Raphael.jsstroke-dasharrayで (点線と破線)、stroke-linejoin(ストローク コーナー スタイル)、およびstroke-linecap(パス ストローク キャップ スタイル)を使用する方法を文書化した例があります。

jsfiddle ライブ デモへのリンク

---

これらのオプションのいずれかを使用.attr({'stroke-dasharray': option})して、Raphael の点線/破線に使用します (純粋な SVG とは異なり、数字はありません)。

["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]

---

.attr({'stroke-linejoin': option})Raphael の丸みを帯びた、面取りされた、または鋭い (マイター) コーナーに使用します (継承以外は SVG と同じ) :

["bevel", "round", "miter"]

.attr({'stroke-miterlimit': decimal})また、ストローク幅に基づいてカットオフ ポイントを制御する設定と、留め継ぎ (鋭い) 結合が鈍くなる角度を設定することもできます。SVG stroke-miterlimit と同じなので、SVG ドキュメントが適用されます。上記の jsfiddle で、ブラウザ間の違いを確認できます (例: Windows 上の Chrome と Firefox 間)。

---

.attr({'stroke-linecap': option})ストロークされたラファエル パスの端にあるキャップを制御するために使用します。

["butt", "square", "round"]

Answer 2

stroke-linecap

• 法的価値：butt| round| square|inherit
• 例
  

---

stroke-linejoin

• 法的価値：miter| round| bevel|inherit
• 例
  

---

stroke-dasharray

• 有効な値：長さまたはパーセンテージのコンマまたはスペースで区切られたリスト。
  例："100 20 0 20"
• 例（上記の値を使用）