From d23208087550bb3b0ed2546cabc1ff5b1fa6c8bc Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 7 Jun 2023 17:39:11 +0800 Subject: [PATCH 1/3] =?UTF-8?q?H5=E8=A7=A6=E6=8E=A7=E9=80=82=E9=85=8D?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=88=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sdk/src/TouchHandler.js | 80 +++++++++++++++++------------------------ 1 file changed, 32 insertions(+), 48 deletions(-) diff --git a/sdk/src/TouchHandler.js b/sdk/src/TouchHandler.js index b043b6f..2724b28 100644 --- a/sdk/src/TouchHandler.js +++ b/sdk/src/TouchHandler.js @@ -26,6 +26,13 @@ const ORIENTATION_DEGRESS = { 'REVERSE_PORTRAIT': 180 }; +const ORIENTATION_ORIGIN = { + 'PORTRAIT': 0, + 'LANDSCAPE': 1, + 'REVERSE_LANDSCAPE': 3, + 'REVERSE_PORTRAIT': 2 +}; + export default class TouchHandler { constructor({player, isMobile, sendHandler, isDebug, autoRotate}) { // 监听触控鼠键事件的Dom @@ -79,8 +86,8 @@ export default class TouchHandler { start() { this.updateScale(); - this.resize(); - this.util.bind(window, 'resize', this.resize.bind(this)); + // this.resize(); + // this.util.bind(window, 'resize', this.resize.bind(this)); if (this.displayDom) { if (this.isMobile) { this.util.bind(this.displayDom, 'touchstart', this.onTouchStart.bind(this)); @@ -112,12 +119,10 @@ export default class TouchHandler { **/ updateOrientation(orientation) { this.orientation = orientation; - this.resize(); } updateResolution(width, height) { this.resolution = {width, height}; - this.resize(); } /** @@ -155,13 +160,16 @@ export default class TouchHandler { for (let len = touchList.length, index = 0; index < len; index++) { const touch = touchList.item(index) || {}; const existTouch = this.simulationState.touch[touch.identifier]; + let initTime = event.timeStamp if (existTouch) { + existTouch.time = event.timeStamp - initTime this.sendTouchMsg(existTouch, 'UP'); this.freeVirtualTouchId(existTouch.vId); delete this.simulationState.touch[touch.identifier]; } touch.vId = this.allocVirtualTouchId(); + touch.time = 0 this.simulationState.touch[touch.identifier] = touch; const pos = this.getCurrentMousePos(touch); this.sendTouchMsg({ @@ -169,6 +177,7 @@ export default class TouchHandler { vId: touch.vId }, this.getTouchAction('DOWN', this.simulationState)); } + console.log("start touchList: ", touchList); } onTouchMove(event) { @@ -264,23 +273,6 @@ export default class TouchHandler { } } - // 计算键盘按键位置映射信息 - calcDisplayKeyboardMap() { - let displayKeyboardMap = {}; - if (this.isKeyboardOperate()) { - let keys = Object.keys(this.keyboardMap); - keys.forEach(key => { - let pos = this.keyboardMap[key]; - displayKeyboardMap[key] = { - x: pos.left * this.displayBox.width, - y: pos.top * this.displayBox.height - }; - }); - } - - this.displayKeyboardMap = displayKeyboardMap; - } - isSameOrientation() { // 若云手机画面横屏，当前认为云手机方向为逆时针旋转90度。 // 故若不自动旋转，云手机画面竖屏时，浏览器和云手机画面方向一致； @@ -364,24 +356,6 @@ export default class TouchHandler { }; } - // 云手机画面横屏表示逆时针旋转了90度 - // 发送给server的(x, y)相对于手机竖屏时左上角的点。 - // 不管手机横屏还是竖屏，或是css旋转，监听到的触控点(x, y)的值所见即所得，其参考点始终是浏览器左上角； - // 云手机画面在本地横屏还是竖屏是相对浏览器的，也就是说，最终显示（不管是否有旋转）存在角度的都需要做位置转换 - transform(pos) { - if (this.isSameOrientation()) { - return { - x: Math.ceil(pos.x * this.scale.x), - y: Math.ceil(pos.y * this.scale.y) - }; - } - - return { - x: Math.ceil((this.displayBox.height - pos.y) * this.scale.x), - y: Math.ceil(pos.x * this.scale.y) - }; - } - // 分配虚拟ID allocVirtualTouchId() { const index = this.virtualTouchIds.indexOf(0); @@ -406,7 +380,7 @@ export default class TouchHandler { } const PACKAGE_HEADER_LENGTH = 8; - const TOUCH_MSG_BODY_LENGTH = 8; + const TOUCH_MSG_BODY_LENGTH = 17; const TOUCH_ACTION = 6; let buf = new Uint8Array(PACKAGE_HEADER_LENGTH + TOUCH_MSG_BODY_LENGTH); @@ -421,6 +395,17 @@ export default class TouchHandler { buf[11] = data.x & 0xFF; buf[12] = (data.y >> 8) & 0xFF; buf[13] = data.y & 0xFF; + buf[14] = (data.pressure >> 8) & 0xFF; + buf[15] = data.pressure & 0xFF; + buf[16] = (data.time & 0xFF000000) >> 24; + buf[17] = (data.time & 0x00FF0000) >> 16; + buf[18] = (data.time & 0x0000FF00) >> 8; + buf[19] = data.time & 0x000000FF; + buf[20] = data.orientation; + buf[21] = (data.height >> 8) & 0xFF; + buf[22] = data.height & 0xFF; + buf[23] = (data.width >> 8) & 0xFF; + buf[24] = data.width & 0xFF; return buf; } @@ -433,22 +418,21 @@ export default class TouchHandler { * touchleave ：移动的手指离开一个dom元素。 */ sendTouchMsg(touch, action) { - touch.x = Math.max(touch.x, 0); - touch.y = Math.max(touch.y, 0); - touch.x = Math.min(touch.x, this.displayBox.width); - touch.y = Math.min(touch.y, this.displayBox.height); - const pos = this.transform(touch); const msg = { - ...pos, + ...touch, action: PROTOCOL_CONFIG.ACTIONS_TYPE[action], - id: touch.vId + id: touch.vId, + pressure: 129, + time: -1, + orientation: ORIENTATION_ORIGIN[this.orientation], + height: this.displayBox.height, + width: this.displayBox.width }; const msgBuf = this.getMsgBuf(msg); this.sendHandler(msgBuf); } destroy() { - this.util.unbind(window, 'resize'); this.util.unbind(window, 'keydown'); this.util.unbind(window, 'keyup'); this.util.unbind(this.displayDom); -- Gitee From fcc799c35e24611ea92a5249ca8e625ee0672ce1 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 7 Jun 2023 17:53:22 +0800 Subject: [PATCH 2/3] =?UTF-8?q?H5=E8=A7=A6=E6=8E=A7=E9=80=82=E9=85=8D?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=88=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sdk/src/TouchHandler.js | 76 +++++++++++++++-------------------------- 1 file changed, 28 insertions(+), 48 deletions(-) diff --git a/sdk/src/TouchHandler.js b/sdk/src/TouchHandler.js index b043b6f..a1c091e 100644 --- a/sdk/src/TouchHandler.js +++ b/sdk/src/TouchHandler.js @@ -26,6 +26,13 @@ const ORIENTATION_DEGRESS = { 'REVERSE_PORTRAIT': 180 }; +const ORIENTATION_ORIGIN = { + 'PORTRAIT': 0, + 'LANDSCAPE': 1, + 'REVERSE_LANDSCAPE': 3, + 'REVERSE_PORTRAIT': 2 +}; + export default class TouchHandler { constructor({player, isMobile, sendHandler, isDebug, autoRotate}) { // 监听触控鼠键事件的Dom @@ -79,8 +86,8 @@ export default class TouchHandler { start() { this.updateScale(); - this.resize(); - this.util.bind(window, 'resize', this.resize.bind(this)); + // this.resize(); + // this.util.bind(window, 'resize', this.resize.bind(this)); if (this.displayDom) { if (this.isMobile) { this.util.bind(this.displayDom, 'touchstart', this.onTouchStart.bind(this)); @@ -112,12 +119,10 @@ export default class TouchHandler { **/ updateOrientation(orientation) { this.orientation = orientation; - this.resize(); } updateResolution(width, height) { this.resolution = {width, height}; - this.resize(); } /** @@ -264,23 +269,6 @@ export default class TouchHandler { } } - // 计算键盘按键位置映射信息 - calcDisplayKeyboardMap() { - let displayKeyboardMap = {}; - if (this.isKeyboardOperate()) { - let keys = Object.keys(this.keyboardMap); - keys.forEach(key => { - let pos = this.keyboardMap[key]; - displayKeyboardMap[key] = { - x: pos.left * this.displayBox.width, - y: pos.top * this.displayBox.height - }; - }); - } - - this.displayKeyboardMap = displayKeyboardMap; - } - isSameOrientation() { // 若云手机画面横屏，当前认为云手机方向为逆时针旋转90度。 // 故若不自动旋转，云手机画面竖屏时，浏览器和云手机画面方向一致； @@ -364,24 +352,6 @@ export default class TouchHandler { }; } - // 云手机画面横屏表示逆时针旋转了90度 - // 发送给server的(x, y)相对于手机竖屏时左上角的点。 - // 不管手机横屏还是竖屏，或是css旋转，监听到的触控点(x, y)的值所见即所得，其参考点始终是浏览器左上角； - // 云手机画面在本地横屏还是竖屏是相对浏览器的，也就是说，最终显示（不管是否有旋转）存在角度的都需要做位置转换 - transform(pos) { - if (this.isSameOrientation()) { - return { - x: Math.ceil(pos.x * this.scale.x), - y: Math.ceil(pos.y * this.scale.y) - }; - } - - return { - x: Math.ceil((this.displayBox.height - pos.y) * this.scale.x), - y: Math.ceil(pos.x * this.scale.y) - }; - } - // 分配虚拟ID allocVirtualTouchId() { const index = this.virtualTouchIds.indexOf(0); @@ -406,7 +376,7 @@ export default class TouchHandler { } const PACKAGE_HEADER_LENGTH = 8; - const TOUCH_MSG_BODY_LENGTH = 8; + const TOUCH_MSG_BODY_LENGTH = 17; const TOUCH_ACTION = 6; let buf = new Uint8Array(PACKAGE_HEADER_LENGTH + TOUCH_MSG_BODY_LENGTH); @@ -421,6 +391,17 @@ export default class TouchHandler { buf[11] = data.x & 0xFF; buf[12] = (data.y >> 8) & 0xFF; buf[13] = data.y & 0xFF; + buf[14] = (data.pressure >> 8) & 0xFF; + buf[15] = data.pressure & 0xFF; + buf[16] = (data.time & 0xFF000000) >> 24; + buf[17] = (data.time & 0x00FF0000) >> 16; + buf[18] = (data.time & 0x0000FF00) >> 8; + buf[19] = data.time & 0x000000FF; + buf[20] = data.orientation; + buf[21] = (data.height >> 8) & 0xFF; + buf[22] = data.height & 0xFF; + buf[23] = (data.width >> 8) & 0xFF; + buf[24] = data.width & 0xFF; return buf; } @@ -433,22 +414,21 @@ export default class TouchHandler { * touchleave ：移动的手指离开一个dom元素。 */ sendTouchMsg(touch, action) { - touch.x = Math.max(touch.x, 0); - touch.y = Math.max(touch.y, 0); - touch.x = Math.min(touch.x, this.displayBox.width); - touch.y = Math.min(touch.y, this.displayBox.height); - const pos = this.transform(touch); const msg = { - ...pos, + ...touch, action: PROTOCOL_CONFIG.ACTIONS_TYPE[action], - id: touch.vId + id: touch.vId, + pressure: 129, + time: -1, + orientation: ORIENTATION_ORIGIN[this.orientation], + height: this.displayBox.height, + width: this.displayBox.width }; const msgBuf = this.getMsgBuf(msg); this.sendHandler(msgBuf); } destroy() { - this.util.unbind(window, 'resize'); this.util.unbind(window, 'keydown'); this.util.unbind(window, 'keyup'); this.util.unbind(this.displayDom); -- Gitee From f3bf36e2efbc418fd037693ba486c97ea927b370 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 7 Jun 2023 17:58:55 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=97=A0=E7=94=A8?= =?UTF-8?q?=E7=9A=84=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sdk/src/TouchHandler.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/sdk/src/TouchHandler.js b/sdk/src/TouchHandler.js index a1c091e..9dbc4ed 100644 --- a/sdk/src/TouchHandler.js +++ b/sdk/src/TouchHandler.js @@ -86,8 +86,6 @@ export default class TouchHandler { start() { this.updateScale(); - // this.resize(); - // this.util.bind(window, 'resize', this.resize.bind(this)); if (this.displayDom) { if (this.isMobile) { this.util.bind(this.displayDom, 'touchstart', this.onTouchStart.bind(this)); -- Gitee