RaphaelJS API NOTE – 应用渐变

Raphaël支持对元素应用线性和径向渐变效果。 为了达成这个效果,不是在 fill 属性上指定一个颜色字符串,而是指定一组颜色字符串的形式。下面的代码是用来创建线性渐变:

// 角度-色值[-色值[:偏移]]-色值
<angle>-<color>[-<color>[:<offset>]]*-<color>

下面这段则是创建径向渐变的语法:

// r[(x坐标, y坐标)]色值[-色值[:偏移]]-色值
r[(<fx>, <fy>)]<color>[-<color>[:<offset>]]*-<color>

线性渐变

最基本线性渐变的语法格式是:

<angle>-<color1>-<color2>

下面是一段基本的线性渐变的代码:

var rect = paper.rect(20, 20, 160, 160);

rect.attr({
    'stroke-width': 0,
    fill: '0-#f00-#000'
});

第一个值0代表0度(也就是水平的线性渐变),第一个色值#f00代表开始位置的颜色(红色),第二个色值#000代表结束位置的颜色(黑色)。这段代码的效果就是这个正方形,将在水平方向实现红色到黑色的线性渐变色填充颜色,效果如下:

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/linear-gradients-basic.html

需要说明的是这里的角度是沿 X 轴逆时针方向的夹角,下面我调整上面的示例代码为45度:

var square = paper.rect(20, 20, 200, 200);

square.attr({
    'stroke-width': 0,
    fill: '45-#f00-#000'
});

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/linear-gradients-set-degree.html

线性渐变可以由任意数量的颜色和点数组成颜色组,点数表示的是渐变的偏移(百分比)。 语法如下:

[-<color>[:<offset>]]

下面是一个多个色值区间的线性渐变的例子:

var rectangle = canvas.rect(20, 20, 200, 200);

rectangle.attr({
    'stroke-width': 0,
    fill: '0-#00a9e0-#323490:20-#ea1688:40-#eb2e2e:60-#fde92d:80-#009e54'
});

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/linear-gradients-multiple.html

如果每个色值的区间百分比都是一样的,可以省略偏移的值,Raphaël可以自动处理。例如上面的示例可以这么写:

rectangle.attr({
    'stroke-width': 0,
    fill: '0-#00a9e0-#323490-#ea1688-#eb2e2e-#fde92d-#009e54'
});

径向渐变

径向渐变类似于线性渐变,只是它是径向绘制的,从一个元素上的一个点(默认是一个元素的中心点)向外扩散的。

最基本径向渐变的语法格式是:

r<color>-<color>

下面是一段基本的线性渐变的代码:

var circle = paper.circle(200, 120, 100);

circle.attr({
    'stroke-width': 0,
    fill: 'r#fff-000'
});

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/radial-gradients-basic.html

当然我们可以调整起始点的位置:

var circle1 = svg.circle(70, 100, 50);

circle1.attr({
    'stroke-width': 0,
    fill: 'r(0.1,0.5)#fff-000'
});

var circle2 = svg.circle(140, 100, 50);

circle2.attr({
    'stroke-width': 0,
    fill: 'r(0.5,0.1)#fff-000'
});

var circle3 = svg.circle(260, 100, 50);

circle3.attr({
    'stroke-width': 0,
    fill: 'r(0.9,0.5)#fff-000'
});

var circle4 = svg.circle(380, 100, 50);

circle4.attr({
    'stroke-width': 0,
    fill: 'r(0.5,0.9)#fff-000'
});

渐变点的偏移值大小在0-1之间,相当于点在元素中的位置的百分比。

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/radial-gradients-set-point.html

SHARE THIS PAGE

免责声明:本站文章中的观点都是作者个人观点,并没有以任何方式反映他所属机构的意见。

发表评论