快速上手RaphaelJS-Instant RaphaelJS Starter翻译(一)
RaphaelJS是一个矢量绘图包,用来在浏览器中绘制图形。
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Raphael Test</title></head><body><div id="my-canvas" style="width:140px;padding:0px;margin:0px;"></div><!--some html doms--><!--some scripts--><script type="text/javascript" src="../js/lib/raphael.js"></script></body> </html>
代码和原书细节可能不同,是我自己测试用例,总体按照原书来写的。
【注意这里,此书里面讲解了为什么要把引用raphael.js 放置在html元素的最下方。因为浏览器执行html的代码是顺序执行的。你如果把引用放在前面,浏览器会先加载它,导致中间有段时间页面会停滞,这里推荐你先加载dom元素再导入这个js包。】
到此位置,我们的下载和搭建就已经完成了。
在浏览器视口创建画布
创建raphael物体(对象),依赖于raphael的方法和function,如下所示:
var raphaelObj = Raphael(x,y,width,height);
Raphael function中4个参数分别是x坐标、y坐标、宽度、高度。
因为这个是在浏览器视口里面来创建的,所以画布的位置是绝对定位。因此,它会在所有html元素下面重叠。
比如:
// 在浏览器视口中创建画布
var paper = Raphael(20, 30, 650, 400);
这里的Raphael对象被初始化并且分配一个变量称为paper。这个变量被赋予RaphaelJS的所有权利。它从此以后成为Raphael画布对象。
在元素中创建Raphael对象(推荐)
要在一个元素中初始化一个Raphael对象,我们必须把这个元素的ID或者这个元素本身加入到坐标系(x,y)中。
我们举个例子:
//元素本身作为参数
//This line creates a Raphael paper inside 'my-canvas', which is 650pxin width and 400px in height
var elm= document.getElementById("my-canvas");
var paper = Raphael(elm, 650, 400);
//or
// 直接传递元素的ID作为参数
//This line also creates a Raphael paper inside 'my-canvas', which is 650px in width and 400px in height
var paper = Raphael("my-canvas", 650, 400);
这样我们就可以启动引擎开始跑了!
第二步--绘制圆形
Raphael可以绘制的基本图形有圆形、矩形和椭圆等。
圆形可以通过调用circle()来发来进行。我们使用刚才的paper对象来进行调用。
语法如下:
var cir = paper.circle(x,y,r);
// x and y are the positioning co-ordinates, and "r" is the radius of the circle
//Here the circle is assigned to a variable called cir.
//Example
var cir = paper.circle(35,25,20);
// This will create a circle of 20 pixels in radius at 35,25 (X & Y axis).
circle()方法一共3个参数,分别是x,y坐标和半径。我们在刚才的代码中添加上面的操作。
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Raphael Test</title></head><body><div id="my-canvas" style="width:140px;padding:0px;margin:0px;"></div><!--some html doms--><!--some scripts--><script type="text/javascript" src="../js/lib/raphael.js"></script><script type="text/javascript">var paper = Raphael("my-canvas", 650, 400);var cir = paper.circle(30, 30, 10);</script></body> </html>
效果如上图所示,由于没有赋予paper和cir其它属性,所以没有颜色之类的属性,我们看起来不直观。下面将介绍attr()方法。
attr() 方法
attr()方法,将我们要添加或者修改的属性作为参数,属性其实就是键值对。如果你熟悉jQuery的话,你就明白attr()的语法与jquery的完全一致。进一步讲,就是JSON格式数据。做过js的童鞋们,或多或少应该接触过JSON。没接触过的,建议去翻阅一下资料。比XML更快的数据传递方式,以后肯定会大放异彩。
语法如下:
element.attr({
"Property1":value1,
"Property2":value2
})
//加入如下属性的键值对
var coloredCircle = paper.circle(35,25,20).attr({
"fill":"#17A9C6",
"stroke":"#2A6570",
"stroke-width":2
});
刚才这个例子添加到我们的Script里面就行了,这里不再截图和添加代码了。效果是:在坐标(35,25)位置出现一个半径为20的颜色为深绿的圆(本人色弱,颜色认错大家莫怪)。
当然,还有其它非常多的属性可以添加。有兴趣大家可以自己去查阅一下资料,这里暂不提及。本书最后部分会有涉及。
下面我们要讲的部分是本书的重点,也是学习Raphael.js的重点。上面讲了那么多其实不过是三两行代码就可以搞定的事情,前提是你正确的下载了包并引用了正确的路径。接下来我们要讲的是创建、操作、转换、动画、事件响应等内容,是Raphael的核心部分,也是工作涉及到的重要部分。
你需要了解的重要特性
创建一个Raphael的元素非常容易。为了更加方便,有些已经定义好的方法供生成一些基本的几何图形。
基本图形
RaphaelJS有3个基本图形,分别是 圆、椭圆和矩形。前面已经讲过圆形,这里我就不再赘述圆形了。
矩形
我们可以使用rect()方法来创建一个矩形。这个方法一共有4个必须参数和一个可选参数。5个参数按顺序分别是x坐标、y坐标、矩形宽度、矩形高度、圆角半径。
圆角半径默认为0,为可选参数。
语法如下:
paper.rect(X,Y,Width,Height,border-radius(optional));
var rect = paper.rect(35,25,170,100).attr({
"fill":"#17A9C6", //filling with background color
"stroke":"#2A6570", // border color of the rectangle
"stroke-width":2 // the width of the border
});
var rect = paper.rect(35,25,170,100,20).attr({
"fill":"#17A9C6", //filling with background color
"stroke":"#2A6570", // border color of the rectangle
"stroke-width":2 // the width of the border
});
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Raphael Test</title></head><body><div id="my-canvas" style="width:140px;padding:0px;margin:0px;"></div><!--some html doms--><!--some scripts--><script type="text/javascript" src="../js/lib/raphael.js"></script><script type="text/javascript">var paper = Raphael("my-canvas", 650, 400);var cir = paper.circle(30, 30, 10);var coloredCircle = paper.circle(55, 45, 20).attr({"fill": "#17A9C6","stroke": "#2A6570","stroke-width": 2});var rect = paper.rect(65, 65, 120, 80).attr({"fill": "#17A9C6", //filling with background color "stroke": "#2A6570", // border color of the rectangle "stroke-width": 2 // the width of the border });var rect1 = paper.rect(190, 65, 120, 80,20).attr({"fill": "#17A9C6", //filling with background color "stroke": "#2A6570", // border color of the rectangle "stroke-width": 2 // the width of the border });</script></body> </html>
效果如下:
paper.ellipse(X,Y,rX,rY);
var ellipse = paper.ellipse(195,125,170,100).attr({
"fill":"#17A9C6", // background color of the ellipse
"stroke":"#2A6570", // ellipse's border color
"stroke-width":2 // border width
});
Paper.path([pathString])
- pathString SVG格式的路径字符串。
路径字符串由一个或多个命令组成。每个命令以一个字母开始,随后是逗号(“,”)分隔的参数。例如:"M10,20L30,40"
我们看到两个命令:“M”与参数(10, 20)
和“L”与参数(30, 40)
大写字母的意思是命令是绝对的,小写是相对的。
这里是可用命令的简表,详细内容请参照:SVG路径字符串格式 。
命令 | 名称 | 参数 |
---|---|---|
M | 移动到(moveTo) | (x y)+ |
Z | 闭合路径(closepath) | (none) |
L | 直线(lineTo) | (x y)+ |
H | 水平直线 | x+ |
V | 垂直直线 | y+ |
C | 曲线(curveto) | (x1 y1 x2 y2 x y)+ |
S | 平滑曲线 | (x2 y2 x y)+ |
Q | 二次贝赛尔曲线 | (x1 y1 x y)+ |
T | 平滑二次贝塞尔曲线 | (x y)+ |
A | 椭圆弧 | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
R | Catmull-Rom 曲线* | x1 y1 (x y)+ |
* “Catmull-Rom 曲线”不是标准SVG命令,在2.0版时被加入。 注:有种特殊情况,路径只包含三个命令:“M10,10R…z”。在这种情况下,路径将平滑连接到它的起点。
语法如下:
paper.path("pathString");
var tri = paper.path("M0,0L26,0L13,18L0,0").attr({
"fill":"#17A9C6", // filling the background color
"stroke":"#2A6570", // the color of the border
"stroke-width":2 // the size of the border
});
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Raphael Test</title></head><body><div id="my-canvas" style="width:140px;padding:0px;margin:0px;"></div><!--some html doms--><!--some scripts--><script type="text/javascript" src="../js/lib/raphael.js"></script><script type="text/javascript">var paper = Raphael("my-canvas", 700, 600);//1、直线使用path命令L paper.path("M20,20L100,20z").attr({"fill": "#5DDEF4","stroke": "#2A6570","stroke-width": 2});//2、三角形使用Path命令L paper.path("M130,30 L200,30 L160,90 z").attr({"fill": "#5DDEF4","stroke": "#2A6570","stroke-width": 2});//3、T形使用Path命令H,V paper.path("M 40,40 H 90 V 60 H 70 V 110 H 60 V 60 H 40 z").attr({"fill": "#5DDEF4","stroke": "#2A6570","stroke-width": 2});//4、2次贝塞尔曲线形,使用path命令Q paper.path("M240,40L300,40L300,100");paper.path("M240,40Q300,40 300,100").attr('stroke', 'red');//5、2次贝塞尔曲线形,使用path命令Q和T(第一个是正常绘制,第二个光滑连接) paper.path('M10,250 L90,130 L160,160 L250,190 L250,70');paper.path('M10,250 Q90,130 160,160 T250,70').attr('stroke', 'red');//6、绘制3次贝赛尔曲线,使用命令C,平滑画线使用命令S paper.path('M320,120 L350,180 L450,260 L480,140');paper.path('M320,120 C350,180 450,260 480,140').attr('stroke', 'red');paper.path('M320,120 S450,260 480,140').attr('stroke', 'yellow');</script></body> </html>
代码里面删除了上面文字里面的基本图形的绘制代码。为了节省空间,这里就使用这些绘制path的代码。上面代码中一共6个小模块,使用了path命令中最后2个之外的其它所有命令。最后两个待会儿解释。先解释上面几个。代码运行效果图如下:
paper.path("M20,20L100,20z") 这里,pathString为M20,20L100,20z,我们查看上面的path命令表。发现执行情况是这样的:我们的笔移动到坐标(20,20)的位置,连一条线到(100,20),闭合path。也就是上面6个图形中的最左上角的那个线段。接下来是那个三角形:
paper.path("M130,30 L200,30 L160,90 z") 三角形这个命令和上面线段是一致的,只是多连了一次,构成了一个三角形。这里我们是可以明白,只要你不断的用L命令去连接,其实可以构成任意复杂的图形。下面我们继续讲解第三个代码块:
paper.path("M 40,40 H 90 V 60 H 70 V 110 H 60 V 60 H 40 z") 这里我们用到了H和V命令,这俩命令我们通过查看path命令表可知道它们分别是横着和竖着连线。所以刚才上面那行代码的执行情况是:我们的笔移动到(40,40),水平线连接到x坐标90,垂直线连接到60,水平线······如此反复,需要注意H和V后面跟的不是线的长度而是坐标,最后我们闭合path得到一个T的图形。这个其实使用上面那个L命令也可以做到,但是水平和垂直命令名对于这种0角度或者90度的线处理起来更加容易。第四块代码如下:
paper.path("M240,40L300,40L300,100"); paper.path("M240,40Q300,40 300,100"); 这里我们第一行代码是画两条线段,上面讲解到了,只不过这里没有z结尾来闭合path。第二行代码使用的坐标与第一个完全一致,只不过两个L命令换成了Q,我们查看命令表,Q表示二次贝塞尔曲线,效果大家可以看靠上位置的那个曲线和曲线附着的的线段。Q命令的后的坐标含义可以通过上面线段的坐标来得知。第五个代码块如下:
paper.path('M10,250 L90,130 L160,160 L250,190 L250,70'); paper.path('M10,250 Q90,130 160,160 T250,70'); 这里的效果图是上面图形中最大那个图形。其实如果理解了第四个图形,这个很好理解。唯一的不同就是这里使用了T命令,这个T和接下来的S命令很相似,就是分别对应Q和S的平滑曲线画法,生活他们中间的那个坐标,而直接使用后一(两)个坐标即可。 第六个代码块如下:
paper.path('M320,120 L350,180 L450,260 L480,140'); paper.path('M320,120 C350,180 450,260 480,140').attr('stroke', 'red'); paper.path('M320,120 S450,260 480,140').attr('stroke', 'yellow'); 看到最后一幅图,我们看的到一条红色曲线和一条黄色,两个图形的区别就是命令中缺省第一个坐标的区别。上面第5个图形也可以做成类似第六幅图的曲线对比图,大家可以稍微修改一下代码就能搞定了。当然这里其实曲线的每个附着的线段是不是必要存在,为了加深理解,我们将它画了出来。 关于椭圆曲线,这里我直接引用http://lblovesnow-163-com.iteye.com/blog/1485388这个博客博主的测试用例吧。这个博主写的这些测试用例非常到位,我就借花献佛了。代码如下:
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Raphael Test</title></head><body><div id="my-canvas" style="width:140px;padding:0px;margin:0px;"></div><!--some html doms--><!--some scripts--><script type="text/javascript" src="../js/lib/raphael.js"></script><script type="text/javascript">var paper = Raphael("my-canvas", 700, 600);//绘制左上的椭圆 paper.ellipse(130,40,60,30); paper.ellipse(70,70,60,30); paper.path('M70,40 A60,30 0 0,0 130,70').attr('stroke','yellow'); paper.text(40,30,'start(70,40)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(160,80,'end(130,70)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(70,120,'large-arc-flag=0\nsweep-flag=0') .attr({ 'font-size': 11, 'fill': 'green', 'text-anchor': 'start' }); //绘制右上的椭圆 paper.ellipse(330,40,60,30); paper.ellipse(270,70,60,30); paper.path('M270,40 A60,30 0 0,1 330,70').attr('stroke','yellow'); paper.text(240,30,'start(270,40)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(360,80,'end(330,70)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(270,120,'large-arc-flag=0\nsweep-flag=1') .attr({ 'font-size': 11, 'fill': 'green', 'text-anchor': 'start' }); //绘制左下的椭圆 paper.ellipse(130,240,60,30); paper.ellipse(70,270,60,30); paper.path('M70,240 A60,30 0 1,0 130,270').attr('stroke','yellow'); paper.text(40,230,'start(70,240)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(160,280,'end(130,270)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(70,320,'large-arc-flag=1\nsweep-flag=0') .attr({ 'font-size': 11, 'fill': 'green', 'text-anchor': 'start' }); //绘制右下的椭圆 paper.ellipse(330,240,60,30); paper.ellipse(270,270,60,30); paper.path('M270,240 A60,30 0 1,1 330,270').attr('stroke','yellow'); paper.text(240,230,'start(270,240)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(360,280,'end(330,270)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(270,320,'large-arc-flag=1\nsweep-flag=1') .attr({ 'font-size': 11, 'fill': 'green', 'text-anchor': 'start' }); </script></body> </html>
其中有个paper.text方法正好我们解析来要讲解的内容,这里也算提前预览一下。
A(a)elliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y) ;
参数含义:
rx:横轴的长度;
ry:纵轴的长度;
x-axis-rotation:椭圆的横轴与x轴的角度;
large-arc-flag:区分弧度的大小(0表示小角度弧度,1表示大角度弧度);
sweep-flag:绘制弧度围绕椭圆中心的方向(0表示逆时针方向,1表示顺时针方向);
x y:椭圆曲线终点坐标;
效果图如下:
图画上面有个A命令的参数含义,其实加上这位博主的参数含义的解释还是很好理解的。注意图中的黄色曲线,每个下面有2个参数的解释,忽略4组图形的开始和结束坐标,其实他们的区别就是在larget-arc-flag和sweep-flag的参数设置不同。
large-arc-flag:区分弧度的大小(0表示小角度弧度,1表示大角度弧度);
sweep-flag:绘制弧度围绕椭圆中心的方向(0表示逆时针方向,1表示顺时针方向);
是不是一目了然?larget-arc-flag就是画小弧还是大弧的区别、sweep-flag是逆时针还是顺时针。
“Catmull-Rom 曲线”不是SVG标准命令,这里不再赘述,有兴趣的可以自己去研究测试一下。
接下来我们讲解的方法是text方法。上例中出现了paper.text(),是用来显示文字内容的方法。语法其实很简单,就是x,y坐标和文字内容。
paper.text(X,Y,"Raphael JS Text");
var text = paper.text(40,55,"Raphael Text").attr({
"fill":"#17A9C6", // font-color
"font-size":75, // font size in pixels
"text-anchor":"start",
"font-family":"century gothic" // font family of the text
});
//text-anchor属性表明文字与坐标的关系,是从这个坐标开始、为中心还是为结尾。属性值可以设置 "start", "middle" or "end" 默认"middle"。
到此位置,我们已经讲解了创建画布、创建基本图形、创建复杂图形、text文本内容等方法。到现在位置其实我们都是在做静态图画的编辑,我们如果想要操作和添加事件,需要学习接下来的知识。接下来的内容将在下一篇博文中讲述。
转载于:https://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter.html
快速上手RaphaelJS-Instant RaphaelJS Starter翻译(一)相关推荐
- 快速上手RaphaelJS
原文: 快速上手RaphaelJS-Instant RaphaelJS Starter翻译 http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_S ...
- 快速上手RaphaelJS--RaphaelJS_Starter翻译(一)
Raphael Javascript是一个 Javascript的矢量库. 它可以处理SVG.VML格式的矢量图,它使用SVG W3C推荐标准和VML作为创建图形的基础,你可以用Javascript ...
- ArcGIS API for JavaScript :简介与快速上手
一.简介 子路曰:"卫君待子而为政,子将奚先?"子曰:"必也正名乎!" 孔子认为,为政最先要做的事情是正名,名不正则言不顺. 语言是上天赋予人类的神奇能力,而& ...
- react 快速上手开发_React中测试驱动开发的快速指南
react 快速上手开发 by Michał Baranowski 通过MichałBaranowski React中测试驱动开发的快速指南 (A quick guide to test-driven ...
- Tensorflow 10分钟快速上手
Tensorflow 快速上手 系统版本 : Ubuntu 16.04LTS Python版本 : 3.6.1 Tensorflow 版本 : 1.0.1 本文依据教程 TensorFlow Tuto ...
- python编程快速上手_给Python小白推荐的40本入门书籍,帮你快速上手
喜欢编程,热爱分享,希望能结交更多志同道合的朋友,一起在学习Python的道路上走得更远!有不懂的问题可以私聊我哦! 最近,小编的 Python 交流裙里进来了几位比较特殊的同学:一位初三的以编程为兴 ...
- 还没使用过Web Worker,推荐一款开源工具Workerize,快速上手
还没使用过Web Worker,推荐一款开源工具Workerize,快速上手 开源项目:https://github.com/developit/workerize 将模块移动到 Web 辅助角色中, ...
- SpringBoot2.1.15(26) WebFlux快速上手——响应式Spring的道法术器
SpringBoot2.1.15(26) WebFlux快速上手--响应式Spring的道法术器 Spring WebFlux Spring WebFlux是随Spring 5推出的响应式Web框架. ...
- objective-c 2.0编程语言,Objective-C 2.0编程快速上手 EXE版[12MB]
Objective-C 2.0编程快速上手 内容简介: <Objective-C 2.0编程快速上手>是介绍Objective-C编程的基础教程.全书采用实例讲解.按部就班的方式,全面详细 ...
最新文章
- python装饰设备_Python: 装饰器的小例子
- setting an array element with a sequence
- USACO_1_4_Mother's Milk
- vb编程的好帮手--资源文件
- SimpleDateFormat使用方法详解
- 洛谷 - P2774 方格取数问题(最小割-最大流+奇偶拆点)
- 手把手教你玩转SOCKET模型:完成端口(Completion Port)详解
- DES加密(支持ARC与MRC)
- 180.连续出现的数字
- 安装net framework2.0,装不上怎么办?
- 重装系统显示缺少计算机所需的介质驱动程序,安装WIN7提示“缺少所需的CD/DVD驱动器设备驱动程序”的解决办法...
- oobar, foo, bar, baz和qux搅屎棍的含义
- 市场规模一年猛增24% 这个靠“打印”出来的市场正在韩国崛起
- 手机浏览器查看网页源码
- linux环境pwd下ls,Linux基础命令2:cd、pwd、ls、stat、touch、alias
- linux开放外部端口访问
- 计算机网络实验(思科模拟器Cisco Packet Tracer)配置静态路由使三台pc机网络互通
- CSS 变形(CSS3) transform
- python爬虫之selenium的使用
- Java课程设计基于SSM的出租房管理
热门文章
- 继承单例模式 php_详解PHP单例模式之继承碰见的问题
- 【SRIO】4、Xilinx RapidIO核详解
- ISE与Modelsim联合仿真关联设置
- SSH免密登录(内含批量配置脚本)
- WKWebView高度自适应三种方式
- Linux下Nagios的安装与配置
- 【SQLServer】【恢复挂起的解决方案】附加文件时候的提示“无法重新生成日志,原因是数据库关闭时存在打开的事务/用户,该数据库没有检查点或者该数据库是只读的。 ”【数据库恢复】...
- easyui combotree的使用
- Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果
- 可设置指定时间自动消失的 MessageBox实现