菜单

Raphaël 中文参考

2018年1月11日 - 技术文章

Raphaël 中文参考

1. 动画

1.1 Animation.delay(delay) ➭

创建现有的动画对象的副本,并指定延迟时间。

参数
delay 数字 动画开始和实际动画之间的毫秒数
返回: 对象 新的动画对象
var anim = Raphael.animation({cx: 10, cy: 20}, 2e3);
circle1.animate(anim); // run the given animation immediately
circle2.animate(anim.delay(500)); // run the given animation after 500 ms
1.2 Animation.repeat(repeat) ➭

创建现有动画对象的副本,并指定重复频率。

参数
repeat 数字 动画迭代次数。0 为无限
返回: 对象 新的动画对象

2. 元素

2.1 Element.animate(…) ➭

为指定元素创建动画,并播放。

参数
params 对象 元素的最终属性,见Element.attr
ms 数字 动画持续时间(毫秒)
easing 字符串 曲线类型。接受Raphael.easing_formulas 其中之一或CSS格式:
cubic-bezier(XX, XX, XX, XX)
callback 函数 回调函数。动画结束时将被调用。
animation 对象 动画对象,见Raphael.animation
返回: 对象 原始元素
2.2 Element.animateWith(…) ➭

作用与Element.animate 类似,但保证动画与另一元素的同步播放。

参数
el 对象 要同步的元素
anim 对象 要同步的动画
params 对象 元素的最终属性,见Element.attr
ms 数字 动画持续时间(毫秒)
easing 字符串 曲线类型。接受Raphael.easing_formulas 其中之一或CSS格式:
cubic-bezier(XX, XX, XX, XX)
callback 函数 回调函数。动画结束时将被调用。
animation 对象 动画对象,见Raphael.animation
返回: 对象 原始元素
2.3 Element.attr(…) ➭

设置元素的属性。

参数
attrName 字符串 属性名称
value 字符串
返回: 对象Element ,如果传入attrsName 和value 或者params。
params 对象 名称/值对
返回: 对象属性对象,如果没有传入任何参数。
attrName 字符串 属性名称
返回: …属性的值,如果只有attrsName 被传入。
attrNames 数组 属性名称
返回: 数组属性值的数组,如果attrsNames 被传入。

可能的参数
请参阅解释这些参数的SVG 规范


线性渐变

线性渐变的格式:“‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”,例如
“90-#fff-#000”90°线性渐变从白色到黑色;“0-#fff-#f00:20-#000” 0°从白色通过红
色(20%位置)渐变为黑色。
径向渐变:“r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”,例如:“r#fff-#000”
从白色到黑色;“r(0.25, 0.75)#fff-#000”从白色渐变到黑色,焦点在0.25,0.75。焦点
坐标的外围是0 .. 1。径向渐变只适用于圆形和椭圆形。

路径字符串
请参考SVG 文件路径字符串。Raphael 完全支持它。

颜色解析

颜色的名称(“red“,“green“,“cornflowerblue“等)
#•••——缩写HTML 颜色:(“#000”,“#fc0”等)
#••••••——HTML 颜色:(“#000000”,“#bd2300”)
rgb(•••, •••, •••)——红色、绿色和蓝色通道值:(“rgb(200, 100, 0)”)
rgb(•••%, •••%, •••%)——和上面一样,但是用百分比:(“rgb(100%, 175%,0%)”)
rgba(•••, •••, •••, •••)——红色、绿色、蓝色通道值:(“rgba(200, 100, 0, .5)”)
rgba(•••%, •••%, •••%, •••%)—和上面一样,但是用百分比:(“rgba(100%,175%, 0%,50%)”)
hsb(•••, •••, •••)——色相、饱和度和亮度值:(“hsb(0.5, 0.25, 1)”)
hsb(•••%, •••%, •••%) ——和上面一样,但是用百分比
hsba(•••, •••, •••, •••)——和上面一样,但是有透明度
hsl(•••, •••, •••)——基本和HSB 相同,见Wikipedia page
hsl(•••%, •••%, •••%)——和上面一样,但是用百分比
hsla(•••, •••, •••, •••)——和上面一样,但是有透明度
对于HSB 及HSL,你可以指定色相度数:“hsl(240deg, 1, .5)”,或者“hsl(240°,1, .5)”

