1. Raphael是一个用于在网页中绘制矢量图形的Javascript库。它使用SVG W3C推荐标准和VML作为创建图形的基础, 你可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表, 还可以绘制任意形状的图形, 可以进行图表或图像的裁剪和旋转等复杂操作。
2. 创建画布
2.1. 使用Raphael对象创建画布。因为这个是在浏览器视口里面来创建的, 所以画布的位置是绝对定位。
2.2. 以下创建Raphael对象的4个参数分别是x坐标、y坐标、宽度、高度。
var paper = new Raphael(x, y, width, height);
2.3. 以下创建Raphael对象的3个参数分别是html元素的id、宽度、高度。
var paper = new Raphael(element, width, height);
3. 圆
3.1. 我们可以使用circle()方法来创建一个圆形。这个方法一共有3个必须参数。3个参数按顺序分别是x坐标、y坐标和r半径。
paper.circle(x, y, r)
// 圆心位置: x = 100, y = 50; 半径: r = 40
var circle = paper.circle(60, 50, 40);
4. 矩形
4.1. 我们可以使用rect()方法来创建一个矩形。这个方法一共有4个必须参数和一个可选参数。5个参数按顺序分别是x坐标、y坐标、矩形宽度、矩形高度、圆角半径。圆角半径默认为0, 为可选参数。
paper.rect(x, y, w, h, [r])
// 矩形起始位置: x = 200, y = 10, w = 100, h = 80
var rect = paper.rect(120, 10, 100, 80);
// 矩形圆角半径为10
var rect2 = paper.rect(240, 10, 100, 80, 10);
5. 椭圆
5.1. ellipse()方法来创建一个矩形。这个方法一共有4个必须参数。4个参数按顺序分别是x坐标、y坐标、rx水平半径、垂直半径ry。水平半径和垂直半径其实就是椭圆的宽和高除以2。
paper.ellipse(x, y, xr, yr)
// 圆心位置: x = 400, y = 50; 半径: xr = 60, yr = 40
var ellipse = paper.ellipse(420, 50, 60, 40);
6. attr()方法
6.1. attr()方法是Raphael方法中最常用的方法之一, 它通过Raphael元素属性键值对作为参数来对元素进行添加或者修改属性。添加和修改可以使元素的样式, 也可以是其它物理属性, 比如: 坐标、宽高等等。
6.2. 语法如下:
element.attr({
property1: value,
property2: value
});
6.3. Raphael元素.attr({元素键值对}), 元素键值对就是json格式的数据。我们可以操作的元素属性如下所示:
7. 复杂图形
7.1. 复杂图形的创建将使用path(pathString)方法。它只有一个参数, 我们称它为pathString。看上去就是一串字母和数字的组合。其实它非常易于阅读和理解。
7.2. pathString SVG格式的路径字符串。路径字符串由一个或多个命令组成。每个命令以一个字母开始, 随后是逗号(",")分隔的参数。例如: "M10,20L30,40"。我们看到两个命令: "M"与参数(10, 20)和"L"与参数(30, 40)大写字母的意思是命令是绝对的, 小写是相对的。
7.3. 命令的简表
7.4. 在这里你可能会感觉很头大, 因为这么多命令, 还有几个挺难理解的曲线。再加上复杂图形怎么可能直接就写一串字符出来。其实不必担心, 因为复杂图形你可以使用工具来进行绘制。在矢量图制作工具中制作完成然后导出svg格式就行了。推荐使用一个叫做inkscape的矢量图制作工具。
7.5. 椭圆弧参数含义
- rx: 横轴的长度;
- ry: 纵轴的长度;
- x-axis-rotation: 椭圆的横轴与x轴的角度;
- large-arc-flag: 区分弧度的大小(0表示小角度弧度, 1表示大角度弧度);
- sweep-flag: 绘制弧度围绕椭圆中心的方向(0表示逆时针方向, 1表示顺时针方向);
- x y: 椭圆曲线终点坐标;
8. 显示文字
8.1. text(x, y, "文字内容")是用来显示文字内容的方法。语法其实很简单, 就是x,y坐标和文字内容。
9. 绘制图片
9.1. image(src, x, y, width, height)方法可以绘制图片。
10. 例子
10.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>Raphael绘制图形</title>
<script type="text/javascript" src="raphael.js"></script>
<style type="text/css">
#sample-1, #sample-2, #sample-3, #sample-4, #sample-5, #sample-6, #sample-7 {
width: 600px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<h1>绘制基本图形, 圆、椭圆和矩形。</h1>
<div id="sample-1"></div>
<script type="text/javascript">
var paper1 = Raphael("sample-1", 600, 100);
// 圆心位置: x = 100, y = 50; 半径: r = 40
paper1.circle(60, 50, 40);
// 矩形起始位置: x = 200, y = 10, w = 100, h = 80
paper1.rect(120, 10, 100, 80);
// 矩形圆角半径为10
paper1.rect(240, 10, 100, 80, 10);
// 圆心位置: x = 400, y = 50; 半径: xr = 60, yr = 40
paper1.ellipse(420, 50, 60, 40);
</script>
<h1>复杂图形-俄罗斯方块</h1>
<div id="sample-2"></div>
<script type="text/javascript">
var paper2 = Raphael("sample-2", 600, 200);
paper2.path("M 200,150 l 0,-50 l -50,0 l 0,-50 l -50,0 l 0,50 l -50,0 l 0,50 Z");
var tetronimo = paper2.path("M 500,150 l 0,-50 l -50,0 l 0,-50 l -50,0 l 0,50 l -50,0 l 0,50 Z");
tetronimo.attr({
'fill': '0-#FF0000-#0000FF',
'stroke': '#3b4449',
'stroke-width': 10,
'stroke-linejoin': 'round'
});
</script>
<h1>复杂图形-水平、垂直直线</h1>
<div id="sample-3"></div>
<script type="text/javascript">
var paper3 = Raphael("sample-3", 600, 100);
paper3.path("M 50,10 h 50 v 20 h -20 v 50 h -10 v -50 h -20 Z").attr({'fill': '90-#FF0000-#0000FF'});
paper3.path("M 150,10 H 200 V 30 H 180 V 80 H 170 V 30 H 150 Z").attr({'fill': '180-#FF0000-#0000FF'});
paper3.path("M 250,10 h 50 V 30 h -20 V 80 h -10 V 30 h -20 Z").attr({'fill': '270-#FF0000-#0000FF'});
</script>
<h1>复杂图形-曲线,平滑曲线</h1>
<div id="sample-4"></div>
<script type="text/javascript">
var paper4 = Raphael("sample-4", 600, 120);
paper4.path('M 20,20 C 50,80 150,160 180,40');
paper4.path('M 220,20 S 350,160 380,40');
</script>
<h1>复杂图形-二次贝赛尔曲线, 平滑二次贝塞尔曲线</h1>
<div id="sample-5"></div>
<script type="text/javascript">
var paper5 = Raphael("sample-5", 600, 200);
paper5.path("M 40,20 Q 100,20 100,80");
paper5.path('M 210,190 Q 290,70 360,100 T 450,10');
</script>
<h1>复杂图形-椭圆弧</h1>
<div id="sample-6"></div>
<script type="text/javascript">
var paper6 = Raphael("sample-6", 600, 350);
// 绘制左上的椭圆
paper6.ellipse(130, 40, 60, 30);
paper6.ellipse(70, 70, 60, 30);
paper6.path('M 70,40 A 60,30 0 0,0 130,70').attr('stroke','yellow');
paper6.text(40, 30, 'start(70,40)').attr({
'font-size': 11,
'fill': 'blue'
});
paper6.text(160, 80, 'end(130,70)').attr({
'font-size': 11,
'fill': 'blue'
});
paper6.text(70, 120, 'large-arc-flag=0\nsweep-flag=0').attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'middle'
});
// 绘制右上的椭圆
paper6.ellipse(330, 40, 60, 30);
paper6.ellipse(270, 70, 60, 30);
paper6.path('M 270,40 A 60,30 0 0,1 330,70').attr('stroke','yellow');
paper6.text(240, 30, 'start(270,40)').attr({
'font-size': 11,
'fill': 'blue'
});
paper6.text(360, 80, 'end(330,70)').attr({
'font-size': 11,
'fill': 'blue'
});
paper6.text(270, 120, 'large-arc-flag=0\nsweep-flag=1').attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'start'
});
// 绘制左下的椭圆
paper6.ellipse(130, 240, 60, 30);
paper6.ellipse(70, 270, 60, 30);
paper6.path('M 70,240 A 60,30 0 1,0 130,270').attr('stroke','yellow');
paper6.text(40, 230, 'start(70,240)').attr({
'font-size':11,
'fill':'blue'
});
paper6.text(160, 280, 'end(130,270)').attr({
'font-size': 11,
'fill': 'blue'
});
paper6.text(70, 320, 'large-arc-flag=1\nsweep-flag=0').attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'middle'
});
// 绘制右下的椭圆
paper6.ellipse(330, 240, 60, 30);
paper6.ellipse(270, 270, 60, 30);
paper6.path('M 270,240 A 60,30 0 1,1 330,270').attr('stroke','yellow');
paper6.text(240, 230, 'start(270,240)').attr({
'font-size': 11,
'fill': 'blue'
});
paper6.text(360, 280, 'end(330,270)').attr({
'font-size': 11,
'fill': 'blue'
});
paper6.text(270, 320, 'large-arc-flag=1\nsweep-flag=1').attr({
'font-size': 11,
'fill': 'green',
'text-anchor': 'end',
'href': 'http://www.baidu.com'
});
</script>
<h1>绘制图片</h1>
<div id="sample-7"></div>
<script type="text/javascript">
var paper7 = Raphael("sample-7", 600, 100);
paper7.image("ani_08.png", 10, 10, 70, 92);
</script>
</body>
</html>
10.2. 效果图
扫一扫
243
到【灌水乐园】发言
