Javascript 如何在 raphaeljs 中使用 attr 的stroke-dasharray、stroke-linecap、stroke-linejoin

how to use attr's stroke-dasharray,stroke-linecap,stroke-linejoin in raphaeljs

提问by zero

Can anyone give me an example of these attributes in action: stroke-dasharray, stroke-linecap, stroke-linejoin i tried using them, but i don't quite understand the sentext structure for their values.

谁能给我一个这些属性的例子：stroke-dasharray、stroke-linecap、stroke-linejoin 我尝试使用它们，但我不太了解它们值的sentext结构。

回答by user56reinstatemonica8

Phrogz's answer is great for plain SVG, but this question is also tagged Raphael, where things are similar, but slightly different. There aren't many good examples of stroke settings in Raphael, so here's a complete live demonstration.

Phrogz 的回答非常适合普通 SVG，但这个问题也被标记为Raphael，其中的内容相似，但略有不同。Raphael 中描边设置的好例子并不多，所以这里有一个完整的现场演示。

It has examples documenting how to use stroke-dasharray(dotted lines and dashed lines), stroke-linejoin(stroke corner style) and stroke-linecap(path stroke cap style) in Raphael.js.

它的示例记录了如何在Raphael.js 中使用stroke-dasharray（点线和虚线）、stroke-linejoin（笔画角样式）和stroke-linecap（路径笔画帽样式）。

Link to jsfiddle live demo

链接到 jsfiddle 现场演示

---

---

Use .attr({'stroke-dasharray': option})for dotted / dashed lines in Raphael, with one of these options (no numbers, unlike pure SVG):

使用.attr({'stroke-dasharray': option})在拉斐尔点/虚线，与其中的一个选项（没有数字，不像纯SVG）：

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

---

---

Use .attr({'stroke-linejoin': option})for rounded, bevelled or sharp (mitre) corners in Raphael (same as SVG except inherit):

使用.attr({'stroke-linejoin': option})在用于圣拉斐尔圆角，斜角或尖锐（斜切）角部（与SVG除了继承）：

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

You can also set .attr({'stroke-miterlimit': decimal})which controls the cut-off point based on the stroke width and the angle beyond which miter (sharp) joins are blunted. Same as SVG stroke-miterlimit so SVG docs apply. Cross-browser variation in this can be seen in the jsfiddle above (e.g. between Chrome & Firefox on Windows)

您还可以.attr({'stroke-miterlimit': decimal})根据笔划宽度和斜接（尖锐）连接变钝的角度来设置哪个控制截止点。与 SVG stroke-miterlimit 相同，因此适用于 SVG 文档。在上面的 jsfiddle 中可以看到跨浏览器的变化（例如在 Windows 上的 Chrome 和 Firefox 之间）

---

---

Use .attr({'stroke-linecap': option})to control the caps on the end of a stroked raphael path:

使用.attr({'stroke-linecap': option})以控制描边路径拉斐尔的末端帽：

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

回答by Phrogz

stroke-linecap

stroke-linecap

• Legal Values: butt| round| square| inherit
• Example
  

• 法律价值：butt| round| square|inherit
• 例子
  

---

---

stroke-linejoin

stroke-linejoin

• Legal Values: miter| round| bevel| inherit
• Example
  

• 法律价值：miter| round| bevel|inherit
• 例子
  

---

---

stroke-dasharray

stroke-dasharray

• Legal Values: comma- or space-delimited list of lengths or percentages,
  e.g. "100 20 0 20"
• Example(using above values)
  

• 合法值：逗号或空格分隔的长度或百分比列表，
  例如"100 20 0 20"
• 示例（使用上述值）
  

回答by Puneet

Please note that this answer covers only stroke-dasharrayand is a supplement to answer by Phrogz.
Raphael does not provide a lot of freedom to set stroke-dasharrayas stated by user568458 and as I needed it to work like other svg creators I did a little tweak in raphael.jsto accommodate all possible stroke-dasharrayvalues.

请注意，此答案仅涵盖stroke-dasharray并且是 Phrogz 回答的补充。
Raphael 没有提供很多自由设置，stroke-dasharray如 user568458 所述，因为我需要它像其他 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()});
        }
    }

Replacing the previous code in the file just below where dasharrayobject is defined.

替换文件dasharray中定义对象的正下方的先前代码。

回答by Ecropolis

If you want to apply a dashed line in a standard SVG way on a Raphael line object, this worked well for me; whereas I didn't have any luck using period and hyphens as done in the Raphael way.

如果您想在 Raphael 线对象上以标准 SVG 方式应用虚线，这对我来说效果很好；而我没有像拉斐尔那样使用句号和连字符。

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

The parameters (10,10in this example) are the length,gap and you can iterate that as much as you want. Like 5, 5, 1, 5would be shorter dashes with dots.

参数（10,10在本例中）是长度、间隙，您可以根据需要对其进行迭代。就像5, 5, 1, 5是带点的更短的破折号。

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

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