### 事件
OkayPainter提供了一套基于元素对象的事件处理机制,事件类型可分为框架事件和用户自定义事件。
框架事件目前支持以下事件:
* okay.Event.Type.EVENT_MOUSE_DOWN:鼠标按下事件,
* okay.Event.Type.EVENT_MOUSE_MOVE:鼠标移动事件,
* okay.Event.Type.EVENT_MOUSE_UP:鼠标弹起事件,
* okay.Event.Type.EVENT_KEY_DOWN:键盘按下事件,
* okay.Event.Type.EVENT_KEY_PRESS:键盘按键事件,
* okay.Event.Type.EVENT_KEY_UP:键盘弹起事件。
对于所有OkayPainter实现的基本图形都已经实现了上述事件,对于用户自定义的Node,用户只需要重写Node函数`containPoint`方法即可。例如基本图形中扇形重写了Node的`containPoint`方法:
~~~
containPoint(_p) {
let dist = (_p.x - this.position.x)*(_p.x - this.position.x) + (_p.y - this.position.y) * (_p.y - this.position.y)
if(dist > this.radius * this.radius) {
return false
}
let tan = -(_p.y - this.position.y)/(_p.x - this.position.x)
let atan = Math.atan(tan)
if(_p.x < this.position.x && _p.y < this.position.y) {
atan = Math.PI + atan
}else if(_p.x < this.position.x && _p.y > this.position.y) {
atan = Math.PI * 3/2 + atan
}else if(_p.x > this.position.x && _p.y > this.position.y) {
atan = Math.PI * 2 + atan
}
if(this.stop < this.start) {
return atan >= this.start || atan <= this.stop
}else {
return atan >= this.start && atan <= this.stop
}
}
~~~
#### 注册事件
我们可以通过Node的addEventListener进行事件注册,如:
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let image = new okay.Image('assert/BluePlane.png') //创建一个图片元素,图片地址assert/BluePlane.png
image.setPosition(300,300)
canvas.addChild(image)
image.addEventListener(okay.Event.Type.EVENT_MOUSE_DOWN,(e, obj) =>{
console.log(obj.width)
})
canvas.paint()
~~~
**需要注意的是,事件的注册必须在该元素被添加到Canvas容器中之后才能成功注册。**
#### 事件的触发
对于用户自定义注册的事件,我们可以调用Node的trigger方法触发事件函数:
~~~
image.trigger('user_event');
~~~
