Raphael Js矢量库API简介:

时间:2022-12-03 12:35:25

Raphael Js矢量库API简介:
Raphael Javascript 是一个 Javascript的矢量库。

2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQTouch,以及SVG、VML处理库Raphael合并,形成新的库Sencha。主要应对HTML5等新趋势,加强丰富图形和触摸屏功能的重要举措。

Raphael Javascript 的创始人 Dmitry Baranovskiy也加入ExtJS。

ExtJS 是一个强大的Javascript 框架,它重组件化,很容易做出强大的、可媲美客户端的界面(这个框架是收费的,所以国内用的人比jQuery少多了)。

jQTouch 是一个 jQuery 的插件,主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。

Raphael Javascript 的作者就是大名鼎鼎的前端大牛 Dmitry Baranovskiy。

他出过几道有意思的 Javascript 题目:《你真的已经搞懂JavaScript了吗?》

Raphael能做什么?
Raphael Javascript可以处理SVG、VML格式的矢量图。
它使用SVG W3C推荐标准和VML作为创建图形的基础,你可以用Javascript 操作Dom 很容易的创建出复杂的柱状图、走势图、曲线图等各种图表,可以画图,可以画出任意复杂度的图像,以及图表或图像裁剪和旋转等复杂操作。

同时它是跨浏览器的,完全支持 Internet Explorer 6.0+。
Raphael Javascript 目前支持的浏览器有:
Firefox 3.0+
Chrome 3.0+
Safari 3.0+
Opera 9.5+
Internet Explorer 6.0+
PS:新版本的遨游、QQ浏览器、TT浏览器(已经被腾讯放弃了)、猎豹浏览器、360浏览器 的内核都是 webkit( Chrome 就是Webkit ),至于别的国产浏览器,都是在Internet Explorer 外面嵌套了一层壳而已

-----------------------------------------------------------
简而言之: Raphael是一个强大易用的矢量图形JS库

------------------------- 动画 -------------------------

>> 动画 Animation ~~~动画对象的方法调用
> Animation.delay(t); 创建现有的动画对象的副本,并且可以指定延迟时间。
参数
t:number 动画延迟执行的时间,单位:毫秒ms
返回
新的动画对象
例子:
var anim = Raphael.animation({cx: 10, cy: 20}, 2e3); //调用静态方法animation创建一个动画对象 2秒内 圆心坐标移动到位置(10,20)处
var paper = Raphael(100, 100, 300, 400); //在页面位置(100,100)处,创建300*400大小的画布
//在画布位置(40, 40)处画一个半径50的圆, 并填充红色 Raphael的语法和jq十分类似,同样支持链式调用风格
var circle = paper.circle(40, 40, 50).attr("fill","red");
circle.animate(anim); //立即执行动画
circle.animate(anim.delay(500)); // 延时500毫秒执行动画

> Animation.repeat(n); 创建现有动画对象的副本,并指定重复频率。
参数
n:number 动画迭代次数。如果传入 0,表示动画会一直执行
返回
新的动画对象
例子
circle.animate(anim.repeat(2));
circle.animate(anim.delay(500).repeat(2)); //链式调用

~~~所有Element的方法默认都返回元素自身,以便链式调用。
> Element.animate(...); 为指定元素创建动画,并执行。
参数:
params:object 元素的最终属性,请参照:Element.attr
ms:number 动画持续时间,单位:毫秒ms
easing:string 缓动类型。接受Raphael.easing_formulas其中之一,或CSS格式:cubic-bezier(XX, XX, XX, XX)
callback:fn 回调函数。动画结束时将被调用。

animation:object 动画对象,请参照:Raphael.animation

返回
原始元素

> Element.animateWith(...); 作用与 Element.animate 类似,但保证动画与另一元素的同步执行。 ~~参数中需额外指定需要同步动画的原速度
参数
el:object 要同步的元素
anim: object 要同步的动画
params:
ms:
easing:
callback:

el:
anim:
animation:
返回
原始元素

> Element.pause([anim]) 暂停执行动画,稍后可以恢复执行。

> Element.resume([anim]);

> Element.setTime(anim, value) ~~~设置元素动画跳到指定时间点
以毫秒为单位给元素设置动画的状态。类似Element.status方法。
参数
anim object 动画对象
value number 动画持续的毫秒数
返回:object如果value被指定则返回原始元素

请注意,在动画过程中会触发下列事件:在每个动画帧anim.frame.<id> ,在开始时anim.start.<id>结束时anim.finish.<id> 。

> Element.status([anim], [value]);获取或设置元素的动画状态。
* Element.status(anim, value); value取值 0 - 1。如果指定,方法就像一个setter,并设置指定动画的状态为指定值。这将导致动画跳转到指定位置。
* Element.status() 返回{ anima:.., status:..}
* Element.status(value);

