AI写作智能体 自主规划任务,支持联网查询和网页读取,多模态高效创作各类分析报告、商业计划、营销方案、教学内容等。 广告
### 事件 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'); ~~~