From 68cabfae05a3f06e25f7bd00b9314e58edb0eb15 Mon Sep 17 00:00:00 2001 From: Dmitry Baranovskiy Date: Wed, 3 Aug 2011 15:42:10 +1000 Subject: [PATCH] Documentation fixes --- raphael.svg.js | 1 - reference.html | 134 +++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 107 insertions(+), 28 deletions(-) diff --git a/raphael.svg.js b/raphael.svg.js index 320e476..5737da4 100644 --- a/raphael.svg.js +++ b/raphael.svg.js @@ -20,7 +20,6 @@ window.Raphael.svg && function (R) { eve = R.eve, E = "", S = " "; - // SVG var xlink = "http://www.w3.org/1999/xlink", markers = { block: "M5,0 0,2.5 5,5z", diff --git a/reference.html b/reference.html index db7800f..0cc2a98 100644 --- a/reference.html +++ b/reference.html @@ -1,6 +1,6 @@ -Raphaël 2.0 Reference
  1. Animation
  2. Animation.delay()
  3. Animation.repeat()
  4. Element
  5. Element.animate()
  6. Element.animateWith()
  7. Element.attr()
  8. Element.click()
  9. Element.clone()
  10. Element.data()
  11. Element.dblclick()
  12. Element.drag()
  13. Element.getBBox()
  14. Element.getPointAtLength()
  15. Element.getSubpath()
  16. Element.getTotalLength()
  17. Element.glow()
  18. Element.hide()
  19. Element.hover()
  20. Element.id
  21. Element.insertAfter()
  22. Element.insertBefore()
  23. Element.mousedown()
  24. Element.mousemove()
  25. Element.mouseout()
  26. Element.mouseover()
  27. Element.mouseup()
  28. Element.next
  29. Element.node
  30. Element.onDragOver()
  31. Element.paper
  32. Element.pause()
  33. Element.prev
  34. Element.raphael
  35. Element.remove()
  36. Element.removeData()
  37. Element.resume()
  38. Element.rotate()
  39. Element.scale()
  40. Element.setTime()
  41. Element.show()
  42. Element.status()
  43. Element.stop()
  44. Element.toBack()
  45. Element.toFront()
  46. Element.touchcancel()
  47. Element.touchend()
  48. Element.touchmove()
  49. Element.touchstart()
  50. Element.transform()
  51. Element.translate()
  52. Element.unclick()
  53. Element.undblclick()
  54. Element.undrag()
  55. Element.unhover()
  56. Element.unmousedown()
  57. Element.unmousemove()
  58. Element.unmouseout()
  59. Element.unmouseover()
  60. Element.unmouseup()
  61. Element.untouchcancel()
  62. Element.untouchend()
  63. Element.untouchmove()
  64. Element.untouchstart()
  65. Matrix
  66. Matrix.add()
  67. Matrix.clone()
  68. Matrix.invert()
  69. Matrix.rotate()
  70. Matrix.scale()
  71. Matrix.split()
  72. Matrix.toTransformString()
  73. Matrix.translate()
  74. Matrix.x()
  75. Matrix.y()
  76. Paper
  77. Paper.bottom
  78. Paper.circle()
  79. Paper.clear()
  80. Paper.customAttributes
  81. Paper.ellipse()
  82. Paper.forEach()
  83. Paper.getById()
  84. Paper.getElementByPoint()
  85. Paper.image()
  86. Paper.path()
  87. Paper.raphael
  88. Paper.rect()
  89. Paper.remove()
  90. Paper.renderfix()
  91. Paper.safari()
  92. Paper.set()
  93. Paper.setFinish()
  94. Paper.setSize()
  95. Paper.setStart()
  96. Paper.setViewBox()
  97. Paper.text()
  98. Paper.top
  99. Raphael()
  100. Raphael.angle()
  101. Raphael.animation()
  102. Raphael.color()
  103. Raphael.deg()
  104. Raphael.easing_formulas
  105. Raphael.el
  106. Raphael.findDotsAtSegment()
  107. Raphael.fn
  108. Raphael.format()
  109. Raphael.fullfill()
  110. Raphael.getColor()
  111. Raphael.getColor.reset()
  112. Raphael.getPointAtLength()
  113. Raphael.getRGB()
  114. Raphael.getSubpath()
  115. Raphael.getTotalLength()
  116. Raphael.hsb()
  117. Raphael.hsb2rgb()
  118. Raphael.hsl()
  119. Raphael.hsl2rgb()
  120. Raphael.is()
  121. Raphael.matrix()
  122. Raphael.ninja()
  123. Raphael.parsePathString()
  124. Raphael.parseTransformString()
  125. Raphael.path2curve()
  126. Raphael.pathToRelative()
  127. Raphael.rad()
  128. Raphael.rgb()
  129. Raphael.rgb2hsb()
  130. Raphael.rgb2hsl()
  131. Raphael.setWindow()
  132. Raphael.snapTo()
  133. Raphael.st
  134. Raphael.svg
  135. Raphael.type
  136. Raphael.vml
  137. Set
  138. Set.forEach()
  139. Set.pop()
  140. Set.push()
  141. eve()
  142. eve.listeners()
  143. eve.nt()
  144. eve.on()
  145. eve.stop()
  146. eve.unbind()
  147. eve.version

Raphaël 2.0 Reference

 Animation⚓

+Raphaël 2.0 Reference
  1. Animation
  2. Animation.delay()
  3. Animation.repeat()
  4. Element
  5. Element.animate()
  6. Element.animateWith()
  7. Element.attr()
  8. Element.click()
  9. Element.clone()
  10. Element.data()
  11. Element.dblclick()
  12. Element.drag()
  13. Element.getBBox()
  14. Element.getPointAtLength()
  15. Element.getSubpath()
  16. Element.getTotalLength()
  17. Element.glow()
  18. Element.hide()
  19. Element.hover()
  20. Element.id
  21. Element.insertAfter()
  22. Element.insertBefore()
  23. Element.mousedown()
  24. Element.mousemove()
  25. Element.mouseout()
  26. Element.mouseover()
  27. Element.mouseup()
  28. Element.next
  29. Element.node
  30. Element.onDragOver()
  31. Element.paper
  32. Element.pause()
  33. Element.prev
  34. Element.raphael
  35. Element.remove()
  36. Element.removeData()
  37. Element.resume()
  38. Element.rotate()
  39. Element.scale()
  40. Element.setTime()
  41. Element.show()
  42. Element.status()
  43. Element.stop()
  44. Element.toBack()
  45. Element.toFront()
  46. Element.touchcancel()
  47. Element.touchend()
  48. Element.touchmove()
  49. Element.touchstart()
  50. Element.transform()
  51. Element.translate()
  52. Element.unclick()
  53. Element.undblclick()
  54. Element.undrag()
  55. Element.unhover()
  56. Element.unmousedown()
  57. Element.unmousemove()
  58. Element.unmouseout()
  59. Element.unmouseover()
  60. Element.unmouseup()
  61. Element.untouchcancel()
  62. Element.untouchend()
  63. Element.untouchmove()
  64. Element.untouchstart()
  65. Matrix
  66. Matrix.add()
  67. Matrix.clone()
  68. Matrix.invert()
  69. Matrix.rotate()
  70. Matrix.scale()
  71. Matrix.split()
  72. Matrix.toTransformString()
  73. Matrix.translate()
  74. Matrix.x()
  75. Matrix.y()
  76. Paper
  77. Paper.bottom
  78. Paper.circle()
  79. Paper.clear()
  80. Paper.customAttributes
  81. Paper.ellipse()
  82. Paper.forEach()
  83. Paper.getById()
  84. Paper.getElementByPoint()
  85. Paper.getFont()
  86. Paper.image()
  87. Paper.path()
  88. Paper.print()
  89. Paper.raphael
  90. Paper.rect()
  91. Paper.remove()
  92. Paper.renderfix()
  93. Paper.safari()
  94. Paper.set()
  95. Paper.setFinish()
  96. Paper.setSize()
  97. Paper.setStart()
  98. Paper.setViewBox()
  99. Paper.text()
  100. Paper.top
  101. Raphael()
  102. Raphael.angle()
  103. Raphael.animation()
  104. Raphael.color()
  105. Raphael.deg()
  106. Raphael.easing_formulas
  107. Raphael.el
  108. Raphael.findDotsAtSegment()
  109. Raphael.fn
  110. Raphael.format()
  111. Raphael.fullfill()
  112. Raphael.getColor()
  113. Raphael.getColor.reset()
  114. Raphael.getPointAtLength()
  115. Raphael.getRGB()
  116. Raphael.getSubpath()
  117. Raphael.getTotalLength()
  118. Raphael.hsb()
  119. Raphael.hsb2rgb()
  120. Raphael.hsl()
  121. Raphael.hsl2rgb()
  122. Raphael.is()
  123. Raphael.matrix()
  124. Raphael.ninja()
  125. Raphael.parsePathString()
  126. Raphael.parseTransformString()
  127. Raphael.path2curve()
  128. Raphael.pathToRelative()
  129. Raphael.rad()
  130. Raphael.registerFont()
  131. Raphael.rgb()
  132. Raphael.rgb2hsb()
  133. Raphael.rgb2hsl()
  134. Raphael.setWindow()
  135. Raphael.snapTo()
  136. Raphael.st
  137. Raphael.svg
  138. Raphael.type
  139. Raphael.vml
  140. Set
  141. Set.forEach()
  142. Set.pop()
  143. Set.push()
  144. eve()
  145. eve.listeners()
  146. eve.nt()
  147. eve.on()
  148. eve.stop()
  149. eve.unbind()
  150. eve.version

Raphaël 2.0 Reference

 Animation⚓

 Animation.delay(delay)⚓➭

Creates a copy of existing animation object with given delay.

@@ -76,7 +76,7 @@
animation object, see Raphael.animation

Returns: object original element

-

 Element.attr(…)⚓➭

+

 Element.attr(…)⚓➭

Sets the attributes of the element.

Parameters @@ -174,7 +174,7 @@ at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can o

  • hsba(•••, •••, •••, •••) — same as above, but with opacity
  • hsl(•••, •••, •••) — almost the same as hsb, see Wikipedia page
  • hsl(•••%, •••%, •••%) — same as above, but in %
    • -
  • hsla(•••, •••, •••) — same as above, but with opacity
    • +
  • hsla(•••, •••, •••, •••) — same as above, but with opacity
  • Optionally for hsb and hsl you could specify hue as a degree: “hsl(240deg, 1, .5)” or, if you want to go fancy, “hsl(240°, 1, .5)”

    •  Element.click(handler)⚓➭

    @@ -344,7 +344,7 @@ See also Element.removeData
  • colorstringglow colour, default is black
  • }

    • Returns: object Paper.set of elements that represents glow

    -

     Element.hide()⚓➭

    +

     Element.hide()⚓➭

    Makes element invisible. See Element.show.

    Returns: object Element

    @@ -369,15 +369,15 @@ See also Element.removeData
    context for hover out handler

    Returns: object Element

    -

     Element.id⚓➭

    +

     Element.id⚓➭

    number

    Unique id of the element. Especially usesful when you want to listen to events of the element, because all events are fired in format <module>.<action>.<id>. Also useful for Paper.getById method.

    -

     Element.insertAfter()⚓➭

    +

     Element.insertAfter()⚓➭

    Inserts current object after the given one.

    Returns: object Element

    -

     Element.insertBefore()⚓➭

    +

     Element.insertBefore()⚓➭

    Inserts current object before the given one.

    Returns: object Element

    @@ -431,10 +431,10 @@ because all events are fired in format <module>.<action>.<id>handler for the event

    Returns: object Element

    -

     Element.next⚓➭

    +

     Element.next⚓➭

    object

    Reference to the next element in the hierarchy.

    -

     Element.node⚓➭

    +

     Element.node⚓➭

    object

    Gives you a reference to the DOM object, so you can assign event handlers or just mess around. Note: Don’t mess with it.

    @@ -455,7 +455,7 @@ c.node.onclick = function () {
    function
    handler for event
    -

     Element.paper⚓➭

    +

     Element.paper⚓➭

    object

    Internal reference to “paper” where object drawn. Mainly for use in plugins and element extensions.

    Usage @@ -477,10 +477,10 @@ c.node.onclick = function () {

    animation object

    Returns: object original element

    -

     Element.prev⚓➭

    +

     Element.prev⚓➭

    object

    Reference to the previous element in the hierarchy.

    -

     Element.raphael⚓➭

    +

     Element.raphael⚓➭

    object

    Internal reference to Raphael object. In case it is not available.

    Usage @@ -491,7 +491,7 @@ c.node.onclick = function () { this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex}); } -

     Element.remove()⚓➭

    +

     Element.remove()⚓➭

    Removes element form the paper.

     Element.removeData([key])⚓➭

    @@ -517,7 +517,7 @@ If key is not provided, removes all the data of the element.
    animation object

    Returns: object original element

    -

     Element.rotate(deg, [cx], [cy])⚓➭

    +

     Element.rotate(deg, [cx], [cy])⚓➭

    Adds rotation by given angle around given point to the list of transformations of the element.

    @@ -538,7 +538,7 @@ transformations of the element.

    If cx & cy aren’t specified centre of the shape is used as a point of rotation.

    Returns: object Element

    -

     Element.scale(sx, sy, [cx], [cy])⚓➭

    +

     Element.scale(sx, sy, [cx], [cy])⚓➭

    Adds scale by given amount relative to given point to the list of transformations of the element.

    @@ -579,7 +579,7 @@ transformations of the element.

    On each animation frame event anim.frame.<id>, on start anim.start.<id> and on end anim.finish.<id>.

    -

     Element.show()⚓➭

    +

     Element.show()⚓➭

    Makes element visible. See Element.hide.

    Returns: object Element

    @@ -618,11 +618,11 @@ transformations of the element.
    animation object

    Returns: object original element

    -

     Element.toBack()⚓➭

    +

     Element.toBack()⚓➭

    Moves the element so it is the furthest from the viewer’s eyes, behind other elements.

    Returns: object Element

    -

     Element.toFront()⚓➭

    +

     Element.toFront()⚓➭

    Moves the element so it is the closest to the viewer’s eyes, on top of other elements.

    Returns: object Element

    @@ -666,7 +666,7 @@ transformations of the element.
    handler for the event

    Returns: object Element

    -

     Element.transform([tstr])⚓➭

    +

     Element.transform([tstr])⚓➭

    Adds transformation to the element which is separate to other attributes, i.e. translation doesn’t change x or y of the rectange. The format of transformation string is similar to the path string syntax: @@ -709,7 +709,7 @@ console.log(el.transform());

    else

    Returns: object Element

    -

     Element.translate(dx, dy)⚓➭

    +

     Element.translate(dx, dy)⚓➭

    Adds translation by given amount to the list of transformations of the element.

    Parameters @@ -998,7 +998,7 @@ console.log(el.transform()); 

    var c = paper.circle(50, 50, 40);
    -

     Paper.clear()⚓➭

    +

     Paper.clear()⚓➭

    Clears the paper, i.e. removes all the elements.

     Paper.customAttributes⚓➭

    @@ -1091,6 +1091,32 @@ c.animate({hsb: "1 0 
    paper.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});
    +

     Paper.getFont(family, [weight], [style], [stretch])⚓➭

    +

    Finds font object in the registered fonts by given parameters. You could specify only one word from the font name, like “Myriad” for “Myriad Pro”. +

    +

    Parameters +

    +
    family
    +
    string
    +
    font family name or any word from it
    +
    weight
    +
    optional
    +
    string
    +
    font weight
    +
    style
    +
    optional
    +
    string
    +
    font style
    +
    stretch
    +
    optional
    +
    string
    +
    font stretch
    +
    +

    Returns: object the font object

    +

    Usage +

    +
    paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