> Element.stop([anim]); 停止执行动画。

------------------------- 元素属性attr -------------------------

> Element.attr(...); 设置或读取元素的属性。类似 jQuery.fn.attr();
Element.attr(attrName,value);
Element.attr({attr1:v1, attr2:v2});

Element.attr(attrName);
Element.attr(attrNames); 参数为attrNames数组 则返回指定属性名的当前值组成的数组

Elment.attr(); //返回属性对象
元素的属性有以下这些:( 请参阅解释这些参数的SVG规范 。)
~~~ 位置大小
height: number 高度
width: number
x : number
y: number
r : number 圆、椭圆或圆角矩形的半径
cx : number 圆或椭圆的圆心的x轴坐标
cy : number 圆或椭圆的圆心的y轴坐标
rx : number 椭圆的横向半径
ry: number 椭圆的垂直半径

~~~ 背景描边透明度等
opacity : number 透明度
fill: string 填充。颜色、渐变或图像
fill-opacity: number 填充不透明度
stroke : string 笔触颜色
stroke-width : number 笔触宽度(像素,默认为1)
stroke-opacity: number

stroke-dasharray : string [“”, “-”, “.”, “-.”, “-..”, “.”, “- ”, “--”, “- .”, “--.”, “--..”]
stroke-linecap : string [“butt”, “square”, “round”]
stroke-linejoin : string [“bevel”, “round”, “miter”]
stroke-miterlimit : number

~~~ 图象文本超链接等
text : string 文本元素的内容。使用\n换行
text-anchor : string [“start”, “middle”, “end”],默认为 “middle”

title : string 工具提示内容
src ; string 图像的URL,只适用于Element.image元素

href : string URL。指定时,元素表现为超链接
target : string 与 href 一起使用

cursor : string 光标css类型
paths: tring SVG的路径字符串格式
transform : string 请参照:Element.transform

~~~ 字体以及其他属性
font : string 文本特性
font-family : string 字体
font-size : number 字体大小(像素)
font-weight: string 字体粗细

arrow-end : string 路径的末尾显示箭头。
clip-rect : string 剪贴矩形。逗号或空格分隔的值:x,y,宽度和高度

>> 线性渐变和径向渐变
> 线性渐变值的格式 <angle>-<color>-[<color>[:<offset>]]*-<color>
el.attr({"fill": "90-#fff-#000"}); //90°线性渐变从白色到黑色;
el.attr({"fill": "0-#fff-#f00:20-#000"}); //0°从白色通过红色(20%位置)渐变为黑色。

> 径向渐变值的格式 : r[(<fx>, <fy>)]<color>[-<color>[:<offset>]]*-<color>
~~~跟线性渐变值格式基本相同 只不过是角度变为可选的渐变起点
径向渐变只适用于圆形和椭圆形。
circle.attr({"fill": "r#fff-#000"}); //从白色到黑色;
circle.attr({"fill": "r(0.25, 0.75)#f00-#000"}); //从白色渐变到黑色,焦点在0.25,0.75。焦点坐标的外围是0 .. 1。

颜色解析
颜色名称: red,green...等
十六进制颜色值:#fc00, #fad0ea
颜色函数:
rgb(), hsb(), hsl(),三种色彩模式的函数,参数值为整数或百分比
rgba(), hsba(), hsla() 都支持透明度
例子:
rgb(200,200,10) , rgb(100%,10%,20%)
rgba(200,200,3, .5), rgba(100%, 20%, 10%, 50%)
hsb(0.5, 0.25, 1), hsb(50%, 20%, 100%)
hsba()

------------------------- 事件 -------------------------
> Element.click(handler); //handler内部 this指向元素自身,注意在这里元素和节点是不同的,它们的关系类似jQuery对象和封装的dom对象

> Element.dblclick(handler);

> Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext]);
onmove:fn 移动处理函数 函数内部可获得 dx dy x y event (位移距离deltaX deltaY 鼠标坐标 dom事件对象)
onstart:fn 拖拽开始的处理函数 函数内部可获得 x y event (鼠标坐标和dom事件对象)
onend: fn 拖拽结束处理函数 函数内部可获得 event (dom事件对象)
mcontext : object 移动处理函数环境(上下文)
scontext : object 拖拽开始处理函数环境
econtext : object 拖拽结束处理函数环境

> Element.hover(fn_in, fn_out, [icontext], [ocontext]); ~~~同 jq hover,icontext ocontext指定方法体内的上下文

> Element.mousedown(handler);

> Element.mousemove(handler);

> Element.mouseup(handler);

> Element.mouseout(handler);

> Element.mouseover(handler);

> Element.onDragOver(handler) 为元素分配drag.over.<id>事件处理程序的快捷方式,其中id是元素的id
handler 传入的第一个参数是你拖拽的元素

