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

web浏览器上画图之raphael相关推荐

检测Web浏览器上的内存泄漏
目录背景拍摄堆快照一个真实世界的例子--AsyncSubject 附加说明兴趣点下载源 - 1.2 KB 背景当您关闭浏览器选项卡时,所有内存都将被释放.内存泄漏在Web浏览器上很可能不是 ...
在 Web 浏览器上进行 RSS 阅读
在 Web 浏览器上进行 RSS 阅读 WHY RSS ? 简单几步在你的 Web 浏览器上开启 RSS 阅读之旅制作 RSS 附录:主流浏览器扩展商店网址推荐阅读与参考文献 RSS (RDF S ...
在web浏览器上显示室内温度（nodeJs+arduino+socket.io）
上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...
在浏览器上画图（canvas的基本用法）
在HTML5里,我们可以通过canvas标签来在浏览器里进行画图,但是这个标签并不是能画图的,画图还是要通过JavaScript,这个标签只是一个载体.在canvas这个标签里,默认的width是30 ...
谷歌浏览器上启用flash_如何在任何Web浏览器上启用私人浏览
谷歌浏览器上启用flash Private browsing has been around in one form or another since 2005, but it took some t ...
前端 -＞ Plupload 一个Web浏览器上的界面友好的文件上传模块
文章目录方法列表: 属性集合: 事件集合:(up为uploader缩写) 实例: 方法列表: Uploader(setting):创建实例的构造方法 var uploader = new plupl ...
ActiveX技术在WEB页上的应用[转载]
ActiveX技术在WEB页上的应用汪涛 Internet 的发展可以说是日新月异,这种快速的发展给人们带来了大量的机会.全世界的电信服务商都在寻找增强Internet在线服务的方法.在Int ...
浏览器显示linux桌面,如何从Web浏览器远程监视Linux服务器和桌面
当你要监视一台Linux机器时,你会有很多的选择.虽然现在有很多产品质量监控方案(比如 Nagios. Zabbix. Zenoss),它们拥有华丽的UI,可扩展监控,易于理解的报告等等,这些方案对于 ...
如何从Web浏览器远程监视Linux服务器和桌面
当你要监视一台Linux机器时,你会有很多的选择.虽然现在有很多产品质量监控方案(比如 Nagios. Zabbix. Zenoss),它们拥有华丽的UI,可扩展监控,易于理解的报告等等,这些方案对于 ...

web浏览器上画图之raphael

web浏览器上画图之raphael相关推荐

最新文章

热门文章