This_Wei

Come on!

Raphael 元素属性

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
let paper = Raphael('view', 800, 480);
paper.circle(50, 50, 30);
// 填充颜色及轮廓
paper.circle(150, 50, 30).attr('fill', 'red').attr('stroke', 'blue');
paper.circle(250, 50, 30).attr({fill: 'red', stroke: 'blue'});
paper.circle(350, 50, 30).attr({fill: 'red', 'fill-opacity': 0.5, stroke: 'blue'});
paper.circle(450, 50, 30).attr({stroke: 'blue', 'stroke-width': '5px', 'stroke-opacity': 0.5});
paper.circle(550, 50, 30).attr({r: 40});
// 虚线轮廓
paper.circle(650, 50, 30).attr({'stroke-dasharray': '-'});
paper.circle(750, 50, 30).attr({'stroke-dasharray': '.'});
paper.circle(50, 150, 30).attr({'stroke-dasharray': '-.'});
paper.circle(150, 150, 30).attr({'stroke-dasharray': '-..'});
paper.circle(250, 150, 30).attr({'stroke-dasharray': '. '});
paper.circle(350, 150, 30).attr({'stroke-dasharray': '- '});
paper.circle(450, 150, 30).attr({'stroke-dasharray': '--'});
paper.circle(550, 150, 30).attr({'stroke-dasharray': '- .'});
paper.circle(650, 150, 30).attr({'stroke-dasharray': '--.'});
paper.circle(750, 150, 30).attr({'stroke-dasharray': '--..'});
// 路径箭头
paper.path('M20,220L80,250').attr('arrow-end','classic-wide-long');
paper.path('M120,220L180,250').attr('arrow-end','block-wide-long');
paper.path('M220,220L280,250').attr('arrow-end','open-wide-long');
paper.path('M320,220L380,250').attr('arrow-end','oval-wide-long');
paper.path('M420,220L480,250').attr('arrow-end','diamond-wide-long');
paper.path('M520,220L580,250').attr('arrow-end','classic-narrow-long');
paper.path('M620,220L680,250').attr('arrow-end','classic-medium-long');
paper.path('M720,220L780,250').attr('arrow-end','classic-wide-midium');
paper.path('M20,290L80,320').attr('arrow-start','classic-wide-long');
paper.path('M120,290L180,320').attr('arrow-start','block-wide-long');
paper.path('M220,290L280,320').attr('arrow-start','open-wide-long');
paper.path('M320,290L380,320').attr('arrow-start','oval-wide-long');
paper.path('M420,290L480,320').attr('arrow-start','classic-wide-long').attr('arrow-end','classic-wide-long');
paper.path('M520,290L580,320').attr('arrow-start','oval-wide-long').attr('arrow-end','classic-wide-long');
paper.path('M620,290L680,320').attr('arrow-start','diamond-wide-long').attr('arrow-end','classic-wide-long');
paper.path('M720,290L780,320').attr('arrow-start','oval-wide-midium').attr('arrow-end','classic-wide-long');
// 文本位置、尺寸及粗细
paper.rect(20, 360, 60, 30);
paper.text(50, 375, "Text")
paper.rect(120, 360, 60, 30);
paper.text(150, 375, "Text").attr('text-anchor', 'start');
paper.rect(220, 360, 60, 30);
paper.text(250, 375, "Text").attr('text-anchor', 'middle');
paper.rect(320, 360, 60, 30);
paper.text(350, 375, "Text").attr('text-anchor', 'end');
paper.rect(420, 360, 60, 30);
paper.text(450, 375, "Text").attr('font-size', '18px');
paper.rect(520, 360, 60, 30);
paper.text(550, 375, "Text").attr('font-weight', 'bold');
paper.rect(620, 360, 60, 30);
paper.text(650, 375, "Text").attr('font-weight', 'bolder');
paper.rect(720, 360, 60, 30);
paper.text(750, 375, "Text").attr('font-weight', 'lighter');
// 字体、样式及链接
paper.rect(20, 430, 60, 30);
paper.text(50, 445, "Text").attr('font','10px "Bookman Old Style"')
paper.rect(120, 430, 60, 30);
paper.text(150, 445, "Text").attr('font-family', 'Comic Sans MS');
paper.rect(220, 430, 60, 30);
paper.text(250, 445, "Text").attr('font-style', 'normal');
paper.rect(320, 430, 60, 30);
paper.text(350, 445, "Text").attr('font-style', 'italic');
paper.rect(420, 430, 60, 30);
paper.text(450, 445, "Text").attr('font-style', 'oblique');
paper.rect(520, 430, 60, 30);
paper.text(550, 445, "Text").attr('font-style', 'inherit');
paper.rect(620, 430, 60, 30);
paper.text(650, 445, "Link").attr('href', 'index.html');
paper.rect(720, 430, 60, 30);
paper.text(750, 445, "Link").attr('href', 'index.html').attr('target','new');

结果

0%