~~~~~ Raphael支持触屏事件

> Element.touchstart(handler)

> Elment.touchmove(handler)

> Element.touchend(handler);

> Element.touchcancel(handler);

~~~~~取消事件绑定 在原函数前加un...
> Element.unclick(handler) undblclick unhover unmousemove untouchstart untouchmove ....

> eve(name, scope, varArgs); ~~~触发事件 name 事件名称,点(.)或斜线(/)分隔; varArgs 将被发送到事件处理程序其余的参数
使用指定的name、作用域和参数触发事件。

> eve.listeners(name); 内部方法,返回监听指定name事件的回调函数组成的数组。

> eve.nt([subname]);
在事件处理程序内使用,可以获取事件的实际名称。
参数
subnamestring
事件的子名称
返回:string名称的事件,如果没有指定subname

返回:booleantrue ,如果当前事件的名称中包含subname

> eve.off(name, f); 从指定名称的事件监听器列表中删除指定的函数。

> eve.unbind(name, f) ~~~同 eve.off(name, f);

> eve.on(name, f); 为给定的名称绑定一个事件处理程序。可以在名称中使用通配符“ * “:
返回 function 返回的函数接受一个数字参数,表示处理程序的z-index。这是一个可选功能,只有当你需要使用,以确保处理程序的一些子集被设置为特定的调用顺序,而不使用指派顺序。
例子:
eve.on('*.under.*',f);
eve("mouse.under.floor"); //触发f

eve.on("mouse",eat)(2);
eve.on("mouse",scream);
eve.on("mouse", catch)(1);
这将确保catch函数将被在eat 之前调用。如果你想要把你的处理程序放在未索引的处理程序之前,指定一个负值。注:我假设大部分的时间你不需要担心的z-index,但很高兴有此功能来“以防万一”

> eve.once(name, f); 为给定的名称绑定一个一次性事件处理程序。只运行一次,然后解除本身。
返回 function ,与eve.on返回的函数类似
eve.once("login", f);
eve("login"); //触发f
eve("login"); //没有监听 不会触发f

> eve.stop(); 用于在事件处理程序内停止事件,防止触发任何后续监听器。

> eve.version(); 返回当前库的版本。
------------------------- 元素操作 -------------------------
> Element.clone(); //复制元素,画布源元素位置有个一样的副本

> Element.remove(); ~~~从画布删除元素

> Element.id 元素的唯一的ID。当你要监听元素的事件时尤其有用。因为所有的事件被以下面的格式触发:<module>.<action>.<id> 。对Paper.getById方法也有用。 ~~~元素在画布中的id?

> Element.insertAfter()

> Element.insertBefore()

> Element.isPointInside(x, y); 确定指定点在当前元素的形状内

> Element.matrix 矩阵对象,它代表元素的变换

> Element.next 返回层次结构中的下一个元素的引用。 ~~~下一个同辈元素?

> Element.prev

> Element.toBack(); 将元素向下移动。 ~~堆叠层次?

>Element.toFront();

> Element.node 返回DOM对象的引用。 ~~~类似 jQuery对象包装着dom对象,不同的是 jQuery对象默认是包装一组dom对象,而Raphael元素默认包装一个dom对象 Elenent.node.onclick = function(){ .. } 类似html Dom对象
circle.node.onclick = function(){ c.attr('fill', 'red')};

> Elment.paper 返回绘制对象的“画布”的内部引用。主要用于插件和元素扩展。
例子:
Raphael.el.cross = function(){ //Raphael.el 类似 Raphael构造函数的原型对象
this.attr({fill: 'red'});
this.paper.path('M10,10L50,50M50,10L10,50')
.attr({stroke: 'red'});
};

> Element.raphael Raphael对象的内部引用。即使它目前不可用。 ~~~对构造函数Raphael的引用?
例子:
Raphael.el.red = function(){
var hsb = this.paper.raphael.rgb2hsb(this.attr('fill'));
hsb.h = 1;
this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex });
}

>Element.getSubpath(from, to); //获取指定路径上指定长度的子路径。只适用于“路径”类型的元素。
~~~返回子路径的路径字符串

>Eelement.getTotalLength(); 返回路径的长度,以像素为单位。只适用于“路径”类型的元素。

> Element.glow([options]) 为指定元素添加类似光晕的效果,返回创建的光晕元素组。请参照:Paper.set.
注:光晕不与元素关联。如果你改变元素的属性,它并不会自我调整。
options={
width: number 光晕大小 默认10
fill: boolean 是否填充 默认false
opacity: number 透明度 默认 0.5
offsetx: number 横向偏移 0
offsety: number 垂直偏移 0
color: string 发光颜色 默认black
}

> Element.hide(); ~~ 隐藏元素 对应的方法 Element.show()

>

------------------------- 画布对象 -------------------------

