Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
348 views
in Technique[技术] by (71.8m points)

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

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.

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.

Link to jsfiddle live demo


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

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

enter image description here


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

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

enter image description here

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)

enter image description here


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

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

enter image description here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...