Raphael JS - 如何在拱门的末端画出箭头?

时间:2014-12-09 06:11:00

标签: javascript coffeescript raphael

我正在使用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;
}

1 个答案:

答案 0 :(得分:7)

如果您乐意切换到Raphael 2.1.0,只需使用arrow-end属性即可。 所以你要添加这个......

arrow_1.attr({ 'arrow-end':   'classic-wide-long', 
               'arrow-start': 'classic-wide-long' });

jsfiddle

此位的文档(在attr下查看)

raph doc