Raphaël—JavaScript Library
2009-04-16 17:20
295 查看
Raphaël--一个小巧但功能强大的javascript画图库。
Main Function
Raphael
Creates a canvas object on which to draw. You must do this first, asall future calls to drawing methods from this instance will be bound to
this canvas.
Parameters
container HTMLElement or stringwidth number
height number
or
x number
y number
width number
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 eventhandlers 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
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 axisdy 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
Xtimes number Amount to scale horizontallyYtimes 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
attributeName stringvalue 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
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
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]
Attributes that can be animated
ThenewAttrsparameter accepts an object whose properties are the attributes to animate. However, not all attributes listed in the
attrmethod 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 ofother 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, behindother 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 oneUsage
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
x number X coordinate of the centrey number Y coordinate of the centre
r number radius
Usage
var c = paper.circle(10, 10, 10);
rect
Draws a rectangle.Parameters
x number X coordinate of top left cornery 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, 10, 10);
// rectangle with rounded corners
var c = paper.rect(10, 10, 100, 50, 10);
ellipse
Draws an ellipse.Parameters
x number X coordinate of the centrey number X coordinate of the centre
rx number Horisontal radius
ry number Vertical radius
Usage
var c = paper.ellipse(100, 100, 30, 40);
image
Embeds an image into the SVG/VML canvas.Parameters
src string URI of the source imagex 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, 100, 100);
set
Creates array-like object to keep and operate couple of elements atonce. 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
x number X coordinate position.y number Y coordinate position.
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 emptypathobject and to draw paths you use its built-in methods like
lineToand
curveTo. However, you can also specify a path literally by supplying the path data as a second argument.
Parameters
params object Attributes for the resulting path as described in theattrreference.
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, unlesssaid 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
x number X coordinatey 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
x number X coordinatey 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
x numbery number
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
x1 numbery1 number
x2 number
y2 number
x3 number
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
x1 numbery1 number
x2 number
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
r numberdir string Two-letter directional instruction, as described below.
Possible dir
values
luleft upldleft downruright uprdright downurup rightulup leftdrdown rightdldown leftUsage
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 methodParameters
width number new width of the canvasheight number new height of the canvas
setWindow
Should be called before main Raphael method. Sets which window shouldbe used for drawing. Default is the current one. You need to use it if
you want to draw inside
iframe
Parameters
window objectgetColor
Returns a colour object for the next colour in spectrumParameters
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 beginningSome Rights Reserved by Dmitry Baranovskiy
Font by Jos Buivenga · Logo by Wasabicube · Work at this project started as 20% time at Atlassian
相关文章推荐
- Raphaël - JavaScript Vector Library
- 【Number类型】JavaScript中的原生对象以及Microsoft AJAX Library中的相关扩展
- 在Microsoft AJAX Library下JavaScript的面向对象开发
- JavaScript MD5 Library MD5 加密库
- CAD绘图控件VectorDraw web library (javascript)发布v7.7014.0.5
- JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
- jQuery JavaScript Library v1.6.1的$(document.body).append(html)不支持ie
- Dynamices CRM JS 类库 神器 XrmServiceToolkit - A Microsoft Dynamics CRM 2011 & CRM 2013 JavaScript Library
- 【Date类型】JavaScript中的原生对象以及Microsoft AJAX Library中的相关扩展
- CAD绘图控件VectorDraw web library (javascript) v7.7010.1.0版本更新
- cookieLibrary.js 写入cookie的JavaScript代码库
- Overview of the Prototype Javascript Library(转贴)
- javascript library
- CAD绘图控件VectorDraw web library (javascript)更新至v7.7014.1.0丨75折优惠
- javascript library
- Library.JavaScript
- jQuery学习 (javascript library)
- [转]qUIpt:JavaScript Cache Library
- [置顶] 【ArcGis for javascript从零开始】之一ArcGIS API for Javascript library 3.9安装说明
- CAD绘图控件VectorDraw web library (javascript)发布v7.7014.0.5