> Paper.add(json); 导入JSON格式的元素。格式:{type: type, <attributes>}
例子:
var paper = Raphael(100, 100, 300, 400);
paper.add([
{type:"circle", cx:10, cy:10, r:5},
{type:"rect", x:10, y:10, width:100, height:100, fill:'green'}
]);

> Paper.bottom 指向画布上的底层元素

> Paper.top 指向画布上的顶端元素

> Paper.ca Paper.customAttributes的引用 ~~~自定义属性的引用

~~~~ 画布上绘图相关
> Paper.circle(x,y,r); ~~~圆心坐标x,y 半径
例子:
var paper = Raphael('test', 400, 400);
var c = paper.circle(100, 100, 50);

> Paper.rect(x, y, width, height, [r]) ; ~~~左上角坐标x,y 宽高 圆角半径

> Paper.ellipse(x, y, rx, ry); ~~~椭圆中心的坐标x,y 长短半径

> Paper.image(src, x, y, width, height); 在画布中插入一张图片
例子:
var p = Raphael('test2', 300, 300);
p.image('1.jpg', 20, 20, 100, 300);

> Paper.text(x, y, text); ~~~坐标x,y 处 text文字内容 返回 Raphael元素对象,类型为“文本”
绘制一个文本字符串。如果你需要换行,使用“\n”。
例子:
var t = paper.text(50, 50, 'welcome new day');
t.attr({'font-size':30, fill:'blue'});

> paper.path([pathString]); 由指定的路径字符串创建一个路径元素。
路径字符串由一个或多个命令组成。每个命令以一个字母开始,随后是逗号(“,”)分隔的参数。例如:"M10,20L30,40"
我们看到两个命令:“M”与参数(10, 20)和“L”与参数(30, 40)大写字母的意思是命令是绝对的,小写是相对的。

参照:SVG路径字符串格式 。

命令 名称 参数
M 移动到(moveTo) (x y)+
Z 闭合路径(closepath) (none)
L 直线(lineTo) (x y)+
H 水平直线 x+
V 垂直直线 y+
C 曲线(curveto) (x1 y1 x2 y2 x y)+
S 平滑曲线 (x2 y2 x y)+
Q 二次贝赛尔曲线 (x1 y1 x y)+
T 平滑二次贝塞尔曲线 (x y)+
A 椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R Catmull-Rom 曲线* x1 y1 (x y)+
* “Catmull-Rom 曲线”不是标准SVG命令,在2.0版时被加入。 注:有种特殊情况,路径只包含三个命令:“M10,10R…z”。在这种情况下,路径将平滑连接到它的起点。

> Paper.print(x, y, string, font, [size], [origin], [letter_spacing])⚓➭
创建路径,表示指定字体,指定大小,在指定位置的指定文本。该方法的结果是路径元素,它包含整个文本作为一个单独的路径。

> Paper.clear(); // 清除画布上所有元素。

> Paper.customAttributes ~~~自定义属性对象 你可以添加自定义属性来方便设置一批属性:
例子:
var paper = Raphael(10,10, 300, 300);
paper.customAttributes.hue = function(){ //~~~ hue相当于一个 setter函数
num = num % 1;
return {fill: "hsb(" + num + ",0.8,1)"};
}

var c = paper.circle(10, 10, 10).attr({hue: .45}); //~~~指定setting函数和需传入的参数

// or like this
c.animate({hue: 1}, 1e3);

自定义属性(~~~本质上为setting函数) 也可以接受多个参数
paper.custromAttributes.hsb = function(h, s, b){
return {fill: "hsb(" + [h,s,b].join(',') + ")"};
}

c.attr({hsb: "0.5 .8 1"});
c.animate({hsb: [1,0,0.3]}, 1e3); ~~~多参数时,参数以空格分隔字符串 或 数组元素的形式呈现

> Paper.forEach(callback, thisArg); thisArg为回调函数的上下文环境
为画布上每个元素执行指定函数,如果回调函数返回false则会停止循环。
例子:
var p = Raphael(20, 20, 300, 400);
p.forEach(function(el){
el.attr({stroke: 'blue'});
});

> Paper.getElementByPoint(x, y); ~~~提供相对于窗口的坐标x,y 返回位于该指定位置的最上层元素

> Paper.getElementsByPoint(x, y); 返回位于指定位置的所有元素集合 x,y是相对于窗口坐标

> Paper.getFont(family, [weight], [style], [stretch])⚓➭
根据指定的参数从注册字体中获取字体对象。您可以只指定字体名称中的一部分,像“Myriad”,“Myriad Pro”

> Paper.getById(id) 返回匹配指定id的元素

> Paper.remove(); 从DOM中删除画布

> Paper.renderfix()
修复Firefox和IE9的像素渲染的问题。如果画布依赖于其他元素,换行后,它可能会移动半像素导致线条失去细节。这个方法解决此问题。

