Javascript 如何使用attr'；s笔划dasharray、笔划线帽、raphaeljs中的笔划线连接

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

• 合法值：

  butt

  |

  round

  |

  square

  |

  继承

• 
  

---

• 合法值：

  斜接

  |

  圆形

  |

  斜接

  |

  继承

• 
  

---

• 合法值：逗号或空格分隔的长度或百分比列表，
  e、 g.

  “100 20 0 20”

• （使用上述值）
  

---

Phrogz的答案对于普通SVG来说非常好，但是这个问题也被标记为Raphael，在这里情况相似，但略有不同。拉斐尔的笔划设置并没有很多好的例子，所以这里有一个完整的现场演示

它的示例记录了如何在Raphael.js中使用

笔划dasharray

（虚线和虚线）、

笔划线条连接

（笔划角样式）和

笔划线条帽

（路径笔划帽样式）

---

对Raphael中的虚线/虚线使用

.attr（{'stroke-dasharray'：option}）

，使用以下选项之一（与纯SVG不同，无数字）：

---

使用

.attr（{'stroke-linejoin'：option}）

表示拉斐尔中的圆角、斜角或尖角（斜角）（与SVG相同，但继承除外）：

您还可以设置

.attr（{'stroke-miterlimit'：decimal}）

，该属性基于笔划宽度和斜接（锐利）连接钝化的角度控制截止点。这方面的跨浏览器变化可以在上面的JSFIDLE中看到（例如，在Windows上的Chrome和Firefox之间）

---

使用

.attr（{'stroke-linecap'：option}）

控制冲程拉斐尔路径末端的封口：

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

---

请注意，这个答案只涵盖了

笔划dasharray

，是对Phrogz答案的补充。
Raphael没有像用户568458所说的那样提供设置

笔划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

对象的下方文件中的上一个代码。

如果您想以标准SVG方式在Raphael line对象上应用虚线，这对我来说非常有效；然而，我并没有像拉斐尔那样幸运地使用句号和连字符

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

参数（

10,10

，在本例中）是长度、间距，您可以根据需要进行迭代。如

5、5、1、5

将是带点的短划线

---

参考资料：

您可能还感兴趣：您对“stroke dasharray”的解释虽然对SVG正确，但对Raphael却不正确。因为这个问题是拉斐尔特有的，你可能应该修改你的答案。在Raphael中，您不使用数字，如下@user568458所述。相反，拉斐尔希望虚线、点和/或空格产生不同的笔划模式。

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()});
        }
    }

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