Raphaël—JavaScript Library

原创 2009年04月16日 17:20:00


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


关于Raphael开发过程中的一些总结

依赖 jquery.js raphael.js jquery.json.js shape-path.js 调用方法 本工具的静态成员,使用'd$'或者'FinfoView'...
  • liuli283
  • liuli283
  • 2015年11月25日 19:21
  • 3003

Raphaël Reference 中文帮助文档(API)

关于 Raphael Raphael是什么? Raphael Javascript 是一个 Javascript的矢量库。 2010年6月15日,著名的JavaScrip...
  • yw1688
  • yw1688
  • 2014年02月17日 15:43
  • 1390

【第1154期】2017 年 JavaScript 发展状况回顾

前言2017年倒数第二天,本文是【第1152期】2017 JavaScript 调查报告概述的前戏。今日早读文章由@LeviDing翻译授权分享,正文从这开始~在 2017 年 JavaScript ...
  • wGL3k77y9fR1k61T1aS
  • wGL3k77y9fR1k61T1aS
  • 2017年12月30日 00:00
  • 260

Raphaël Raphael.js 中文帮助文档,SVG、VML、Javascript矢量库(Raphael Reference API)

最近迷恋网页矢量图形处理方案,仔细研究了一个很优秀的 Javascript 矢量库,很是强大。 虽然这个库很强大,但是他几乎默默无闻,而且唯一的资料,就是原作者写的英文API。 最近加班加点,终于...
  • u012063756
  • u012063756
  • 2013年09月10日 23:48
  • 1742

Raphaël —— JavaScript 库

Raphaël 是一个小型的 JavaScript 库,用来简化你在 Web 上显示矢量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。 Raphaël ['ræfeɪəl]...
  • lilin_emcc
  • lilin_emcc
  • 2013年01月04日 11:25
  • 560

流程图绘制方法

流程图绘制方法-流程图绘制方法备份Created with Raphaël 2.1.0http://www.google.comStarthttp://www.google.comMy operati...
  • dms9265
  • dms9265
  • 2017年05月31日 20:39
  • 89

Raphaël 简单Demo

使用Raphael可以画出不同的强大的图案,并有可以编写鼠标触发事件下列就是上图的javaScript,点击下面的黑色圆圈,可是使上面2个白色的圆圈消失。注:请到ttp://raphaeljs.com...
  • Vanessa219
  • Vanessa219
  • 2009年04月16日 17:17
  • 1400

Javascript图形处理库 -- Raphaël

如果要使用JS 绘制一些图形和处理一些动态图形, 比如想绘制一些流程图什么的, Raphaël是一个不错的选择。 从版权信息上看, 和大名鼎鼎的 Sencha 有一定的关系 (研发Extjs的公司)...
  • oscar999
  • oscar999
  • 2012年08月31日 13:55
  • 1713

Raphaël 编写的Bar Chart

             bar.js$(function () {    $("#data").css({        position: "absolute",        left: "-9...
  • Vanessa219
  • Vanessa219
  • 2009年04月21日 10:22
  • 1275

Raphael.js绘制循环动画

今天有人叫我帮看了一个程序; 需要实现的是点击按钮,椭圆线段的一段移动到另外一端;椭圆所关联的另一条线段路径也随之改变;再次点击按钮,效果反之; 不多说了两种代码; 第一种是我做的; ...
  • wow4464
  • wow4464
  • 2014年12月11日 11:58
  • 2304
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Raphaël—JavaScript Library
举报原因:
原因补充:

(最多只允许输入30个字)