# TouchInputComponent 触摸输入组件
# 概述
TouchInputComponent 提供了监听和处理触摸事件的能力。
# 注意
一般推荐使用 UIButton 组件实现按钮功能。但如需实现自定义触摸能力,可参阅本文档。
# 使用方式
const comp = entity.addComponent(engine.TouchInputComponent);
# 触摸回调
const comp = entity.getComponent(engine.KeyboardInputComponent);
comp.onTouchStart.add(function (comp, event) {
console.log(nodeName, "TOUCH_START", event);
});
comp.onTouchEnd.add(function (comp, event) {
console.log(nodeName, "TOUCH_END", event);
});
comp.onTouchMove.add(function (comp, event) {
console.log(nodeName, "TOUCH_MOVE", event);
});
comp.onTouchCancel.add(function (comp, event) {
console.log(nodeName, "TOUCH_CANCEL", event);
});
comp.onTouchEnter.add(function (comp, event) {
console.log(nodeName, "TOUCH_ENTER", event);
});
comp.onTouchLeave.add(function (comp, event) {
console.log(nodeName, "TOUCH_LEAVE", event);
});
comp.onTouchOver.add(function (comp, event) {
console.log(nodeName, "TOUCH_OVER", event);
});
comp.onClick.add(function (comp, event) {
console.log(nodeName, "CLICK", event);
});
# 属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
touchThrough | boolean | true | 是否允许触摸事件穿透 |
hitArea | engine.Rect | null | 触摸事件响应的区域,以transform的为原点,y轴向上,x轴向右 当值为null的时候取trasform.anchor为原点trasform.size为矩形大小的区域为触摸事件响应的区域 |
clickMovementThreshold | number | Infinity | 当用户开始触摸后移动了一段距离才松开,那么需要有一个阈值来判断是否触发点击事件。 |
# TouchInputEvent
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
touches | TouchPoint[] | [] | 触点信息,每个TouchPoint包含类型为number的identifier属性来标记触点索引,readonly position: DeepImmutable<Vector2> ,readonly worldPosition: DeepImmutable<Vector2> ,readonly startWorldPosition: DeepImmutable<Vector2> 3个属性标记了事件触点在游戏世界中的一些坐标信息,用户不再需要自己维护状态或者计算值,能够节省不少开销。 |
allowThrough | boolean | 只读,是否能够穿透 | |
originalEvent | TouchEvent | 客户端原始的事件 |
# TouchInputEvent.prototype.stopTouchThrough
用于阻止事件继续穿透下去,这个方法在touchThrough属性为true的时候能够阻止事件继续穿透下去。
# 优先级与触点合并
一个物体上可能会出现多种不同类型的事件,他们会按照优先级顺序依次触发: TOUCH_START < TOUCH_MOVE < TOUCH_ENTER < TOUCH_LEAVE < TOUCH_END < CLICK < TOUCH_CANCEL
同一种事件如果有多个触点同时触发,那么并不会产生多个同种类型的事件,而是只有一个事件,所有的触点信息都在event的touches列表属性中。