CODEWITHSUNDEEP
javascriptcoffeescriptraphael
SJAndersonLA
SJAndersonLA

Reputation: 87

RaphaelJS - how to draw arrow-heads at the end of archs?

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.

Thanks in advance for any input!

the issue: how do you draw arrows at the end of curved raphael lines?

The Body Tag 

<html>
  <body>
    <div id="arrows"></div>
  </body>
</html>

The 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]

THE CSS 

#arrows {
  display: block;
  height: 500px;
  width: 500px;
}
#arrows circle,
#arrows path {
  stroke: #fff;
  stroke-opacity: 1;
  stroke-width: 2;
}

Upvotes: 3

Views: 4493

Answers (1)

Ian
Ian

Reputation: 13842

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' });

jsfiddle

Docs for this bit (look under attr)

raph doc

Upvotes: 7

Related Questions