> Paper.safari()
Safari(WebKit)有一个不方便的渲染错误:有时需要强制渲染。此方法对于处理此错误应该有帮助。

> Paper.set() ~~~创建元素集合 元素的方法都适用元素集合
创建类数组对象,保存和一次操作其中的多个元素。PS: 它不创建任何元素,只是分组已存在的元素。“集合”充当伪元素 - 所有元素可用的方法,都可以在集合上使用。
例子:
var paper = Raphael('test', 300, 300);
var set = paper.set();
set.push(
paper.circle(10, 10, 100);
paper.circle(40,40, 100);
);
set.attr({fill:'blue'}); //~~~隐式迭代

> Paper.setStart() ~~~群组元素
创建Paper.set 。调用此方法之后到调用Paper.setFinish方法之前创建的所有元素都会被添加到集合内。
例子:
paper.setStart();
paper.circle(10, 10, 100);
paper.circle(50, 50, 100);
var set = paper.setFinish();
set.attr({fill:'red'});

> Paper.setFinish()
请参照:Paper.setStart 。此方法结束捕获并返回元素集合。

> Paper.setSize(width, height); 改变画布尺寸

> Paper.setViewBox(x, y, w, h, fit) ~~~可视框(类似PHOTOSHOP导航器的红框,通过调整可视框的位置大小查看屏幕元素)的左上角坐标x,y 和宽高 fit逻辑值 是否想要图形适应新的边界框
设置画布的视框。实际上,你可以通过指定新的边界来缩放和平移整个画布。

------------------------- 数据缓存 -------------------------
> Element.data(key, [value]); 添加或检索与给定的键关联的值。请参照:Element.removeData
~~~ 类似jQuery.fn.data()方法,保存或读取数据
例子:
for(var i=0; i<5; i++){
var paper = Raphael('sample1', 200, 200);//在id=sample1的元素上 创建画布
paper.circle(10+15*i, 10, 10)
.attr({"fill": "#000"})
.data("i",i);
.click(function(){
alert(this.data("i")); //事件处理函数内部 this指向元素自身
});
}

> Element.removeData([key]); 删除元素与指定键相关联的值。如果不提供关键,则删除元素中的所有数据。

------------------------- 元素位置大小变形 -------------------------
> Element.getBBox(isWithoutTransform); 返回指定元素的边界框
isWithoutTransform : boolean 如果你想得到变换之前的边界,使用true。默认值为 false。
返回 边界对象 { x:n, y:n, x2:n, y2:n, width:n, height:n} ~~~ 左上角坐标(x,y) 右下角坐标(x2,y2) 宽 高

> Element.getPointAtLength(length); 返回在指定路径上指定长度的坐标点。只适用于“路径”类型的元素。
返回 { x:n, y:n, alpha:切线的角度} ~~~返回路径上某点的坐标 和 切线角度

~~~~ 元素变形
> Element.rotate(deg, [cx], [cy]) 建议不要使用!使用Element.transform代替。围绕指定的点旋转指定角度。
指定角度 和 旋转中心(默认 形状中心)

> Element.scale(sx, sy, [cx], [cy]); 建议不要使用。使用Element.transform代替。为元素添加缩放。
水平缩放值 垂直缩放值 缩放中心 cx,cy

> Element.translate(dx, dy); 建议不要使用。使用Element.transform代替。为元素增加平移变换。 deltaX deltaY

>>> Element.transform([tstr]);
为元素增加变换,这是独立于其他属性的变换,即变换不改变矩形的x或y。变换字符串跟路径字符串的语法类似:
"t100,100r30,100,100s2,2,100,100r45s1.5"
每个字母是一个命令。有四个命令:t是平移,r是旋转,s是缩放,m是矩阵。

也有另类的“绝对”平移、旋转和缩放:T、R和S。他们不会考虑到以前的变换。例如:...T100,0总会横向移动元素100px,而...t100,0会垂直移动如果之前有r90。比较以下r90t100,0和r90T100,0的结果。~~~ t以元素自身的坐标方向做平移 T以画布的坐标方向做平移

所以,上面的例子可以读作“平移100,100;围绕100,100旋转30°;围绕100,100缩放两倍;围绕中心旋转45°;相对中心缩放1.5倍“。正如你可以看到旋转和缩放命令的原点坐标为可选参数,默认的是该元素的中心点。

m矩阵接受六个参数。

例子:
var rt = paper.rect(10, 20, 300, 200);
rt.transform('t100,100r45t-100,0'); //参照元素自身的坐标方向 平移100,100 旋转45度 平移-100,0
rt.transform('...t50,50'); // ... 表示在之前变换基础上 追加 ~~~...表示已经执行的变换效果
rt.transform('s2...'); //之前补充变换
rt.transform('t50,50...t-50,-50'); //同时 补充和追加变换效果
rt.transform(''); //重置变换 撤销所有的变换效果
console.log(rt.transform()); //返回变换字符串分割生成的二维数组

