010_Raphael事件

于 2021-07-22 13:38:39 发布
阅读量210 收藏
点赞数
分类专栏： html5游戏 文章标签： javascript ecmascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/118997157
版权

1. 单击事件

1.1. click()方法是用来为Raphael元素绑定单击事件的方法。语法如下:

rect.click(function(e){ 
  	
});

2. 双击事件

2.1. dblclick()方法是用来为Raphael元素绑定双击事件的方法。语法如下:

rect.dblclick(function(e){ 
  	
});

3. 鼠标键按下

3.1. mousedown()方法为Raphael元素绑定鼠标键按下的动作, 任何鼠标键按下都是触发事件。语法如下:

rect.mousedown(function(e){ 
  	
});

4. 鼠标键抬起

4.1. mouseup()方法与上面mousedown()相反, 触发条件为鼠标按下的键被释放(抬起)。语法如下:

rect.mouseup(function(e){ 
  	
});

5. 鼠标进入

5.1. mousemove()方法为鼠标进入一个Raphael元素时触发。语法如下:

rect.mousemove(function(e){ 
  	
});

6. 鼠标移出

6.1. mouseout()方法为鼠标移出一个Raphael元素时触发。语法如下:

rect.mouseout(function(e){ 
  	
});

7. 鼠标移过

7.1. mousemove()方法为鼠标在一个Raphael元素上面移过时触发。语法如下:

rect.mousemove(function(e){ 
  	
});

8. 例子

8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>Raphael事件</title>
		<script type="text/javascript" src="raphael.js"></script>

		<style type="text/css">
            #sample-1, #sample-2, #sample-3, #sample-4, #sample-5, #sample-6, #sample-7 {
                width: 600px;
                border: 1px solid #aaa;
            }
        </style>
	</head>
	<body>
		<h1>单击事件</h1>
		<div id="sample-1"></div>
		<script type="text/javascript">
			var paper1 = Raphael("sample-1", 600, 100);
			var rect1 = paper1.rect(20, 20, 60, 40).attr({
      			"fill": "green"
    		});

    		rect1.click(function(e){ 
			  	alert("发生单击事件");
			});
		</script>

		<h1>双击事件</h1>
		<div id="sample-2"></div>
		<script type="text/javascript">
			var paper2 = Raphael("sample-2", 600, 100);
			var rect2 = paper2.rect(20, 20, 60, 40).attr({
      			"fill": "green"
    		});
    		rect2.dblclick(function(e){ 
			  	alert("发生双击事件");
			});
		</script>

		<h1>鼠标键按下</h1>
		<div id="sample-3"></div>
		<script type="text/javascript">
			var paper3 = Raphael("sample-3", 600, 100);
			var rect3 = paper3.rect(20, 20, 60, 40).attr({
      			"fill": "green"
    		});
    		rect3.mousedown(function(e){ 
			  	alert("鼠标键按下");
			});
		</script>

		<h1>鼠标键抬起</h1>
		<div id="sample-4"></div>
		<script type="text/javascript">
			var paper4 = Raphael("sample-4", 600, 100);
		 	var rect4 = paper4.rect(20, 20, 60, 40).attr({
      			"fill": "green"
    		});
    		rect4.mouseup(function(e){ 
			  	alert("鼠标键抬起");
			});
		</script>

		<h1>鼠标进入</h1>
		<div id="sample-5"></div>
		<script type="text/javascript">
			var paper5 = Raphael("sample-5", 600, 100);
			var rect5 = paper5.rect(20, 20, 60, 40).attr({
      			"fill": "green"
    		});
    		rect5.mouseover(function(e){ 
			  	alert("鼠标进入");
			});
		</script>

		<h1>鼠标移出</h1>
		<div id="sample-6"></div>
		<script type="text/javascript">
			var paper6 = Raphael("sample-6", 600, 100);
			var rect6 = paper6.rect(20, 20, 60, 40).attr({
      			"fill": "green"
    		});
    		rect6.mouseout(function(e){ 
			  	alert("鼠标移出");
			});
		</script>

		<h1>鼠标移过</h1>
		<div id="sample-7"></div>
		<script type="text/javascript">
			var paper7 = Raphael("sample-7", 600, 100);
		 	var rect7 = paper7.rect(20, 20, 60, 40).attr({
      			"fill": "green"
    		});
    		rect7.mousemove(function(e){ 
    			if(this.text != undefined) this.text.remove();

			  	this.text = paper7.text(100, 20, e.clientX + "," + e.clientY).attr({
				  	'font-size': 11,  
				  	'fill': 'red',  
				  	'text-anchor': 'start'  
				});
			});
		</script>
	</body>
</html>

8.2. 效果图

