参考
Cocos3.0 官方文档 节点事件
Cocos3.0 官方文档 全局事件
一、节点事件中的鼠标和触摸事件
-
Cocos Creator 支持的系统事件包含鼠标、触摸、键盘和重力传感四种，它们被称为 全局事件。
-
本章节重点介绍与 UI 节点树相关联的鼠标和触摸事件，这些事件是被直接触发在 UI 相关节点上的，所以被称为节点事件。
// 使用枚举类型来注册
node.on(Node.EventType.MOUSE_DOWN, (event) => {
console.log('Mouse down');
}, this);
1.鼠标事件
鼠标事件在桌面平台才会触发，系统提供的事件类型如下：
- Node.EventType.MOUSE_DOWN mouse-down 当鼠标在目标节点区域按下时触发一次。
- Node.EventType.MOUSE_ENTER mouse-enter 当鼠标移入目标节点区域时，不论是否按下。
- Node.EventType.MOUSE_MOVE mouse-move 当鼠标在目标节点区域中移动时，不论是否按下。
- Node.EventType.MOUSE_LEAVE mouse-leave 当鼠标移出目标节点区域时，不论是否按下。
- Node.EventType.MOUSE_UP mouse-up 当鼠标从按下状态松开时触发一次。
- Node.EventType.MOUSE_WHEEL mouse-wheel 当鼠标滚轮滚动时。
2.触摸事件
触摸事件在移动平台和桌面平台都会触发，开发者可以更好的在桌面平台调试，只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件。系统提供的触摸事件类型如下：
- Node.EventType.TOUCH_START touch-start 当手指触点落在目标节点区域内时。
- Node.EventType.TOUCH_MOVE touch-move 当手指在屏幕上移动时。
- Node.EventType.TOUCH_END touch-end 当手指在目标节点区域内离开屏幕时。
- Node.EventType.TOUCH_CANCEL touch-cancel 当手指在目标节点区域外离开屏幕时。
3. 3D节点事件
TRANSFORM_CHANGED transform-changed 当变换属性修改时，会派发一个枚举值 TransformBit，根据枚举值定义修改的变换。
4. 2D 节点事件
| 枚举对象定义 | 对应的事件名 | 事件触发的时机 |
|---|---|---|
| SIZE_CHANGED | size-changed | 当宽高属性修改时。宽高属性位于 UITransform 组件上。 |
| ANCHOR_CHANGED | anchor-changed | 当锚点属性修改时。锚点属性位于 UITransform 组件上。 |
| COLOR_CHANGED | color-changed | 当颜色属性修改时。颜色属性位于 UI 渲染组件上。 |
5.多点触摸事件
引擎有多点触摸事件的屏蔽开关，多点触摸事件默认为开启状态。对于不需要多点触摸的项目，可以通过以下代码关闭多点触摸。
macro.ENABLE_MULTI_TOUCH = false;
6.暂停或恢复节点系统事件
暂停节点系统事件
// 暂停当前节点上注册的所有节点系统事件，节点系统事件包含触摸和鼠标事件。
// 如果传递参数 true，那么这个 API 将暂停本节点和它的所有子节点上的节点系统事件。
// example
this.node.pauseSystemEvents();
恢复节点系统事件
// 恢复当前节点上注册的所有节点系统事件，节点系统事件包含触摸和鼠标事件。
// 如果传递参数 true，那么这个 API 将恢复本节点和它的所有子节点上的节点系统事件。
// example
this.node.resumeSystemEvents();
二、全局事件
全局系统事件是指与节点树不相关的各种全局事件，由 systemEvent 来统一派发，目前支持了以下几种事件：
- 鼠标事件
- 触摸事件
- 键盘事件
- 设备重力传感事件
其中，鼠标事件与触摸事件同节点系统事件类似，只是在于作用的区域不同。接下来会围绕这几个事件做个说明。
当监听全局鼠标/触摸事件的时候，所获取到的触点是基于屏幕区域（设备显示分辨率）左下角计算的。
而 UI 节点监听获取到的触点，是将全局事件获取到的触点，转换到适配后的 UI 可视区域左下角计算出的点，这两个点是不一样的。
全局触点比较适用于直接点击屏幕去操控 3D 节点的行为，而不需要为场景添加 UI 节点去做鼠标/触摸事件的监听。
1.键盘事件
import { _decorator, Component, Node, systemEvent, SystemEventType, EventKeyboard, macro } from 'cc';
const { ccclass } = _decorator;
@ccclass("Example")
export class Example extends Component {
onLoad () {
systemEvent.on(SystemEventType.KEY_DOWN, this.onKeyDown, this);
systemEvent.on(SystemEventType.KEY_UP, this.onKeyUp, this);
}
onDestroy () {
systemEvent.off(SystemEventType.KEY_DOWN, this.onKeyDown, this);
systemEvent.off(SystemEventType.KEY_UP, this.onKeyUp, this);
}
onKeyDown (event: EventKeyboard) {
switch(event.keyCode) {
case macro.KEY.a:
console.log('Press a key');
break;
}
}
onKeyUp (event: EventKeyboard) {
switch(event.keyCode) {
case macro.KEY.a:
console.log('Release a key');
break;
}
}
}
2.设备重力传感事件
import { _decorator, Component, Node, systemEvent, SystemEventType, log } from 'cc';
const { ccclass } = _decorator;
@ccclass("Example")
export class Example extends Component {
onLoad () {
systemEvent.setAccelerometerEnabled(true);
systemEvent.on(SystemEventType.DEVICEMOTION, this.onDeviceMotionEvent, this);
}
onDestroy () {
systemEvent.off(SystemEventType.DEVICEMOTION, this.onDeviceMotionEvent, this);
}
onDeviceMotionEvent (event: EventAcceleration) {
log(event.acc.x + " " + event.acc.y);
}
}
可以参考https://github.com/cocos-creator/test-cases-3d相关示例，包含了键盘、重力感应、单点触摸、多点触摸等功能的实现。
网友评论