web浏览器上画图之raphael

最近进了一家新公司，由于项目需要，老总让我研究在web浏览器上如何画图并获取所画的图形的相关数据(一般是坐标)，在网上找了很多资料，最终经过筛选，觉得以下这几种方式用得较多，并且简单的总结了一下他们的优缺点：

1、Flash
优点: 操作方式较简单，画出的图形漂亮
缺点: 需要安装插件，画出的图难以实现在线保存

2、VML
优点：画出的是矢量图,想当于IE里的画笔，画图较方便，是word和html结合的产物
缺点：VML是微软1999年9月附带IE5.0发布的,浏览器兼容性太差,只支持IE家族

3、html5中的canvas元素
优点：画出的是矢量图,画出的图形漂亮,操作较容易，网页中的dom元素容易保存
缺点：大多浏览器支持较好,不过IE家族的低版本几乎全军覆没,只是在IE9以上才开始支持，不符合有些项目的需求

4、raphael
优点：画出的是矢量图,图形漂亮，操作较容易，跨浏览器(Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+)
缺点：保存相对来说要难点

为了公司项目的需求，我先选择了raphael，以下就简单地介绍一下raphael的使用。

可以说raphael是一门前端技术框架(浏览器画图用的)，画图操作简单、画出的图形漂亮。画一些简单图形网上已经有很多例子，如官网首页下有这个画圆的入门例子：

// 创建一个400× 300，左上角距离窗口(x=20,y= 60)的画布
var paper = new Raphael(20, 60, 400, 300);

//创建一个圆，圆心的坐标为(x = 50, y = 60), 半径为10。
var circle = paper.circle(50, 60, 10);

// 给圆填充颜色为： green
circle.attr("fill", "green");

// 给圆设置边框为： #fff(白色)
circle.attr("stroke", "#fff");
但是有一些东西我想在网上找源码基本搜不到，经过自己慢慢推敲终于实现了一些东西基本，比如说:

1、想在浏览器上画一些矩形，这个矩形可以任意拖动，把鼠标放到该矩形的右下角可以拉动矩形进行放大或缩小(原理：画一个大矩形,然后再在大矩形的右下角画一个小矩形,当拖动小矩形时改变大矩形的宽度和高度，所以说拖动右下角矩形变大并非拖动的是该矩形本身,这个东西我弄了很久才知道，同时可以双击文字在线编辑哦，并且编辑之后的数据也能够动态保存。哎，毕竟是后台开发人员啊,一个很简单的前端效果都要弄好久。。这个链接有源码可以下载：http://download.csdn.net/detail/whiteshirt/6599925)，效果如：

2、在浏览器上画一些文字，双击文字出现一个可编辑的文本框可实现在线编辑,(这个东西也折磨了我好久，在中文网上基本上搜不到，害得我只有用英文关键字去google搜索才搜到了，所以得出了个结论，以后在百度或google上搜中文搜不到东西的时候不要钻牛角尖啊，可以换一种方式，用英文关键字搜搜，所不定会得到意想不到的结果)，这里有源码可以下载：http://download.csdn.net/detail/whiteshirt/6599983

3、在浏览器上画一个可拖动和放大缩小的花括号(大括号)，原理是用raphael中的path画的，这里有源码可下载：http://download.csdn.net/detail/whiteshirt/6599947

4、这里有一些简单的图形的源码下载：http://download.csdn.net/detail/whiteshirt/6599963(包括基本的圆、矩形、三角形、虚线、实现、大括号、写字等等。)，如图：

下面是我这几天学raphael的时候找到的一些个人觉得比较好的资料链接地址，我把好的都总结在这里，大家就不用盲目的到处去搜关键字找：

raphael官方网站：http://raphaeljs.com/

raphael中文帮助手册：http://lab.julying.com/raphael-js/docs/

使用raphael画一些基本的图形：http://zhuyilingmail.blog.163.com/blog/static/110648293201211322734631/

raphael每个方法的演示效果地址及源码(非常好的地址,后悔没早点找到)：http://www.irunmywebsite.com/raphael/additionalhelp.php#pagetop

raphael绘制的266个Icons，可直接复制需要的代码使用：http://raphaeljs.com/icons/#smile2

raphael直接用画笔画图写字并可保存：http://ianli.com/sketchpad/

raphael矢量绘图及矩阵讲解：http://xbingoz.com/449.htmlhttp://xbingoz.com/482.html