Raphaël—JavaScript Library
来源:互联网 发布:软件系统详细设计方案 编辑:程序博客网 时间:2024/05/21 17:32
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 tothis canvas.
Parameters
- container HTMLElement or string
- width 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 axis
- 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
- Xtimes number Amount to scale horizontally
- 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
- 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
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
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 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 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
- x number X coordinate of the centre
- y 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 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, 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 centre
- y 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 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, 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 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
- params object Attributes for the resulting path as described in the
attr
reference. - 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 coordinate
- 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
- x number X coordinate
- 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
- x number
- y 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 number
- y1 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 number
- y1 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 number
- 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
- width number new width of the canvas
- height 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 ifyou want to draw inside iframe
Parameters
- window object
getColor
Returns a colour object for the next colour in spectrum
Parameters
- 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
- Raphaël—JavaScript Library
- Raphaël —— JavaScript 库
- Javascript图形处理库 -- Raphaël
- Raphaël 学习
- Raphaël 简单Demo
- Raphaël 编写的Bar Chart
- Raphaël学习笔记一
- Raphaël 基于html5绘制web图形的javascript插件
- Raphaël Raphael.js 中文帮助文档,SVG、VML、Javascript矢量库(Raphael Reference API)
- Ext JS + jQTouch + Raphaël = Sencha
- Ext JS + jQTouch + Raphaël = Sencha
- Ext JS + jQTouch + Raphaël = Sencha
- JSConf 2010 (三):Raphaël、优化前端性能
- Raphaël向量化的图形JS插件
- Raphaël Reference 中文帮助文档(API)
- 数据可视化----Flotr2和Raphaël 绘制气泡图
- Raphaël Reference 中文帮助文档(API)
- 使用Raphaël.js实现心形函数
- linux c 编程开发BT下载软件
- Groovy in Linux(redhat/CentOs/Debian)
- 什么服务可以利用移动的优点
- Oracle lag()/lead() over()分析函数
- jsp的内置对象
- Raphaël—JavaScript Library
- 弹出缓冲层
- in和exists的区别与SQL执行效率分析
- try catch 用法
- texlive 2008安转使用
- JAVA计算年/周的问题
- 搞笑一下
- 关于Lotus调用microsoft office时,不能调用问题
- 4月编程语言排行榜