DOC

RaphaelJS1

By Derek Morgan,2014-06-26 00:09
9 views 0
RaphaelJS1

     RaphaëlJavaScript Library

Main Function

    Raphael

    Creates a canvas object on which to draw. You must do this first, as all future calls to drawing

    methods from this instance will be bound to this canvas. Parameters

     container HTMLElement or string

     width number

     height number

    or

     x number

     y number

     width number

    ( height number

    or

     all array (first 3 or 4 elements in the array are equal to [containerID, width, height] or [x,

    y, width, height]. The rest are element descriptions in format {type: type, })

    Usage

    // Each of the following examples create a canvas that is 320px wide by 200px high

    // Canvas is created at the viewport’s 10,50 coordinate

    var paper =Raphael(10, 50, 320, 200);

    // Canvas is created at the top left corner of the #notepad element

    // (or its top right corner in dir="rtl" elements)

    var paper =Raphael(document.getElementById("notepad"), 320, 200);

    // Same as above

    var paper =Raphael("notepad", 320, 200);

    // Image dump

    var set =Raphael(["notepad", 320, 200, {

     type: "rect",

     x: 10,

     y: 10,

     width: 25,

     height: 25,

     stroke: "#f00"

    }, {

     type: "text",

     x: 30,

     y: 40,

     text: "Dump"

    }]);

    circle

Draws a circle.

    Parameters

     x number X coordinate of the centre

    ;; y number Y coordinate of the centre

    ;; r number radius

    Usage

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

Draws a rectangle.

    Parameters

    ;? x number X coordinate of top left corner

    ;? y number Y coordinate of top left corner

    ;, width number

    ;! height number

    ;, r number [optional] radius for rounded corners, default is 0

    Usage

    // regular rectangle

    var c =paper.rect(10, 10, 50, 50); // rectangle with rounded corners

    var c =paper.rect(40, 40, 50, 50, 10); ellipse

Draws an ellipse.

    Parameters

    ;( x number X coordinate of the centre

    ;; y number X coordinate of the centre

    ;, rx number Horisontal radius

    ?; ry number Vertical radius

    Usage

    var c =paper.ellipse(50, 50, 40, 20); image

    Embeds an image into the SVG/VML canvas. Parameters

    ?; src string URI of the source image

    ?? x number X coordinate position

    ?? y number Y coordinate position

    ?, width number Width of the image

    ?! height number Height of the image Usage

    var c =paper.image("apple.png", 10, 10, 80, 80); set

Creates array-like object to keep and operate couple of elements at once. Warning: it doesn’t

    create any elements for itself in the page.

    Usage

    var st =paper.set();

    st.push(

     paper.circle(10, 10, 5),

     paper.circle(30, 10, 5)

    );

    st.attr({fill: "red"});

    text

    Raphaëlkicksbutt!

    Draws a text string. If you need line breaks, put ―\n‖ in the string.

Parameters

    ?, x number X coordinate position.

    ?( y number Y coordinate position.

    ?; text string The text string to draw. Usage

    var t =paper.text(50, 50, "Raphaël\nkicks\nbutt!");

    path

Creates a path element by given path data string.

    Parameters

    ?, pathString string [optional] Path data in SVG path string format. Usage

    var c =paper.path("M10 10L90 90");

    // draw a diagonal line:

    // move to 10,10, line to 90,90 clear

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

    Usage

    var c =paper.path("M10 10L90 90");

    paper.clear();

    Element’s generic methods

    Each object created on the canvas shares these same generic methods:

    node

    Gives you a reference to the DOM object, so you can assign event handlers or just mess around.

    Usage

    // draw a circle at coordinate 10,10 with radius of 10 var c =paper.circle(10, 10, 10); c.node.onclick =function () {

     c.attr("fill", "red");

    };

    paper

    Internal reference to ―paper‖ where object drawn. Mainly for use in plugins and element

    extensions.

    Usage

    Raphael.el.cross =function () {

     this.attr({fill: "red"});

     this.paper.path("M10,10L50,50M50,10L10,50")

     .attr({stroke: "red"});

    }

    remove

    Removes element from the DOM. You can’t use it after this method call. Usage

    var c =paper.circle(10, 10, 10); c.remove();

    hide

    Makes element invisible. Usage

    var c =paper.circle(10, 10, 10); c.hide();

    show

    Makes element visible.

    Usage

    var c =paper.circle(10, 10, 10); c.show();

    rotate

    Rotates the element by the given degree from its center point.

    Parameters

    ?; degree number Degree of rotation (0 360?)

    ?; isAbsolute boolean [optional] Specifies is degree is relative to previous position (false) or

    is it absolute angle (true)

    or

    ?? degree number Degree of rotation (0 360?)

    ?? cx number [optional] X coordinate of the origin of rotation

    ?, cY number [optional] Y coordinate of the origin of rotation Usage

    var c =paper.circle(10, 10, 10);

    c.rotate(45); // rotation is relative

    c.rotate(45, true); // rotation is absolute

    translate

    Moves the element around the canvas by the given distances. Parameters

    ?! dx number Pixels of translation by X axis

    ?, dy number Pixels of translation by Y axis

    Usage

    var c =paper.circle(10, 10, 10);

    // moves the circle 10 px to the right and down c.translate(10, 10);

    scale

    Resizes the element by the given multiplier.

    Parameters

    ?( Xtimes number Amount to scale horizontally

    ?; Ytimes number Amount to scale vertically

    ?, centerX number [optional] X of the center of scaling, default is the center of the element

    ,; centerY number [optional] Y of the center of scaling, default is the center of the element

    Usage

    var c =paper.circle(10, 10, 10);

    // makes the circle 1.5 times larger

    c.scale(1.5, 1.5);

    // makes the circle half as wide, and 75% as high c.scale(.5, .75);

attr

    Sets the attributes of elements directly.

    Parameters

    ,; attributeName string

    ,? value string

    or

    ,? params object

    or

    ,, attributeName string in this case method returns current value for given attribute name

    or

    ,! attributeNames array in this case method returns array of current values for given

    attribute names

    or

    no parameters, in this case object containing all attributes will be returned

    Possible parameters

    Please refer to the SVG specification for an explanation of these parameters.

     clip-rect string comma or space separated values: x, y, width and height

     cursor string CSS type of the cursor

     cx number

     cy number

     fill colour or gradient

    o linear gradient: ―‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›‖, example:

    ―90-#fff-#000‖ – 90? gradient from white to black or ―0-#fff-#f00:20-#000‖ – 0?

    gradient from white via red (at 20%) to black

    o radial gradient: ―r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›‖, example:

    ―r#fff-#000‖ – gradient from white to black or ―r(0.25, 0.75)#fff-#000‖ – gradient

    from white to black with focus point at 0.25, 0.75

    o Focus point coordinates are in 0..1 range

    o Radial gradients can only be applied to circles and ellipses

     fill-opacity number

     font string

     font-family string

     font-size number

     font-weight string

     height number

     href string URL, if specified element behaves as hyperlink

     opacity number

     path pathString SVG path string format

     r number

     rotation number

     rx number

     ry number

     scale string comma or space separated values: xtimes, ytimes, cx, cy. See: scale

     src string (URL)

     stroke colour

     stroke-dasharray string [―‖, ―-‖, ―.‖, ―-.‖, ―-..‖, ―.‖, ―-‖, ―--‖, ―- .‖, ―--.‖, ―--..‖]

     stroke-linecap string [―butt‖, ―square‖, ―round‖]

     stroke-linejoin string [―bevel‖, ―round‖, ―miter‖]

     stroke-miterlimit number

     stroke-opacity number

     stroke-width number

     target string used with href

     text-anchor string [―start‖, ―middle‖, ―end‖], default is ―middle‖

     title string will create tooltip with a given text

     translation string comma or space separated values: x and y

     width number

     x number

     y number

    Usage

    var c =paper.circle(10, 10, 10); // using strings

    c.attr("fill", "black");

    // using params object

    c.attr({fill: "#000", stroke: "#f00", opacity: 0.5}); c.attr({

     fill: "90-#fff-#000",

     "stroke-dasharray": "-..",

     "clip-rect": "10, 10, 100, 100"

    });

    animate

    Changes an attribute from its current value to its specified value in the given amount of

    milliseconds.

    Parameters

    ,, newAttrs object A parameters object of the animation results. (Not all attributes can be

    animated.)

    ,( ms number The duration of the animation, given in milliseconds.

    ,; callback function [optional]

    or

    ,, newAttrs object A parameters object of the animation results. (Not all attributes can be

    animated.)

    !; ms number The duration of the animation, given in milliseconds.

    !; easing string [―>‖, ―<‖, ―<>‖, ―backIn‖, ―backOut‖, ―bounce‖, ―elastic‖, ―cubic-bezier(p1,

    p2, p3, p4)‖] or function [optional], see explanation re cubic-bezier syntax

    !? callback function [optional]

    or

    !? keyFrames object Key-value map, where key represents keyframe timing: [―from‖,

    ―20%‖, ―to‖, ―35%‖, etc] and value is the same as newAttrs from above, except it could also

    have easing and callback properties

    !, ms number The duration of the animation, given in milliseconds.

    Look at the example of keyframes usage

    Attributes that can be animated

    The newAttrs parameter accepts an object whose properties are the attributes to animate. However,

    not all attributes listed in the attr method reference can be animated. The following is a list of

    those properties that can be animated:

     clip-rect string

     cx number

     cy number

     fill colour

     fill-opacity number

     font-size number

     height number

     opacity number

     path pathString

     r number

     rotation string

     rx number

     ry number

     scale string

     stroke colour

     stroke-opacity number

     stroke-width number

     translation string

     width number

     x number

     y number

    Easing

    For easing use built in functions or add your own by adding new functions to

    Raphael.easing_formulas object. Look at the example of easing usage.

    Usage

var c =paper.circle(10, 10, 10);

    c.animate({cx: 20, r: 20}, 2000);

    c.animate({cx: 20, r: 20}, 2000, "bounce");

    c.animate({

     "20%": {cx: 20, r: 20, easing: ">"},

     "50%": {cx: 70, r: 120, callback: function () {…}},

     "100%": {cx: 10, r: 10}

    }, 2000);

    Stop

    Stops current animation.

    Usage

    var c =paper.circle(10, 10, 10);

    c.animate({cx: 20, r: 20}, 2000);

    // stop animation half way

    setTimeout(function () { c.stop(); }, 1000);

    animateWith

    The same as animate method, but synchronise animation with another element.

    Parameters

    The same as for animate method, but first argument is an element. Usage

    var c =paper.circle(10, 10, 10),

     r =paper.rect(10, 10, 10, 10);

    c.animate({cx: 20, r: 20}, 2000);

    r.animateWith(c, {x: 20}, 2000);

    animateAlong

    Click here

    Animates element along the given path. As an option it could rotate element along the path.

    Parameters

    !! path object or string path element or path string along which the element will be animated

    !, ms number The duration of the animation, given in milliseconds.

    !( rotate boolean [optional] if true, element will be rotated along the path

    !; callback function [optional]

Report this document

For any questions or suggestions please email
cust-service@docsford.com