使用Raphael 画图(三) 事件 (javascript)
2014-10-25 00:46
357 查看
这章展示事件例子。
下图是官方API的事件:
![](http://dl.iteye.com/upload/attachment/352648/e0f1df10-8cea-37c1-80b8-54b497d1af8c.jpg)
例子:
运行效果图1:
![](http://dl.iteye.com/upload/attachment/352654/d7d6ab7f-aea7-3436-b61f-a80d9ff968da.jpg)
运行效果图2:
![](http://dl.iteye.com/upload/attachment/352656/339510fd-4d2e-3982-9be3-d43032c940db.jpg)
运行效果图3:
![](http://dl.iteye.com/upload/attachment/352661/6fb99f51-48a7-3606-80a6-57ccaf581eef.jpg)
原文:http://czpae86.iteye.com/blog/819183
下图是官方API的事件:
![](http://dl.iteye.com/upload/attachment/352648/e0f1df10-8cea-37c1-80b8-54b497d1af8c.jpg)
例子:
var butt1 = paper.set(); var a1 = paper.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0}); var a2 = paper.circle(24.833, 26.917, 26.667).attr({stroke: "black", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}); var a3 = paper.path("M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z").attr({stroke: "none", fill: "#000"}); butt1.push(a1,a2,a3); //为a2设置触发相应事件后做什么。 butt1[1].click(function () { alert('where amazing happens!'); }).mouseover(function () { butt1[2].stop().attr({fill: "orange"}); }).mouseout(function () { butt1[2].animate({fill: "black"}, 300); }); butt1.translate(150,160); var butt2 = paper.set(); var r = paper.rect(150,100,100,50); r.attr({stroke:'red','stroke-width':2,title:'模块一',fill:'#ccc'}); var t = paper.text(200, 125, "where\n amazing\n happens!");//text t.attr({fill:'blue'}); butt2.push(r,t); //这是另一种写法 butt2[0].mouseover(function (event) { butt2[1].attr({fill: "green"}); }); butt2[0].mouseout(function (event) { butt2[1].attr({fill: "blue"}); });
运行效果图1:
![](http://dl.iteye.com/upload/attachment/352654/d7d6ab7f-aea7-3436-b61f-a80d9ff968da.jpg)
运行效果图2:
![](http://dl.iteye.com/upload/attachment/352656/339510fd-4d2e-3982-9be3-d43032c940db.jpg)
运行效果图3:
![](http://dl.iteye.com/upload/attachment/352661/6fb99f51-48a7-3606-80a6-57ccaf581eef.jpg)
原文:http://czpae86.iteye.com/blog/819183
相关文章推荐
- 使用Raphael 画图(二) 扩展的图形 (javascript)
- 使用Raphael 画图(一) 基本图形 (javascript)
- 使用Raphael 画图(四) 路径(一) (javascript)
- 服务器控件使用Javascript进行验证(选择地调用后台事件)
- JavaScript中的5种事件使用方式解说
- 使用javascript事件机制限制文本框中只能输入数字
- 十种JavaScript事件处理的使用方法
- JavaScript中的5种事件使用方式解说
- JavaScript 滚轮事件使用说明
- JavaScript中的事件使用方式解说
- JavaScript的错误处理之onerror事件的使用方法
- JavaScript 滚轮事件使用说明
- JavaScript中的5种事件使用方式解说
- 使用javascript绑定键盘enter事件到asp.net的button控件
- Asp.net中的JavaScript使用之二服务器控件的客户端事件
- JavaScript 事件记录使用说明
- JavaScript中的5种事件使用方式解说(转)
- 使用javascript调用服务器的事件
- 在javascript中使用(读取、设置)Asp.net服务器的属性、方法和事件
- JavaScript中的5种事件使用方式解说(转)