初识Raphael.js---强大的矢量图形库
2017-11-14 本文已影响0人
_信仰zmh
首先,我和你一样很迷茫这个库,不知道它是用来干嘛的。
只记得任务来了,顺便给了一本全英文的电子书,关于这个库的所有文档都写的清清楚楚,网站上关于它的中文文档也是少之又少,就一边看文档,一边上网上搜一下官方文档的示例,这样会比丛头看到尾好很多。
因为即使你从头开始,把这个全英文的文档看一遍,脑子里依旧是一片浆糊,真正开始去做的时候,又无从下手,倒不如带着开发任务去看文档,需要用到什么就去翻文档,这样就事半功倍。
1. 先来大致了解下RaphaelJS库是用来干嘛的?
Raphael 是一个用于在网页中绘制矢量图形的Javascript 库。
它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。
2. 它目前支持的浏览器有?
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
3. RaphaelJS 入门的一个简单示例:
-
用之前肯定要先引入这个库文件,类似于我们自己的html文件中引入相应的js操作一样的。
-
在页面中引入 raphael.js 文件之后,我们就可以绘制任意的矢量图形了:
这里简单写个画圆的示例:
- 创建一个画布,作为我们画图的容器,参数指定坐标x,y 以及画布的宽高;
- 类似与canvas,调用circle方法,指定圆心坐标,圆半径;
- 填充图形、描边。
// 在坐标(10,50)创建宽320,高200的画布
var paper = Raphael(10, 50, 300, 200);
// 在坐标(x = 50, y = 40)绘制半径为 10 的圆
var circle = paper.circle(50, 40, 10);
// 给绘制的圆圈填充红色
circle.attr("fill", "red");
// 设置画笔(stroke)的颜色为白色
circle.attr("stroke", "#fff");
image
这样就在页面上展示了一个圆形。
官网更多demo示例:
image