2.4 Element.click(handler) ➭

为元素添加click 事件的处理程序。

参数
handler 函数 事件处理函数
返回: 对象元素
2.5 Element.clone() ➭
返回 对象元素
2.6 Element.data(key, [value]) ➭

添加或检索与给定的键关联的值。见Element.removeData

参数
key 字符串 数据的键
value 任何 数据的值

返回:对象元素
或者,如果该值未指定:
返回:任何值
用法:

for (var i = 0, i < 5, i++) {
    paper.circle(10 + 15 * i, 10, 10)
    .attr({fill: "#000"})
    .data("i", i)
    .click(function () {
        alert(this.data("i"));
    });
}
2.7 Element.dblclick(handler) ➭

为元素添加dblclick 事件的处理程序。

参数
handler 函数 事件处理函数

返回:对象元素

2.8 Element.drag(onmove, onstart, onend,[mcontext], [scontext], [econtext]) ➭

为元素添加drag 事件的处理程序。

参数
onmove 函数 移动处理函数
onstart 函数 拖拽开始的处理函数
onend 函数 拖拽结束处理函数
mcontext 对象 移动处理函数环境(上下文)
scontext 对象 拖拽开始处理函数环境
econtext 对象 拖拽结束处理函数环境

下面额外的拖拽事件会被触发:开始时drag.start.;结束时
drag.end.;每次移动时drag.move.。当元素被拖入了另一个元素drag.over.将被触发。
拖拽开始事件和拖拽开始处理函数将在指定的环境内调用,或在包含以下元素的环境内调用:

x 数字鼠标x 位置
. y 数字}鼠标y 位置
. event 对象DOM 事件对象

移动事件和移动处理函数将在指定的环境内调用,或在包含以下元素的环境内调用:

dx 数字相对起始点的x 位移

. dy 数字相对起始点的y 位移

. x 数字鼠标x 位置
. y 数字}鼠标y 位置
. event 对象DOM 事件对象

拖拽结束事件和拖拽结束处理函数将在指定的环境内调用,或在包含以下元素的环境内调用:

event 对象DOM 事件对象
返回:对象元素

2.9 Element.getBBox(isWithoutTransform) ➭

返回指定元素的边界框

参数
isWithoutTransform 布尔 如果你想得到变换之前的边界,使用true。默认值为false。

返回:对象边界框对象:

{
    x     : 数字左上角x,
    y     : 数字左上角y,
    x2    : 数字右下角x,
    y2    : 数字右下角y,
    width : 数字宽,
    height: 数字高
}
2.10 Element.getPointAtLength(length) ➭

返回在指定路径上指定长度的坐标点。只适用于“路径”类型的元素。

参数
length 数字

返回:对象点:

{
    x    : 数字x 坐标,
    y    : 数字y 坐标,
    alpha: 数字导数(切线)的角度
}
2.11 Element.getSubpath(from, to) ➭

返回在指定路径上指定长度定子路径。只适用于“路径”类型的元素。

参数
from 数字 片段开始位置
to 数字 片段结束的位置
返回: 字符串 路径字符串
2.12 Element.getTotalLength() ➭

返回路径的长度,以像素为单位。只适用于“路径”类型的元素。
返回:数字长度。

2.13 Element.glow([glow]) ➭

为指定元素添加类似光晕的效果,返回创建的光晕元素组。见Paper.set.
注:光晕不与元素关联。如果你改变元素的属性,它并不会自我调整。

发表评论

电子邮件地址不会被公开。 必填项已用*标注