自由与束缚JavaJavaScript
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Raphael.js 在vue中使用说明, 以杭州市地图为例
wxj_ios的博客
01-16 4314
一、Vue中引入raphael.js   npm install --save raphael 二、组件component中新建，下面为代码                import Raphael from 'raphael';                export default {                   name: 'china_map',
kernel_xiaomi_raphael
02-23
kernel_xiaomi_raphael
使用Raphael 画图(三) 事件 (javascript)
weixin_30855099的博客
10-25 255
这章展示事件例子。 下图是官方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.9...
raphael入门到精通---属性和事件篇
dd922922的博客
01-24 288
属性的使用 上一篇文章我们介绍了raphael如何生成基本的图形（元素）,对于每个元素来讲，我们可以添加很多的元素（attr） 下面我就来简单的介绍下元素属性的使用（path元素属性我后面单独列出来介绍） 添加属性的方法是attr()，它有四种传值方式 attrName,value 不解释 params(一个json对象) attrName 传入一个属性名字它将返回对应的...
C#零基础学习笔记011-事件和委托
星月相随的专栏
04-02 131
11.事件和委托 　　1.委托定义 　　　　委托和类一样，是一种用户自定义的类型（所以也是引用类型）。但类表示的是数据和方法的集合，而委托则持有一个或多个方法，以及一系列的预定义操作。 　　　　委托是类型，就好像类是类型一样。与类一样，委托类型必须在被用来创建变量以及类型的对象之前声明。 　　　　　　delegate void MyDel(int x); 　　　　创建委托对象 　　　　委托类型 变量 1 2 3 4 5 6 ...
011事件处理方式一
复行数十步
05-13 138
Module Module1 Class UserLogin '1.声明事件 Public Event Logon(ByVal UserName As String) Sub CheckUser(ByVal user As String) If user.Equals("Admin") Then 'Equals区分大小写 Console.WriteLine("登录成功") .
device_xiaomi_raphael
02-13
标题“device_xiaomi_raphael”暗示我们正在讨论小米（Xiaomi）设备的一个特定型号或开发项目，可能与智能手机或者平板电脑相关。"raphael"可能是设备的内部代号或者开发版本名称，通常在软件更新和定制Android系统...
device_xiaomi_raphael_test
02-16
【标题】"device_xiaomi_raphael_test" 指的是小米公司某款设备的测试项目，可能涉及到了硬件适配、系统优化以及性能验证等多个方面。在Android系统开发中，"device_xiaomi_raphael_test" 可能是特定于小米 Raphael ...
vue中使用raphael.js实现地图绘制
weixin_30932215的博客
08-02 796
一、效果图 二、在vue中引入raphael.js npm i raphael -S 三、封装一个名为StreetMap的组件，代码如下 1 <template> 2 <div> 3 <div id='streetMap'> 4 <div class="tips" v-show="tipsSho...
raphael.js中拖拽事件在笔记本上不可触发的问题
gdutRex的博客
11-27 326
问题描述 最近在改以前的项目代码，问题是通过raphael.js创建出来的svg元素拖动的事件在一些笔记本拖拽不了。 一开始还以为是浏览器版本的问题，所以更换浏览器发现还是不行。 并且不同笔记本还会出现不同的表现，有些笔记本可以，有些笔记本不可以。 问题追踪 在这个过程中，不管在哪个平台，页面都没有报错，代码都是正常运行的，这个就需要从raphael.js中找到答案。 结果发现项目中引用的是rapheal-min的压缩之后的代码，可读性不强。 所以就去找没有压缩过的代码去看。 源码阅读 一开始还以为源码很难
vue如何集成raphael.js中国地图的方法示例
10-19
最近的数据统计项目中要用到中国地图，也就是在地图上动态的显示某个时间段某个省份地区的统计数据，我们不需要flash，仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作。本文就给大家介绍了关于利用vue集成raphael.js中国地图的相关资料，需要的朋友可以参考下。
基于Raphael编写的在线流程设计器前台部分
06-28
基于Raphael编写的流程设计器控件，只有前台部分，拖曳即可新建节点，点击箭头后在两个节点之间拖曳即可生成箭头路径，双击执行和审批节点，可以设置节点属性（定义审批人等逻辑），双击判断节点的转出箭头，可以定义判断逻辑。基于Raphael和Jquery开发，完全不依赖于ext等框架，属性设置使用的easyui，用的w3cDOM生成xml代码，点击保存后会弹出最终的jpdl内容与可以保存到数据库的图像对应json（此json还可以在页面重新加载，即可实现流程图图像内容的持久保存）
Raphael.js简易教程
学如逆水行舟，不进则退
05-26 8816
Raphael.js 的教程非常简单，仅首页一段代码，然后就是 Reference。但作者在 Reference 部分也惜墨如金，不肯多费几句。所以有这一篇中文，对如何使用 Raphael.js 做个简单介绍。 调用 Raphael.js 首先在 HTML 页面调用 raphael.js： 用法 用 Raphael 方法创建一块画布， var paper = Raphael(10, 5
关于Raphael开发过程中的一些总结
天堂那汪泉水
11-25 4823
依赖 jquery.js raphael.js jquery.json.js shape-path.js 调用方法 本工具的静态成员，使用'd$'或者'FinfoView'访问 d$.color string笔触颜色 d$.current object当前选中的对象 d$.p Object当前页面的画布 d$.p.map--
vue-cli创建的项目的目录结构及说明
每天进步一点点！
06-17 816
原文地址：https://blog.csdn.net/chao2458/article/details/81284522
Raphael属性学习--基本
少健终望成，波中取千金----张少波
03-25 1221
使用步骤： a：下载Raphael.js并导入相应的页面（推荐放在下部，HTML的编译过程是有顺序的，放在title下边，容易导致页面加载过程中的中断现象） b:定义画布。 在浏览器视图中定义：    var paper = Raphael.paeper(x,y,width,height);xy分别为画布的绝对位置，width和height为画布的宽和高 给指定元素定义画布：   va
Raphael成图中的一点注意
u010675594的专栏
02-21 387
    近期，客户有在系统中基于坐标点简单成图的需求。经过技术研究及兼容性等的考虑，选用了Raphael技术。但是在绘图的时候发现与用gis软件（如ArcGIS）成的图是颠倒的。经过分析后得知原因是gis软件选用的(0,0)点在左下，而Raphael选用的(0,0)点在左上。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值