diff --git a/QuickStart/Web/README.md b/QuickStart/Web/README.md index 3dda2e4..543def8 100644 --- a/QuickStart/Web/README.md +++ b/QuickStart/Web/README.md @@ -20,6 +20,7 @@ 16. 虚拟键鼠 17. 本地输入法显示中文合成过程 18. 自动回收时长 +19. 触控转鼠标 方便用户快速接入云游戏客户端 Web SDK。 @@ -57,6 +58,7 @@ │   │   ├── sync-local-keyboard-close-status.js # 同步本地键盘状态到云端 │   │   ├── update-video-scale.js # 更新画面放缩比 │   │   ├── virtual-input-suite.js # 虚拟键鼠 +│   │   ├── touch-to-mouse-event.js # 触控转鼠标 │   └── style.css # 样式文件 └── vite.config.js # vite 配置文件 └── .env # Web SDK 启动需要的配置 diff --git a/QuickStart/Web/src/constant.js b/QuickStart/Web/src/constant.js index c079a30..59525ea 100644 --- a/QuickStart/Web/src/constant.js +++ b/QuickStart/Web/src/constant.js @@ -142,3 +142,24 @@ export const veGamePadList = [ value: veGamePad.DisableVibrate, }, ]; + +// 触控类型 +export const ACTION = { + DOWN: 0, + UP: 1, + MOVE: 2, + TOUCH_START: 0, + TOUCH_END: 1, + TOUCH_MOVE: 2, + WHEEL: 8, + PC_TOUCH_UP: 0, + PC_TOUCH_DOWN: 1, + PC_TOUCH_MOVE: 2, +}; + +// 鼠标按键 +export const MOUSE_BUTTON = { + LEFT: 0, + CENTER: 1, + RIGHT: 2, +}; diff --git a/QuickStart/Web/src/features/index.js b/QuickStart/Web/src/features/index.js index c551927..9febaa2 100644 --- a/QuickStart/Web/src/features/index.js +++ b/QuickStart/Web/src/features/index.js @@ -17,3 +17,4 @@ export { default as getUserProfilePath } from "./get-user-profile-path.js"; export { default as setTouchToMouse } from "./set-touch-to-mouse.js"; export { default as virtualInputSuite } from "./virtual-input-suite.js"; export { default as gamePad } from "./game-pad.js"; +export { default as touchToMouseEvent } from "./touch-to-mouse-event.js"; diff --git a/QuickStart/Web/src/features/touch-to-mouse-event.js b/QuickStart/Web/src/features/touch-to-mouse-event.js new file mode 100644 index 0000000..e717026 --- /dev/null +++ b/QuickStart/Web/src/features/touch-to-mouse-event.js @@ -0,0 +1,76 @@ +import { ACTION, MOUSE_BUTTON } from "../constant"; + +export const mouseLeftClick = async (x, y, veGameSdkInstance) => { + await veGameSdkInstance.sendMouseMessage({ + action: ACTION.MOVE, + x, + y, + }); + await veGameSdkInstance.sendMouseMessage({ + button: MOUSE_BUTTON.LEFT, + action: ACTION.DOWN, + }); + await veGameSdkInstance.sendMouseMessage({ + button: MOUSE_BUTTON.LEFT, + action: ACTION.UP, + }); +}; + +const touchToMouseMoveEvent = (veGameSdkInstance) => { + let touchstartTs = 0; // 记录touchstart的时间戳 + const clickInterval = 1000; // 如果间隔大于1s,则认为是鼠标滑动,否则认为是点击 + // 在触摸移动事件中,检查从触摸开始到当前的时间间隔, 如果时间间隔大于 dragInterval,则将状态设置为拖拽,并发送鼠标按下的消息。 + // 如果时间间隔小于 dragInterval,则继续处理为滑动。 + const dragInterval = 200; + let inTouchMove = false; + let inDrag = false; + + veGameSdkInstance.on("on-touch-event", async (touchList) => { + if (touchList.length !== 1) return; + + const { action, x, y, movementX, movementY } = touchList.pop(); + if (action === ACTION.TOUCH_START) { + touchstartTs = Date.now(); // 记录手指触屏的时间 + } + if (action === ACTION.TOUCH_END) { + inTouchMove = false; + // 拖拽过程中,手指抬起离屏 + if (inDrag) { + console.log("drag end"); + inDrag = false; + veGameSdkInstance.sendMouseMessage({ + button: MOUSE_BUTTON.LEFT, + action: ACTION.UP, + }); + return; + } + if (Date.now() - touchstartTs < clickInterval) { + mouseLeftClick(x, y, veGameSdkInstance); // 如果触屏和离屏的时间小于某个阈值,则视为一次点击 + return; + } + // 其他情况,滑动结束 + } + if (action === ACTION.TOUCH_MOVE) { + if (!inTouchMove && Date.now() - touchstartTs > dragInterval) { + inDrag = true; + // 如果是拖拽效果,鼠标左键先按下 + console.log("drag start"); + veGameSdkInstance.sendMouseMessage({ + button: MOUSE_BUTTON.LEFT, + action: ACTION.DOWN, + }); + } + // 鼠标滑动 + veGameSdkInstance.sendMouseMessage({ + action: ACTION.MOVE, + x, + y, + movementX, + movementY, + }); + inTouchMove = true; + } + }); +}; + +export default touchToMouseMoveEvent; diff --git a/QuickStart/Web/src/main.js b/QuickStart/Web/src/main.js index abb6f10..e54e3e1 100644 --- a/QuickStart/Web/src/main.js +++ b/QuickStart/Web/src/main.js @@ -196,6 +196,8 @@ function bindEventListener(veGameSdkInstance, callback) { "com.pkg3", ]), }, + // 关闭默认Touch事件 + disableDefaultTouchEvent: true, }); console.log("start success", startRes);