我正在使用raphaelJS开展一个项目,我试图在拱门的两端绘制箭头,而我有拱形,但是很难得到箭头。< / p>
提前感谢任何输入!
问题:如何在弯曲的raphael线末端绘制箭头?
正文标记
<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;
}