009_Raphael绘制图形

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 = 40paper1.circle(60, 50, 40);// 矩形起始位置: x = 200, y = 10, w = 100, h = 80paper1.rect(120, 10, 100, 80);// 矩形圆角半径为10paper1.rect(240, 10, 100, 80, 10);// 圆心位置: x = 400, y = 50; 半径: xr = 60, yr = 40paper1.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. 效果图

009_Raphael绘制图形相关推荐

绘制多边形_XDGE_RayMarchine 1- 利用Frag Shader绘制图形
转载于小道的博客园 XDGE_RayMarchine 1- 利用Frag Shader绘制图形www.cnblogs.com # Render/RayMarchine/Base 1- 利用Frag绘 ...
【青少年编程】【二级】绘制图形
「青少年编程竞赛交流群」已成立(适合6至18周岁的青少年),公众号后台回复[Scratch]或[Python],即可进入.如果加入了之前的社群不需要重复加入. 微信后台回复"资料下载&quo ...
这么详细的Python matplotlib 绘制图形还不赶紧收藏
前言我们前面对matplotlib模块底层结构学习,对其pyplot类(脚本层)类提供的绘制折线图.柱状图.饼图.直方图等统计图表的相关方法,列举往期文章如下. 超详细的Python matplot ...
用python绘制漂亮的图形-用python绘制图形的实例详解
1.环境系统:windows10 python版本:python3.6.1 使用的库:matplotlib,numpy 2.numpy库产生随机数几种方法import numpy as npnumpy ...
python turtle库画图案-python中的turtle库绘制图形
1. 前奏: 在用turtle绘制图形时,需要安装对应python的解释器以及IDE,我安装的是pycharm,在安装完pycharm后,在pycharm安装相应库的模块,绘图可以引入turtle模块 ...
python turtle库画图案-Python如何使用turtle库绘制图形
1. 前奏: 在用turtle绘制图形时,需要安装对应python的解释器以及IDE,我安装的是pycharm,在安装完pycharm后,在pycharm安装相应库的模块,绘图可以引入turtle模块 ...
html5 绘制图形,HTML5绘制几何图形
绘制几何图形 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext(" ...
OpenCV_02 图像的基本操作：图像IO+绘制图形+像素点+属性+图像通道+色彩空间的改变
1 图像的IO操作这里我们会给大家介绍如何读取图像,如何显示图像和如何保存图像. 1.1 读取图像 API cv.imread() 参数: 要读取的图像读取方式的标志 cv.IMREAD*COLO ...
Python绘制图形之Matplotllib绘图
Python绘制图形之Matplotllib绘图目录 Python绘制图形之Matplotllib绘图一.绘制二维函数图 1.1 绘制 f(x)=sin2(x−2)e−x2 1.2 .绘制 sig ...

009_Raphael绘制图形

009_Raphael绘制图形相关推荐

最新文章

热门文章