----------------------------- 矩阵 -----------------------------

> Matrix.add(a, b, c, d, e, f, matrix) 为现有矩阵增加一个矩阵。

> Matrix.clone();

> Matrix.invert(); 返回矩阵的反转版本

> Matrix.rotate(a, x, y); 旋转矩阵

> Matrix.scale(x, [y], [cx], [cy]);

> Matrix.split(); 将矩阵分割成简单的变换
返回 对象
{
dx: number 水平平移
dy: number 垂直平移y
scalex: number 水平缩放
scaley number 垂直缩放
shear number 剪切
rotate number 旋转角度
isSimple boolean 是否可以简单变换代替
}

> Matrix.toTransformString(); 返回转换字符串

> Matrix.translate(x, y); 平移矩阵

> Matrix.x(x, y); 返回给定点在经过变换之后的x坐标。请参照:Matrix.y

> Matrix.y(x, y);

------------------------ Raphael构造函数对象 -------------------------
> Raphael(...); ~~~创建画布 用于绘图 你必须第一步就这么做,该实例将来调用的所有绘图方法都被绑定到这个画布。
Raphael(dom|id, width, height, callback) ; 在指定的html元素里创建画布 callback是创建完画布的回调函数 ,其上下文对象为新画布

Raphael(x, y, width, height, callback); 在页面指定的坐标x,y 处创建画布

Raphael( array, callback ) array前3个或4个数组元素对应 [containerID,width,height]或[x,y,width,height]。其余数组元素是元素描述{type:类型,<属性>})。请参照:Paper.add 。 ~~~~这种方法可以创建画布的同时添加元素

Raphael( onReadyCallback ); DOM ready事件回调。你也可以使用eve的“DOMLoad”事件。在这种情况下该方法将返回undefined。
例子:
var p1 = Raphael(10, 50, 320, 200);
var p2 = Raphael('id', 320, 200); ~~// (注意:当节点有属性: dir="rtl",会从右上角开始创建)
var p3 = Raphael(document.getElementById('id'), 320, 200);
var p4 = Raphael(["id", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);

> Raphael.angel(x1, y1, x2, y2, [x3], [y3]); 返回两个或三个点之间的角度 返回 角度: number

> Raphael.animation(params, ms, [easing], [callback])
创建一个动画对象可以传递给Element.animate或Element.animateWith方法。请参照:Animation.delay和Animation.repeat。

> Raphael.bezierBBox(…)
返回指定三次贝赛尔曲线的边界框

> Raphael.color(clr) 解析指定颜色字符串并返回包含全部值的颜色对象。{r:.., g:.., b:.., hex:.., error:.., h:.., s:.., v:...}

> Raphael.getColor([value]); value 为亮度值默认0.75 返回颜色的十六进制表示。
每次调用返回色谱中的下一个颜色。要重置回红色,调用Raphael.getColor.reset

> Raphael.getColor.reset()
复位色谱位置 Raphael.getColor

> Raphael.getRGB(color); 将颜色字符串解析为RGB对象 {r: ,g: ,b: ,hex: ,error:}

> Raphael.rgb(r, g, b); 将RGB值转换为十六进制颜色

> Raphael.rgb2hsb(r, g, b) 将RGB值转换为HSB对象。

> Raphael.rgb2hsl(r, g, b)将RGB值转换为HSL对象。

> Raphael.hsb(h, s, b); HSB值转换为十六进制颜色。

> Raphael.hsb2rgb(h, s, v); HSB值转换为RGB对象。

> Raphael.hsl(h, s, l); HSL值转换为十六进制颜色。

> Raphael.hsl2rgb(h, s, l); HSL值转换为RGB对象。

> Raphael.deg(deg); 弧度转角度

> Raphae.rad(deg); 角度转弧度

> Raphael.easing_formulas⚓➭
对象,其中包含动画过渡公式。你可以自己扩展。默认情况下,它含有以下过渡:

“linear”(线性)
“<”或“easeIn”或“ease-in” (由慢到快)
“>”或“easeOut”或“ease-out”(又快到慢)
“<>”或“easeInOut”或“ease-in-out”(由慢到快再到慢)
“backIn”或“back-in”(开始时回弹)
“backOut”或“back-out”(结束时回弹)
“elastic”(橡皮筋)
“bounce”(弹跳)

> Raphael.el ~~~~Element.prototype的别名?
你可以给元素添加自己的方法。当你要修改默认功能或要在一个方法中包装一些常见的变换或属性,这很有用。与画布方法不同,你可以随时重新定义元素的方法。扩展元素的方法,不会影响元素集合。
例子:
Raphael.el.red = function(){
this.attr({fill:'red'});
}

paper.circle(100,100,200).red();

> Raphael.fn ~~~~Raphael.prototype的别名?paper是构造函数Raphael的实例
你可以为画布添加你自己的方法。例如:如果你想画一个饼图,可以创建自己的饼图函数然后作为Raphael插件。要这么做,你需要扩展Raphael.fn对象。您应该在Raphael实例被创建之前修改fn对象,否则将没有任何效果。请注意:Raphael2.0移除了为插件提供命名空间的功能。应该由插件确保命名空间负责保证适当的环境的安全。
例子:
Raphael.fn.arrow = function(x1, y1, x2, y2, size){
return this.path(...);
}
//创建命名空间
Raphael.fn.mystuff = {
arrow: function(){...},
star: function(){...}
}
var paper = Raphael(10, 10, 300,300);
paper.arrow(10, 10, 30, 30, 5).attr({fill: "green"});
paper.mystuff.arrow();
paper.mystuff.star();

> Raphael.format(token, …) ~~~ 类似printf()
简单的格式化功能。将“ {<number>} “结构替换为相应的参数。
var x = 10, y=20, width=40, height=50;
// 将会绘制一个矩形,它的效果等同于: "M10,20h40v50h-40z"
paper.path("M{0},{1}h{2}v{3}h{4}z", x, y, width, height, -width);

> Raphael.fullfill(token, json)
比Raphael.format更先进一点点的格式化功能。将“ {<name>} “结构替换为相应的参数。
例子:
//将会绘制一个矩形,它的效果等同于: "M10,20h40v50h-40z"
paper.path(Raphael.fullfill("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
x: 10,
y: 20,
dim: {
width: 40,
height: 50,
"negative width": -40
}
}));
> Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)
在给定的三次贝赛尔曲线上查找给定位置的点的坐标。

