RaphaelJS API NOTE – 元素属性

我们绘制的形状可以有 fill,strokes 和其他一些形状应用于它们的属性。 当我们创建一个形状时,一个 Element 对象被返回。这个对象有一个attr方法,它接受许多键 – 值对的属性。 在这一节我们将看看可以应用到我们的图纸的各种属性使用这种方法。

fill 属性 – 填充内容

fill 属性,填充内容的内容可以是颜色(值可以是十六进制的编码、RGB 色值或者颜色的英语单词)或者图片:

// 十六进制的编码
rectangle.attr({fill: '#000'});

// RGB 色值
square.attr({fill: 'rgb(123, 20, 0)'});

// 颜色的英语单词
circle.attr({fill: 'pink'});

// 填充图片
ellipse.attr({fill: 'url(img/freecodecamp.png)'});

说明:填充图片总是会横向和纵向的平铺。

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/attr-fill.html

stroke 属性 – 笔触

stroke 属性,元素可以有许多不同的笔触属性。 最常见的是笔画和笔画宽度属性。 笔画属性需要一个字符串值颜色符合CSS规范,而 stroke-width 是以像素为单位的数字:

circle.attr({
    fill: '#09c',
    stroke: 'limegreen',
    'stroke-width': 10,
    'stroke-dasharray': '-..',
    'stroke-linejoin':'round'
});

square.attr({
    fill: '#09c',
    stroke: 'limegreen',
    'stroke-width': 10,
    'stroke-dasharray': '-..',
    'stroke-linejoin':'round'
});

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/attr-stroke.html

href 属性 – 链接

Raphaël 允许我们为创建的 DOM 元素注册并指定一个 href 属性允许它们表现为超链接:

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

square.attr({
    fill: 'url(img/freecodecamp.png)',
    href: 'http://www.yaohaixiao.com'
});

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/attr-href.html

opacity 属性 – 不透明度

元素的不透明度可以设置为0(完全透明)和 1(完全不透明)。 我们也可以分别设置fll和stroke的不透明度使用stroke-opacity和fill-opacity属性:

var square = paper.rect(20, 20, 200, 200);
var rectangle = paper.rect(260, 60, 200, 100);

square.attr({
    stroke: 'gray',
    'stroke-width': 10,
    opacity:0.5,
    fill: 'url(img/freecodecamp.png)',
    href: 'http://www.yaohaixiao.com'
});

rectangle.attr({
    stroke: 'gray',
    'stroke-width': 10,
    'stroke-opacity':0.5,
    'fill-opacity':0.5,
    fill: 'url(img/freecodecamp.png)',
    href: 'http://www.yaohaixiao.com'
});

opacity 属性设置不透明度在单独设置 stroke-opacity 和 fill-opacity 属性的时候会出现画笔(stroke)有一半的位置是透明的,另外的一半是填充内容(fill)显示了出来,这个是要特别注意的。看例子中 rectangle 就可以看到,它的边框感觉就只有 square 的一半。

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/attr-opacity.html

clip-rect 属性 – 矩形剪辑

Raphaël使用clip-rect属性支持元素的矩形剪辑。裁剪允许只显示一个元素的一部分。

var circle = paper.circle(100, 100, 80, 80);

circle.attr({
    fill: 'pink',
    'stroke-width': 0,
    'clip-rect': '20 20 80 80'
});

上面的代码定义一个矩形裁剪区域。创建一个以点(100,100)为中心的半径为80px的圆。 剪辑属性从以下格式的空格分隔的字符串中定义一个矩形区域:效果如下:

x y width height

这样做的效果只是显示了被重叠的圆的部分矩形裁剪区域’20 20 80 80’,效果如下:

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/attr-clip-rect.html

SHARE THIS PAGE

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

发表评论