+

     Paper.image(src, x, y, width, height)⚓➭

    Embeds an image into the surface.

    @@ -1134,6 +1160,44 @@ Details of a path's data attribute's format are described in the // draw a diagonal line: // move to 10,10, line to 90,90 +

     Paper.print(x, y, text, font, [size], [origin], [letter_spacing])⚓➭

    +

    Creates set of shapes to represent given font at given position with given size. +Result of the method is set object (see Paper.set) which contains each letter as separate path object. +

    +

    Parameters +

    +
    x
    +
    number
    +
    x position of the text
    +
    y
    +
    number
    +
    y position of the text
    +
    text
    +
    string
    +
    text to print
    +
    font
    +
    object
    +
    font object, see Paper.getFont
    +
    size
    +
    optional
    +
    number
    +
    size of the font, default is 16
    +
    origin
    +
    optional
    +
    string
    +
    could be "baseline" or "middle", default is "middle"
    +
    letter_spacing
    +
    optional
    +
    number
    +
    number in range -1..1, default is 0
    +
    +

    Returns: object resulting set of letters

    +

    Usage +

    +
    var txt = r.print(10, 50, "print", r.getFont("Museo"), 30).attr({fill: "#fff"});
+// following line will paint first letter in red
+txt[0].attr({fill: "#f00"});
+

     Paper.raphael⚓➭

    Points to the Raphael object/function

    @@ -1168,10 +1232,10 @@ Details of a path's data attribute's format are described in the // rectangle with rounded corners var c = paper.rect(40, 40, 50, 50, 10); -

     Paper.remove()⚓➭

    +

     Paper.remove()⚓➭

    Removes the paper from the DOM.

    -

     Paper.renderfix()⚓➭

    +

     Paper.renderfix()⚓➭

    Fixes the issue of Firefox and IE9 regarding subpixel rendering. If paper is dependant on other elements after reflow it could shift half pixel which cause for lines to lost their crispness. This method fixes the issue. @@ -1538,7 +1602,7 @@ paper.arrow(10, 10,

     Raphael.format(token, …)⚓➭

    +

     Raphael.format(token, …)⚓➭

    Simple format function. Replaces construction of type “{<number>}” to the corresponding argument.

    Parameters @@ -1560,7 +1624,7 @@ paper.mystuff.star(); // this will draw a rectangular shape equivalent to "M10,20h40v50h-40z" paper.path(Raphael.format("M{1},{2}h{3}v{4}h{5}z", x, y, width, height, -width)); -

     Raphael.fullfill(token, json)⚓➭

    +

     Raphael.fullfill(token, json)⚓➭

    A little bit more advanced format function than Raphael.format. Replaces construction of type “{<name>}” to the corresponding argument.

    Parameters @@ -1783,7 +1847,7 @@ Returns matrix based on given parameters.

     

    Returns: object Matrix

    -

     Raphael.ninja()⚓➭

    +

     Raphael.ninja()⚓➭

    If you want to leave no trace of Raphaël (Well, Raphaël creates only one global variable Raphael, but anyway.) You can use ninja method. Beware, that in this case plugins could stop working, because they are depending on global variable existance.

    @@ -1849,6 +1913,22 @@ Converts path to relative form
    angle in degrees

    Returns: number angle in radians.

    +

     Raphael.registerFont(font)⚓➭

    +

    Adds given font to the registered set of fonts for Raphaël. Should be used as an internal call from within Cufón’s font file. +Returns original parameter, so it could be used with chaining. +

    +More about Cufón and how to convert your font form TTF, OTF, etc to JavaScript file. +

    Parameters +

    +
    font
    +
    object
    +
    the font to register
    +
    +

    Returns: object the font you passed in

    +

    Usage +

    +
    Cufon.registerFont(Raphael.registerFont({…}));
+

     Raphael.rgb(r, g, b)⚓➭

    Converts RGB values to hex representation of the colour.

    @@ -1931,7 +2011,7 @@ Converts path to relative form
    tolerance for snapping. Default is 10.

    Returns: number adjusted value.

    -

     Raphael.st⚓➭

    +

     Raphael.st⚓➭

    object

    You can add your own method to elements and sets. It is wise to add a set method for each element method you added, so you will be able to call the same method on sets too. See also Raphael.el. -- 2.39.2