Raphael.js简易教程

view plain copy

Raphael.js 的教程非常简单，仅首页一段代码，然后就是 Reference。但作者在 Reference 部分也惜墨如金，不肯多费几句。所以有这一篇中文，对如何使用 Raphael.js 做个简单介绍。
调用 Raphael.js
首先在 HTML 页面调用 raphael.js：
<script src="http://www.zfanw.com/blog/raphael.js"></script>
用法
用 Raphael 方法创建一块画布，
var paper = Raphael(10, 50, 320, 200);//在浏览器窗口中，坐标 (10,50) 位置创建一个 canvas 对象，长320px，宽200px。
我们随后的操作都将在这块画布上进行。
绘制基本图形
比如，以 (100,100) 为中心画半径50px的圆，并填充红色：
var circle=paper.circle(100,100,50);
circle.attr({"fill":"red"}); //attr 方法用于设定对象属性
如你所见，这个半径50的圆跑到页面左上。这是因为画布的坐标原点在浏览器窗口左上角。
但 Raphael 方法还可以在 HTML 元素中创建画布，这就避开上面的问题：
<div id="raphael1"></div>
<script>
var paper=Raphael("raphael1",320,200);//在 id 为 raphael1 元素中创建画布
var circle=paper.cicle(100,100,50);
circle.attr({"fill":"green"});
</script>
代码效果如下：
除了圆(circle)外，Raphael.js 还提供其他常规图形方法，比如方形(rect)、椭圆(ellipse)、路径(path)等。
修改对象属性
在画布上创建 Raphael 对象后，我们可以修改对象属性。
比如，先使用 text 方法生成文字，然后修改字体大小为30px，填充蓝色，红色描边，透明度50%：
代码如下：
<div id="raphael2"></div>
<script>
(function(){
var paper=Raphael("raphael2",300,300);
var t=paper.text(150,150,"Hello from 陈三");
t.attr({"font-size":"30px","fill":"blue","stroke":"red","opacity":".5"});
})();
</script>
这一切都是通过 Raphael 对象的 attr 方法完成。
变换对象
除了修改对象属性，我们还可以变换(transform)对象，比如平移、旋转、缩放。
上图中的代码如下(虚线为图形变换前)：
<div id="raphael3"></div>
<script>
(function(){
var paper=Raphael("raphael3",200,200);
var rect=paper.rect(50,50,100,100,5);
rect.attr({"stroke-dasharray":"-"});
rect.transform("t100,100r45t-100,0s.5");
})();
</script>
Raphael 对象变换有四个命令：
t – translate
r – rotate
s – scale
m – matrix
上例中 t100,100r45t-100,0s.5 命令翻译过来就是：
对象水平方向平移100
垂直方向平移100
旋转45度
水平方向往负方向平移100
缩小图形到原来的一半
动画效果
上面说到修改对象属性和变换对象，因为有开始和结束两个状态，我们就可以制作动画效果。
上图的代码如下：
<div id="raphael4"></div>
<script>
(function(){
var paper=Raphael("raphael4",400,300);
var circle=paper.circle(200,150,100);
circle.attr({"fill":"red"});
circle.animate({cx: 10, cy: 20, r: 8, "fill": "blue"}, 10e3);
})();
</script>
圆心的初始坐标(200,130)，半径100，填充红色，页面加载完成后，圆心坐标变成(cx,cy)，即(10,20)，半径缩为8，填充蓝色，这个变化过程时长为10e3毫秒，即10秒 – 如果你没有看到动画效果，那是因为动画已经结束，请刷新页面，然后跳转到这一部分。
绑定事件
Raphael.js 还可以给对象绑定事件，比如单击、双击、拖动、鼠标移入、鼠标移出等。
举 hover 方法为例：
代码如下：
<div id="raphael5"></div>
<script>
(function(){
var paper=Raphael("raphael5",400,300);
var circle=paper.circle(200,150,100);
circle.attr({"fill":"red"});
circle.hover(function(){circle.attr({"fill":"green"});},function(){circle.attr({"fill":"red"});});//给 circle 对象绑定 hover 事件
})();
</script>
上例中，鼠标放到圆上，填充色变成绿色，移开恢复成红色。
参考
Reference
本文出自：http://www.zfanw.com/blog, 原文地址：http://www.zfanw.com/blog/raphael-js-tutorial.html, 感谢原作者分享。

Raphael.js简易教程相关推荐

强大的矢量图形库：Raphael JS 中文帮助文档及教程
Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...
eslint不报错 vue_【简易教程】基于Vue-cli使用eslint指南
插件安装首先在vscode插件中搜索eslint和prettier. 啥也不管,这俩必须得装. 插件简介 vscode插件库里的eslint是用来在你写代码的时候就直接给你报错.(vue-cli中的 ...
用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（上）
首先介绍一下什么是g.raphael.这个又要说到什么是raphael.js.raphael是一个javascript库,可以用来跨浏览器绘制各种图形,只要是你想得到的图形都可以用raphael绘制出 ...
文件上传利器SWFUpload入门简易教程
凡做过网站开发的都应该知道表单file的确鸡肋. Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame, 较A ...
【简易教程】基于Vue-cli使用eslint指南
[简易教程]基于Vue-cli使用eslint指南插件安装首先在vscode插件中搜索eslint和prettier. 啥也不管,这俩必须得装. 插件简介 vscode插件库里的eslint是用来 ...
Ext DeskTop的使用方法简易教程及相关例子Demo(转)
Ext DeskTop的使用方法简易教程及相关例子Demo(转) ExtJS 2010-12-31 10:11:15 阅读196 评论0 字号:大中小订阅 http://qwikioffice. ...
Solidity 简易教程0x001
Solidity是以太坊的主要编程语言,它是一种静态类型的 JavaScript-esque 语言,是面向合约的.为实现智能合约而创建的高级编程语言,设计的目的是能在以太坊虚拟机(EVM)上运行. 本 ...
WebGL简易教程(十五)：加载gltf模型
文章目录 1. 概述 2. 实例 2.1. 数据 2.2. 程序 2.2.1. 文件读取 2.2.2. glTF格式解析 2.2.2.1. 场景节点 2.2.2.2. 网格 2.2.2.3. 缓冲,缓 ...
WebGL简易教程(十一)：纹理
文章目录 1. 概述 2. 实例 2.1. 准备纹理 2.2. 配置纹理 2.3. 使用纹理 3. 结果 4. 参考 1. 概述在之前的之前的教程<WebGL简易教程(九):综合实例:地形的绘 ...

Raphael.js简易教程

Raphael.js简易教程相关推荐

最新文章

热门文章