这章展示事件例子。
下图是官方API的事件:
例子:
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:
运行效果图2:
运行效果图3:
- 大小: 72.7 KB
- 大小: 18.8 KB
- 大小: 34.8 KB
- 大小: 18.7 KB
分享到:
相关推荐
4. **事件处理**:RaphaelJS图形对象可以绑定JavaScript事件,如点击、鼠标悬停等,这样用户可以与图形进行交互。 5. **兼容性**:虽然SVG在现代浏览器中广泛支持,但老版本的IE浏览器(主要指IE8及以下)不支持SVG...
这个“raphael 简单绘图”教程可能涵盖了从基础到进阶的Raphaël使用方法,特别关注如何用它来绘制流程图。 首先,让我们深入了解一下Raphaël的基本概念。Raphaël通过创建一个“paper”对象来初始化画布,这相当...
Raphaël是一款强大的JavaScript库,专为在Web浏览器中绘制矢量图形而设计。它使得开发者能够在HTML5 Canvas或SVG(Scalable Vector Graphics)上进行绘图,支持包括Internet Explorer 9及以上版本,Chrome,Firefox...
3. JavaScript库:开源的HTML5画图工具通常会依赖于JavaScript库,如Fabric.js、Paper.js、Konva.js或 Raphael.js等,这些库提供了高级的绘图功能,简化了开发过程。 4. 事件处理:在HTML5画图工具中,事件处理是至...
画图效果通常指的是在网页上通过JavaScript操作DOM元素、使用Canvas API或SVG技术绘制图形、图像处理等。这里我们重点讨论使用JavaScript实现这些效果的相关知识点。 1. Canvas API:Canvas API 是一个通过...
很有趣的一个登月小游戏,光标键控制飞船方向,空格键推动前进,改编于《游戏编程中的人工智能技术》书中的例子,使用Raphael函数库进行画图,由于JavaScript的运行效率问题,游戏在谷歌浏览器下运行比较流畅
可以使用`Paper.Element.mouseover()`, `mouseout()`, `mousedown()`, `mouseup()`, `click()`, `dblclick()`等方法来绑定事件处理函数。 6. **性能优化**: 大量图形可能会影响页面性能,使用`Paper.safari()`或`...
- 为了简化VML的使用,有一些JavaScript库如Raphaël(http://raphaeljs.com/)提供了跨浏览器的矢量图形绘制功能,包括对VML的支持,使得在不同浏览器中实现图形绘制变得更加容易。 6. **局限性**: - VML并不...
本文将详细介绍使用JavaScript绘制圆、弧和扇形的方法。在绘制这些几何图形的过程中,需要用到一些基本的数学概念,比如坐标系、圆的参数方程、弧度制等。同时,还会涉及到一些基础的JavaScript语法和函数,用于在...
matlab画图各种虚线代码西班牙制造 在西班牙进行的整洁项目清单 内容 JavaScript :glowing_star: 名称 描述 :globe_showing_Europe-Africa: 6726 / 使用express,react,redux,webpack和react-transform的通用Web...
iMaibo Sentiment Index 脉搏心情指数组件 总结 文件结构 ...r2d3 - d3插件的IE8支持(通过raphael.js) baron - 跨浏览器滚动条 jQuery.leanModal - 模态窗口插件 CSS css/style.css - Styles used fo