> Raphael.getPointAtLength(path, length); 返回位于路径上给定长度的点的坐标。点 {x: , y: , alpha: }

> Raphael.getSubpath(path, from, to); ~~~~静态功能函数方法化 path.getSubpath(from, to);
从指定路径获取一段子路径,指定起始和结束位置。返回子路径的路径字符串

> Raphael.getTotalLength(path); ~~~同上 静态功能函数方法化为 path.getTotalLength();
返回在指定路径的长度(像素)。

> Raphael.is(o, type); 代替typeof操作符。 ~~~数据类型判断

> Raphael.isBBoxIntersect(bbox1, bbox2); 返回true ,如果两个边界框相交

> Raphael.isPointInsideBBox(bbox, x, y); 返回true,如果给定的点在边界框内。

> Raphael.isPointInsidePath(path, x, y); 返回true,如果指定的点在给定的封闭路径内。

> Raphael.mapPath(path, matrix); 用指定矩阵变换路径

> Raphael.matrix(a,b,c,d,e,f); 用指定的参数生成矩阵

> Raphael.ninja() 返回:object Raphael对象 ~~~调用该方法后 全局环境中将没有Raphael这个构造函数。
如果你不想保留Raphael的痕迹(Raphael只创建一个全局变量Raphael),可使用ninja方法。请注意,在这种情况下,插件可能会停止工作,因为它们依赖全局变量的存在。

用法
(function (local_raphael) {
var paper = local_raphael(10, 10, 320, 200);

})(Raphael.ninja());

> Raphael.parsePathString(pathString); ~~~解析路径字符串 为一个路径段数组
将指定路径字符串解析成一个数组,其中的元素是路径段数组。

> Raphael.parseTransformString(TString); ~~~解析指定路径字符串为变换数组。

> Raphael.path2curve(pathString); 将指定路径转换为新路径,新路径的所有片段都是三次贝赛尔曲线。

> Raphael.pathBBox(path); 返回指定路径的边界框

> Raphael.pathIntersection(path1, path2); 查找两条路径的交点

> Raphael.pathToRelative(pathString); 将路径转换为相对形式 路径段数组组成的数组

> Raphael.registerFont(font)
给Raphael字体注册指定字体。应当作为Cufón字体文件的内部调用。返回原来的参数,所以它可以链式操作。

> Raphael.setWindow(newwin); 需要在<iframe>绘制时使用。切换窗口为iframe。newwin为新的窗口对象

> Raphael.snapTo(values, value, tolerance); 将给定值对齐到指定网格。

> Raphael.st ~~~Set.prototype的别名? 给元素自定义方法后 最好也给集合定义一个相同方法以便直接在集合上隐式迭代
你可以为元素和集合添加自己的方法。为给元素添加的每个方法写一个集合方法是明智的,你就可以在集合上调用同样的方法。请参照:Raphael.el 。
例子:
Raphael.el.red = function(){
this.attr({fill: 'red'});
};
Raphael.st.red = function(){
this.forEach(function(el){ el.red(); });
};

