web-dev-qa-db-ja.com

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

誰かがこれらの属性の実際の例を教えてもらえますか：stroke-dasharray、stroke-linecap、stroke-linejoin私はそれらを使ってみましたが、それらの値のsentext構造を完全には理解していません。

javascriptsvgraphael
15
zero

stroke-linecap

  • 法的価値：butt | round | square | inherit
  • 例
    Screenshot of above example

stroke-linejoin

  • 法的価値：miter | round | bevel | inherit
  • 例
    Screenshot of above example

stroke-dasharray

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

Phrogzの答えはプレーンなSVGに最適ですが、この質問にはRaphaelというタグも付けられています。ここでは、状況は似ていますが、わずかに異なります。 Raphaelにはストローク設定の良い例があまりないので、ここに完全なライブデモンストレーションがあります。

_stroke-dasharray_（点線と破線）、_stroke-linejoin_（ストロークコーナースタイル）、および_stroke-linecap_（パスストロークキャップスタイル）をRaphael.js。

jsfiddleライブデモへのリンク

Raphaelの点線/破線には.attr({'stroke-dasharray': option})を使用し、これらのオプションの1つを使用します（数字なし、純粋なSVGとは異なり：

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

enter image description here

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

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

enter image description here

ストローク幅とマイター（シャープ）結合が鈍くなる角度に基づいてカットオフポイントを制御する.attr({'stroke-miterlimit': decimal})を設定することもできます。 SVGストロークと同じ-miterlimitなので、SVGドキュメントが適用されます 。これのブラウザ間のバリエーションは、上記のjsfiddleで確認できます（例：Chrome＆Windows上のFirefox）

enter image description here

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

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

enter image description here

33
user568458

この回答はstroke-dasharrayのみを対象としており、Phrogzによる回答の補足であることに注意してください。
Raphaelは、user568458が述べているように、stroke-dasharrayを設定する自由をあまり提供していません。他のsvgクリエーターと同じように機能する必要があるため、raphael.jsを少し調整して可能な限りすべてに対応しました。 stroke-dasharray値。

addDashes = function (o, value, params) {
        var nvalue = dasharray[Str(value).toLowerCase()];
        if (nvalue!==undefined) {
            var width = o.attrs["stroke-width"] || "1",
                butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
                dashes = [],
                i = nvalue.length;
            while (i--) {
                dashes[i] = nvalue[i] * width + ((i % 2) ? 1 : -1) * butt;
            }
            $(o.node, {"stroke-dasharray": dashes.join(",")});
        }else{
            $(o.node, {"stroke-dasharray": Str(value).toLowerCase()});
        }
    }

dasharrayオブジェクトが定義されているファイルのすぐ下にある前のコードを置き換えます。

3
Puneet

Raphaelラインオブジェクトに標準のSVGの方法で破線を適用したい場合、これは私にとってはうまくいきました。一方、ラファエルのようにピリオドとハイフンを使用することはできませんでした。

myLine.attr({stroke:'green'}).node.setAttribute('stroke-dasharray', '10,10');

パラメータ（10,10この例では）は長さ、ギャップであり、必要なだけ繰り返すことができます。お気に入り 5, 5, 1, 5はドット付きの短いダッシュになります。

参照： https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

0
Ecropolis