Skip to content
给canvas中的元素添加事件
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes
.gitignore
README.md
canvasEvent.js
test.html

README.md

canvasEvent介绍

github canvasEvent.js

一个给canvas内部添加事件相应区域的js库。支持鼠标响应与触屏响应,简单易用,无需重绘画布元素。

原理:在canvas注册相应的事件,并给canvas内部添加几何响应区域。当交互发时,判断事件是否发生在几何响应区域。如果交互发生在几何响应区域时,响应该区域注册的事件。

初始化事件

var ces = new CE.Stage(canvas,['out','over','move','down','up','click']);

支持'out','over','move','down','up','click'六种事件。 新建ces对象后,会根据初始化的事件类型和设备类型,给canvas添加相应的事件。如果是手机设备初始化down事件后,canvas会注册touchstart。pc端当然是mousedown事件。

你也可以通过enabled方法来初始化事件

var ces = new CE.Stage(canvas,['out','over','move']);
ces.enabled('down','up','click')

禁用事件 用disabled,用法和enabled类似。

添加响应区域

事件响应区域支持三种类型:

第一种rect类型-矩形事件响应区域

var ces = new CE.Stage(canvas,['out','over','move','down','up','click']);

var rect = new CE.shape.Rect(100,100,{x:150,y:150,regX:0,regY:0});//width,height,位置信息
var A1 = new CE.Area(rect);

ces.addChild(A1)

第二种arc类型-扇形事件响应区域

var ces = new CE.Stage(canvas,['out','over','move','down','up','click']);

var arc = new CE.shape.Arc(100,0,-90,{x:400,y:400,regX:100,regY:100}));//radius 开始角度 结束角度 位置信息
var A1 = new CE.Area();
A1.shape = arc;

ces.addChild(A1);

第二种polygon类型-任意形状事件响应区域

var ces = new CE.Stage(canvas,['out','over','move','down','up','click']);

var Polygon = new CE.shape.Polygon([
		{x:100,y:0},
		{x:100,y:100},
		{x:400,y:100},
		
		{x:400,y:60},
		{x:380,y:90},
		
		{x:350,y:50},
		
		{x:380,y:10},
		{x:400,y:40},
		
		{x:500,y:0}
	],{x:200,y:200,regX:100,regY:100});//顶点坐标数组,位置信息
var A1 = new CE.Area(polygon);


ces.addChild(A1);

添加事件

给事件响应区域添加的事件必须是初始话了的事件。没有初始化的事件,添加后是没响应的。

var ces = new CE.Stage(canvas,['out','over','move']);
ces.enabled('down','up','click')

var A1 = new CE.Area(new CE.shape.Rect(100,100,{x:150,y:150,regX:0,regY:0}));
ces.addChild(A1)
A1.addEvent('down',function(e){
	console.log(this);//这里的this指向了A1
	text.innerHTML += ' | down';
})
A1.addEvent('up',function(e){
	text.innerHTML += ' | up';
})
A1.addEvent('click',function(e){
	text.innerHTML += ' | click';
})


A1.addEvent('over',function(e){
	text.innerHTML += ' | over';
})
A1.addEvent('out',function(e){
	text.innerHTML += ' | out';
})
A1.addEvent('move',function(e){
	text.innerHTML += ' | move';
})
	

事件穿透

当事件响应区域发生叠加的时候,默认情况下是不会触发底层区域的事件的。如果在这种情况下需要触发底层的事件,可以通过setPenetrate方法来实现。

假如有层A1和A2相互重叠,A1在上面,A2在下面,A2注册有click事件。默认情况下点击重叠区域是无法触发A2的点击事件的,如果想要触发底层A2的点击事件,我们需要在上层A1上这样设置:

A1.setPenetrate('click',true);

这里需要注意的是,如果你设置了out的事件穿透,那么必须在底层事件区域发生了over事件之后,底层的out事件才会触发。这里说的底层发生over事件,并不代表底层必须注册over事件。

You can’t perform that action at this time.