paper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red();

> Raphael.svg ~~~检测浏览器是否支持svg 如果浏览器支持SVG则为true。

> Raphael.type ~~~返回Raphel用什么方式绘图 可以是“SVG”,“VML”或为空,依赖于浏览器的支持。

> Raphael.vml ~~~true,如果浏览器支持VML。ie支持vml chrome不支持

> Raphael.transformPath(path, transform); 返回指定路径经过指定变换后的路径

--------------------------- Set 集合 ----------------------------

> Set.clear(); 移除集合中的全部元素

> Set.exclude(element); 从集合中删除指定元素 返回true,如果对象存在并且 已经被删除

> Set.forEach(callback, thisArg) 为集合中的每个元素执行指定函数。如果函数返回false则停止循环运行。

> Set.pop(); ~~类似数组的方法 删除最后一个元素并返回它。

> Set.push(); 加入一个元素

> Set.splice(index, count, [insertion]); 从集合中插入/删除/替换指定元素

Raphael Js矢量库API简介:的更多相关文章

  1. Chai&period;js断言库API中文文档【转载】

    基于chai.js官方API文档翻译.仅列出BDD风格的expect/should API.TDD风格的Assert API由于不打算使用,暂时不放,后续可能会更新. BDD expect和shoul ...

  2. Chai&period;js断言库API中文文档

    基于chai.js官方API文档翻译.仅列出BDD风格的expect/should API.TDD风格的Assert API由于不打算使用,暂时不放,后续可能会更新. BDD expect和shoul ...

  3. svg绘图工具raphael&period;js的使用

    1.raphael.js svg画图的开源库,支持IE8+ 官方api: http://dmitrybaranovskiy.github.io/raphael/reference.html Githu ...

  4. 强大的矢量图形库:Raphael JS 中文帮助文档及教程

    Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...

  5. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做&lt ...

  6. Raphael:JS矢量图形库

    Raphael:JS矢量图形库 2016-08-29 http://dmitrybaranovskiy.github.io/raphael/

  7. ⏰Day&period;js 2kB超轻量时间库 和Moment&period;js一样的API

    Moment.js 是一个大而全的 JS 时间库,很大地方便了我们处理日期和时间.但是 Moment.js太重了(200k+ with locals),可能一般项目也只使用到了她几个常用的API.虽然 ...

  8. immutable&period;js 在React、Redux中的实践以及常用API简介

    immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark :  https://yq.aliyu ...

  9. 『计算机视觉』imgaug图像增强库中部分API简介

    https://github.com/aleju/imgaug 介绍一下官方demo中用到的几个变换,工程README.md已经给出了API简介,个人觉得不好理解,特此单独记录一下: import n ...

随机推荐

  1. JavaScript作用域

    JavaScript作用域 JavaScript作用域一直是前端开发的难题,现在只要用五句话就可解决. 一.“JavaScript中无块级作用域” 在Java或C#中存在块级作用域,即:大括号也是一个 ...

  2. 局部(或全局)设置&lt&semi;a&gt&semi;标签的target属性

            对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大大的提高访客的体验感.我们一般对target的设置可以挨个来,但 ...

  3. Asp&period;Net - 7&period;AJAX

    AJAX简介 没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间.每次都要刷新面的坏处:页面刷新打断用户操作.速度慢.增加服务器的流量压力.如 ...

  4. H&period;264简介

    H.264/MPEG-4 AVC (H.264) 是1995年自MPEG-2视频压缩标准发布以后最新的, 最有前途的视频压缩标准. H.264是由ITU-U和ISO/IEC联合开发组共同开发的最新国际 ...

  5. android 内存不足的问题

    FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ' ...

  6. Linux下安装MATLAB的一些注意事项

    1,下载matlab的linux版本. matlab2012a的种子文件, Matlab_Unix_2012a.torrent 我是在window机子上下载了MATLAB的Linux版本. 2,把MA ...

  7. tensorflow 使用 2 Felch &comma;Feed

    Felch ::在会话里可以执行多个 op , import tensorflow as tf input1 = tf.constant(3.0) input2 = tf.constant(2.0) ...

  8. Security&period;ssl-pinning

    SSL Pinning 1. What's SSL Pinning? "SSL Pinning is making sure the client checks the server’s c ...

  9. tomcat 下安装 MantisBT

    环境 OS:win8.1 up1 64bit tomcat :9.0.0 64bit php: php-7.1.7-nts-Win32-VC14-x64.zip postgres: postgresq ...

  10. python读取中文

    如何从文件中读取300个汉字? 看起来很简单,但很容易掉坑里了. 一开始我这么写: try: fd = codecs.open(os.path.join(settings.TEXT_CONTENT_D ...