3

My goal is to create a curved arrow like this one, on an html5 canvas:

curved dashed arrow

I have found several resources on how to draw lines but none of them seem to work. I also found a related stackoverflow post.

Also, is it possible to animate it on hover in order to expand the arrow, using an elastic effect maybe?

Community
  • 1
  • 1
TheodoreV
  • 304
  • 4
  • 17

2 Answers2

5

Raphael and canvas both have some limitations when it comes to drawing lines in a pen-on-paper style. I've found the best way to simulate such a thing is to iteratively transform a 1-pixel path into a target path, as in this fiddle: http://jsfiddle.net/zPRha/31/ With a little work, you could calculate the angle between the last two points along the path and transform/rotate an arrow path to match the line as it is drawn. It's not an ideal solution, but it would work.

Raphael's built in hover support makes zooming/unzooming extremely easy. My understand is that such handling would be rather more obtuse using canvas natively, though I'm sure some canvas libraries have automated away this concern.

Here is an updated fiddle with optional support for an arrow: http://jsfiddle.net/kevindivdbyzero/JPqXF/

Kevin Nielsen
  • 4,413
  • 21
  • 26
  • Awesome, result. Is it possible to add some text as a caption in the end of the arrow, following the movement of the it? – TheodoreV May 13 '12 at 00:50
  • I'm sure it is. I'll take a stab at it soon -- as soon as I get this deadline monkey off my back =) – Kevin Nielsen May 14 '12 at 16:43
  • 4
    This might be useful to somebody: http://jsfiddle.net/paaQj/ I spent a little bit of time tweaking Kevin's example to my liking to use in a project, but as it turns out, Adobe AIR doesn't support SVG, so therefore doesn't support Raphael. Enjoy! – Danny Beckett Aug 13 '13 at 23:28
  • @TheodoreV How did you make that arrow, or where did you find it? I'd like to use (create?) one just like that one. Can I copy and use this one? – Alisso Jul 23 '14 at 16:20
-3

I think you should use SVG with CSS3 transitions to do this kind of stuff.

Jocelyn LECOMTE
  • 875
  • 1
  • 7
  • 15
  • I have searched through the web but didn't find any samples or tutorials. Can you please provide me with any references? Thank you, Theodore – TheodoreV May 11 '12 at 18:24