javascript - 如何在 raphaeljs 中使用 attr 的 stroke-dasharray,stroke-linecap,stroke-linejoin

Question

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

Answer 1

Phrogz 的回答非常适合纯 SVG，但这个问题也被标记为 Raphael，两者相似但略有不同。拉斐尔笔画设置的好例子不多，所以这里有一个完整的现场演示。

它有示例记录如何使用 stroke-dasharray(点线和虚线)、stroke-linejoin(笔划 Angular 样式)和 stroke-linecap (路径笔划帽样式)在 Raphael.js 中。

Link to jsfiddle live demo

---

将 .attr({'stroke-dasharray': option}) 用于拉斐尔中的点线/虚线，使用这些选项之一(没有数字, 不同于纯 SVG):

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

---

使用 .attr({'stroke-linejoin': option}) 为 Raphael 中的圆 Angular 、斜 Angular 或尖 Angular (mitre)(与 SVG 相同)除了继承):

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

您还可以设置 .attr({'stroke-miterlimit': decimal})，它根据笔划宽度和斜接(尖锐)连接所超出的 Angular 来控制截止点变钝了。 Same as SVG stroke-miterlimit so SVG docs apply .可以在上面的 jsfiddle 中看到跨浏览器的变化(例如，在 Windows 上的 Chrome 和 Firefox 之间)

---

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

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