RaphaelJS-如何在拱形末端绘制箭头？ [英] RaphaelJS - how to draw arrow-heads at the end of archs?
本文介绍了RaphaelJS-如何在拱形末端绘制箭头？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用raphaelJS进行项目，我试图在拱的两端绘制箭头，虽然我将拱放下，但是很难获得箭头。
I'm working on a project using raphaelJS, I'm trying to draw arrows at both ends of an arch and while I have the arch down, but it's hard to get arrows.
谢谢您的任何输入！
问题：如何在弧形拉斐尔线的末端绘制箭头？
- The mockup
- What I got so far, in a JS Fiddle
身体标签
<html>
<body>
<div id="arrows"></div>
</body>
</html>
Coffeescript / Javascript
window.ready = ->
$canvas = $('body').find '#arrows'
paper = Raphael $canvas[0], 500, 500
WIDTH = 500
HEIGHT = 500
center = [WIDTH / 2, HEIGHT / 2]
radius = 230
stroke = 5
paper.customAttributes.arc = (center_x, center_y, degrees, radius) ->
return unless radius
radians = (90 - degrees) * Math.PI / 180
arc_x = center_x + radius * Math.cos radians
arc_y = center_y - radius * Math.sin radians
path = [
['M', center_x, center_y - radius]
['M', center_x, center_y - radius]
['A', radius, radius, 0, +(degrees > 180), 1, arc_x, arc_y]
]
return {path}
arrow_1 = paper.path()
arrow_1.node.setAttribute 'class', 'arrow_1'
arrow_1.attr {arc: [center[0], center[1], 80, radius]}
arrow_1.rotate 80, center[1], center[0]
CSS
#arrows {
display: block;
height: 500px;
width: 500px;
}
#arrows circle,
#arrows path {
stroke: #fff;
stroke-opacity: 1;
stroke-width: 2;
}
推荐答案
如果您愿意切换对于Raphael 2.1.0，您可以简单地使用arrow-end属性。
因此，您应该添加这个...
If you are happy to switch to Raphael 2.1.0 you can simply use the arrow-end attribute. So you would add this...
arrow_1.attr({ 'arrow-end': 'classic-wide-long',
'arrow-start': 'classic-wide-long' });
此位文档（在attr下查看）
Docs for this bit (look under attr)
这篇关于RaphaelJS-如何在拱形末端绘制箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![模型](\"http://puu.sh/dn9dg/8c97418cc0.png\"){kind=link}