Rapha?l—JavaScript Library

发表于









Raphaël–一个小巧但功能强大的javascript画图库。


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



  1. container HTMLElement or string

  2. width number

  3. height number


or



  1. x number

  2. y number

  3. width number

  4. height number


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

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


var c = paper.circle(10, 10, 10); // draw a circle at coordinate 10,10 with radius of 10
c.node.onclick = function () { c.attr(“fill”, “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



  1. degree number Degree of rotation (0 – 360°)

  2. isAbsolute boolean [optional] Specifies is degree is relative to previous position (false) or is it absolute angle (true)


or



  1. degree number Degree of rotation (0 – 360°)

  2. cx number [optional] X coordinate of the origin of rotation

  3. 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



  1. dx number Pixels of translation by X axis

  2. dy number Pixels of translation by Y axis


Usage


var c = paper.circle(10, 10, 10);
c.translate(10, 10); // moves the circle down the canvas, in a diagonal line

scale


Resizes the element by the given multiplier.


Parameters



  1. Xtimes number Amount to scale horizontally

  2. Ytimes number Amount to scale vertically


Usage


var c = paper.circle(10, 10, 10);
c.scale(1.5, 1.5); // makes the circle 1.5 times larger
c.scale(.5, .75);  // makes the circle half as wide, and 75% as high

attr


Sets the attributes of elements directly.


Parameters



  1. attributeName string

  2. value string


or



  1. params object


or



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


or



  1. attributeNames array in this case method returns array of current values for given attribute names


Possible parameters


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



  • cx number

  • cy number

  • fill colour

  • fill-opacity number

  • font string

  • font-family string

  • font-size number

  • font-weight string

  • gradient object|string “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”

  • height number

  • opacity number

  • path pathString

  • r number

  • rotation number

  • rx number

  • ry number

  • scale CSV

  • src string (URL)

  • stroke colour

  • stroke-dasharray string [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “–”, “- .”, “–.”, “–..”]

  • stroke-linecap string [“butt”, “square”, “round”, “miter”]

  • stroke-linejoin string [“butt”, “square”, “round”, “miter”]

  • stroke-miterlimit number

  • stroke-opacity number

  • stroke-width number

  • translation CSV

  • width number

  • x number

  • y number


Usage


var c = paper.circle(10, 10, 10);
c.attr(“fill”, “black”);                              // using strings
c.attr({fill: “#000“, stroke: “#f00”, opacity: 0.5}); // using params object

animate


Linearly changes an attribute from its current value to its specified value in the given amount of milliseconds.


Parameters



  1. newAttrs object A parameters object of the animation results. (Not all attributes can be animated.)

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

  3. callback function [optional]


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:



  • cx number

  • cy number

  • fill colour

  • fill-opacity number

  • font-size number

  • height number

  • opacity number

  • path pathString

  • r number

  • rotation number

  • rx number

  • ry number

  • scale CSV

  • stroke colour

  • stroke-opacity number

  • stroke-width number

  • translation CSV

  • width number

  • x number

  • y number


Usage


var c = paper.circle(10, 10, 10);
c.animate({cx: 20, r: 20}, 2000);

getBBox


Returns the dimensions of an element.


Usage


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

toFront



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


Usage


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

toBack



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


Usage


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

insertBefore


Inserts current object before the given one.


Usage


var r = paper.rect(10, 10, 10, 10);
var c = paper.circle(10, 10, 10);
c.insertBefore(r);

insertAfter


Inserts current object after the given one


Usage


var r = paper.rect(10, 10, 10, 10);
var c = paper.circle(10, 10, 10);
r.insertAfter(c);

Graphic Primitives


circle


Draws a circle.


Parameters



  1. x number X coordinate of the centre

  2. y number Y coordinate of the centre

  3. r number radius


Usage


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

rect


Draws a rectangle.


Parameters



  1. x number X coordinate of top left corner

  2. y number Y coordinate of top left corner

  3. width number

  4. height number

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


Usage


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

ellipse


Draws an ellipse.


Parameters



  1. x number X coordinate of the centre

  2. y number X coordinate of the centre

  3. rx number Horisontal radius

  4. ry number Vertical radius


Usage


var c = paper.ellipse(100, 100, 30, 40);

image


Embeds an image into the SVG/VML canvas.


Parameters



  1. src string URI of the source image

  2. x number X coordinate position

  3. y number Y coordinate position

  4. width number Width of the image

  5. height number Height of the image


Usage


var c = paper.image(“apple.png”, 10, 10, 100, 100);

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));
st.push(paper.circle(30, 10, 5));
st.attr({fill: “red”});

text


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


Parameters



  1. x number X coordinate position.

  2. y number Y coordinate position.

  3. text string The text string to draw.


Usage


var t = paper.text(10, 10, “Look mom, I’m scalable!”);

path


Initialises path drawing. Typically, this function returns an empty path object and to draw paths you use its built-in methods like lineTo and curveTo. However, you can also specify a path literally by supplying the path data as a second argument.


Parameters



  1. params object Attributes for the resulting path as described in the attr reference.

  2. pathString string [optional] Path data in SVG path string format.


Usage


var c = paper.path({stroke: “#036“}).moveTo(10, 10).lineTo(50, 50); // draw a diagonal line
var c = paper.path({stroke: “#036“}, “M 10 10 L 50 50“);            // same

Path Methods


absolutely


Sets a trigger to count all following units as absolute ones, unless said otherwise. (This is on by default.)


Usage


var c = paper.path({stroke: “#036“}).absolutely()
  .moveTo(10, 10).lineTo(50, 50);

relatively



Sets a trigger to count all following units as relative ones, unless
said otherwise.


Usage


var c = paper.path({stroke: “#036“}).relatively()
  .moveTo(10, 10).lineTo(50, 50);

moveTo


Moves the drawing point to the given coordinates.


Parameters



  1. x number X coordinate

  2. y number Y coordinate


Usage


// Begins drawing the path at coordinate 10,10
var c = paper.path({stroke: “#036“}).moveTo(10, 10).lineTo(50, 50);

lineTo


Draws a straight line to the given coordinates.


Parameters



  1. x number X coordinate

  2. y number Y coordinate


Usage


// Draws a line starting from 10,10 to 50,50
var c = paper.path({stroke: “#036“}).moveTo(10, 10).lineTo(50, 50);

cplineTo


Draws a curved line to the given coordinates. The line will have horizontal anchors on start and on finish.


Parameters



  1. x number

  2. y number

  3. width number


Usage


var c = paper.path({stroke: “#036“}).moveTo(10, 10).cplineTo(50, 50);

curveTo


Draws a bicubic curve to the given coordinates.


Parameters



  1. x1 number

  2. y1 number

  3. x2 number

  4. y2 number

  5. x3 number

  6. y3 number


Usage


var c = paper.path({stroke: “#036“}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);

qcurveTo


Draws a quadratic curve to the given coordinates.


Parameters



  1. x1 number

  2. y1 number

  3. x2 number

  4. y2 number


Usage


var c = paper.path({stroke: “#036“}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);

addRoundedCorner


Draws a quarter of a circle from the current drawing point.


Parameters



  1. r number

  2. dir string Two-letter directional instruction, as described below.


Possible dir values


lu
left up
ld
left down
ru
right up
rd
right down
ur
up right
ul
up left
dr
down right
dl
down left

Usage


var c = paper.path({stroke: “#036“}).moveTo(10, 10).addRoundedCorner(10, “rd”);

andClose


Closes the path being drawn.


Usage


var c = paper.path({stroke: “#036“}).moveTo(10, 10).andClose();

setSize


If you need to change dimensions of the canvas call this method


Parameters



  1. width number new width of the canvas

  2. height number new height of the canvas


setWindow



Should be called before main Raphael method. Sets which window should
be used for drawing. Default is the current one. You need to use it if
you want to draw inside iframe


Parameters



  1. window object


getColor


Returns a colour object for the next colour in spectrum


Parameters



  1. value number brightness [optional]


Usage


var c = paper.path({stroke: Raphael.getColor()}, “M10,10L100,100“)

getColor.reset


Resets getColor function, so it will start from the beginning