Requires

Provides

Arrow.js

An arrow shape. Useful for all the chat bubbles and validation errors.

License:
Public domain (http://unlicense.org).
Authors:
Yaroslaff Fedin
  1. 21
  2. 22
  3. 23
  4. 24
  5. 25
  6. 26
  7. 27
  8. 28
  9. 29
  10. 30
  11. 31
  12. 32
  13. 33
  14. 34
  15. 35
  16. 36
  17. 37
  18. 38
  19. 39
  20. 40
  21. 41
  22. 42
  23. 43
  24. 44
  25. 45
  26. 46
  27. 47
  28. 48
  29. 49
  30. 50
  31. 51
  32. 52
  33. 53
  34. 54
  35. 55
  36. 56
  37. 57
  38. 58
  39. 59
  40. 60
  41. 61
  42. 62
ART.Shape.Arrow = new Class({ Extends: ART.Shape, properties: ['width', 'height', 'radius', 'arrowWidth', 'arrowHeight', 'arrowSide', 'arrowPosition', 'arrowX', 'arrowY'], draw: function(width, height, radius, aw, ah, as, ap, ax, ay){ var path = new ART.Path; if (!radius) radius = 0; if (typeof radius == 'number') radius = [radius, radius, radius, radius]; var tl = radius[0], tr = radius[1], br = radius[2], bl = radius[3]; if (tl < 0) tl = 0; if (tr < 0) tr = 0; if (bl < 0) bl = 0; if (br < 0) br = 0; var sides = { top: Math.abs(width) - (tr + tl), right: Math.abs(height) - (tr + br), bottom: Math.abs(width) - (br + bl), left: Math.abs(height) - (bl + tl) }; switch (as){ case 'top': path.move(0, ah); break; case 'left': path.move(ah, 0); break; } path.move(0, tl); if (typeof ap == 'string') ap = ((sides[as] - aw) * (ap.toFloat() / 100)); if (ap < 0) ap = 0; else if (ap > sides[as] - aw) ap = sides[as] - aw; var ae = sides[as] - ap - aw, aw2 = aw / 2; if (width < 0) path.move(width, 0); if (height < 0) path.move(0, height);

top

  1. 66
  2. 67
  3. 68
if (tl > 0) path.arc(tl, -tl); if (as == 'top') path.line(ap, 0).line(aw2, -ah).line(aw2, ah).line(ae, 0); else path.line(sides.top, 0);

right

  1. 72
  2. 73
  3. 74
if (tr > 0) path.arc(tr, tr); if (as == 'right') path.line(0, ap).line(ah, aw2).line(-ah, aw2).line(0, ae); else path.line(0, sides.right);

bottom

  1. 78
  2. 79
  3. 80
if (br > 0) path.arc(-br, br); if (as == 'bottom') path.line(-ap, 0).line(-aw2, ah).line(-aw2, -ah).line(-ae, 0); else path.line(-sides.bottom, 0);

left

  1. 84
  2. 85
  3. 86
  4. 87
  5. 88
  6. 89
  7. 90
  8. 91
  9. 92
  10. 93
  11. 94
  12. 95
  13. 96
  14. 97
  15. 98
  16. 99
  17. 100
  18. 101
  19. 102
  20. 103
  21. 104
if (bl > 0) path.arc(-bl, -bl); if (as == 'left') path.line(0, -ap).line(-ah, -aw2).line(ah, -aw2).line(0, -ae); else path.line(0, -sides.left); return this.parent(path); }, getOffset: function(styles) { return { left: (styles.arrowSide == 'left') ? styles.arrowWidth : 0, right: (styles.arrowSide == 'right') ? styles.arrowWidth : 0, top: (styles.arrowSide == 'top') ? styles.arrowHeight : 0, bottom: (styles.arrowSide == 'bottom') ? styles.arrowHeight : 0 } }, render: function(context) { return this.draw(context.size.width, context.size.height, context.radius) } });