Raphael调研例子

标签: raphael | 发表时间:2015-01-30 15:52 | 作者:jackiee_cn
出处:http://www.iteye.com

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。

Raphaël 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。

 

官网地址: http://raphaeljs.com/

绘制柱状图、折线图、饼图等插件网址: http://g.raphaeljs.com/

 

下面是调研Raphael写的测试例子,打算用它来做个交换平台的监控图形界面:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title></title>
 <script  src="libs/jquery-1.8.3.js"></script>
 <script src="libs/raphael/raphael.js" charset="utf-8"></script>
</head>
<body >
<script>
 var paper = Raphael(10, 10, 800, 600);

 var mpn1 = paper.image("./image/mpn1.jpg", 200, 300, 80, 80);
 var mrc = paper.image("./image/mrc.jpg", 400, 300, 80, 80);
 var mpn2 = paper.image("./image/mpn2.jpg", 600, 300, 80, 80);
 mpn2.attr({cursor:"hand"});
 mpn2.glow({color:"yellow"});
 mpn2.click(function(){alert("有堵单发生!")});

 var c1 = paper.path("M280 340L400 340");
 var c2 = paper.path("M480 340L600 340");

 c2.attr("stroke","red");
 c2.glow({color:"yellow"});

 var msecs = 500; //改变时间得到不同的闪烁间隔;
 var currentColor="red";
 function blink() {
  if(currentColor=="white"){
   c2.attr("stroke","red");
   currentColor="red";
  }else{
   c2.attr("stroke","white");
   currentColor="white";
  }
  setTimeout("blink()", msecs);
 }

 setInterval("blink()", msecs); 
</script>
</body>
</html>

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [raphael] 推荐:

Raphael调研例子

- - JavaScript - Web前端 - ITeye博客
Raphael 是一个用于在网页中绘制矢量图形的. 它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作. Raphaël 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+.

Web流程图绘制使用raphael

- - Web前端 - ITeye博客
摘要:本文要实现一个流程图的绘制,最终的目标是实现流程图的自动绘制,并可进行操作,直接点击流程图上对应的方框就可以让后台跑相应的程序. 1、图形绘制raphael. 其中图形绘制使用了raphael,下载地址: http://raphaeljs.com,它的功能非常强大. 中文帮助教程: http://html5css3webapp.com/raphaelApi.htm#Paper.text.

用raphael实现的jbpm4web流程设计器

- - Web前端 - ITeye博客
最近准备自己根据raphael学习和网上查阅到得知识,实现一个jbpm4风格的web流程设计器. 有部分功能参考了CSDN网友 wow4464提供的一个控件连线的实例,下载地址: http://download.csdn.net/detail/wow4464/7549803. 连线的方式使用的是raphael拖拽的特性来实现的,发现在firefox下有问题,其他浏览器正常支持.