Raphael调研例子 -

jackiee_cn

浏览: 113464 次
性别:
来自: 北京

最近访客更多访客>>

enock

yeqingcheng

placeholder

WangJiaX

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Raphael调研例子

博客分类：

Web前端

Raphael javascript

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);
 var t = paper.text(500, 550, "Raphaël\nkicks\nbutton!").attr({color:"black",cursor:"hand"});
 
 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>

分享到：