如何在React中无需鼠标或触控板设置光标位置？

一、网页内模拟光标（无系统权限，纯前端实现） #

如果不需要控制真实系统光标，仅在网页内实现手部导航交互，用DOM元素模拟光标即可，配合Handpose的关键点输出：

• 新建一个固定定位的div作为自定义光标，比如<div id="custom-cursor"></div>，设置圆形、半透明等样式。
• 通过Handpose获取食指指尖的归一化坐标（范围0-1），将其映射到网页视口坐标，动态修改自定义光标的top和left样式。
• 模拟点击：识别食指与拇指捏合动作时，触发光标下方元素的click事件，或切换光标样式为点击态。

示例代码片段：

// 假设已通过Handpose获取食指指尖归一化坐标x、y
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const cursor = document.getElementById('custom-cursor');

// 映射坐标到网页视口
const cursorX = x * viewportWidth;
const cursorY = y * viewportHeight;

// 设置自定义光标位置
cursor.style.left = `${cursorX}px`;
cursor.style.top = `${cursorY}px`;

// 检测捏合动作并模拟点击（假设pinchDistance是指尖间距的归一化值）
if (pinchDistance < 0.05) {
  const targetElement = document.elementFromPoint(cursorX, cursorY);
  targetElement?.click();
}

二、控制真实系统光标（需桌面端辅助） #

受浏览器安全策略限制，前端JS无法直接控制系统光标，需借助桌面端工具或框架：

• Electron框架：若项目是Electron桌面应用，可通过robotjs库（或官方mouse模块）实现。流程：网页端Handpose识别坐标后，通过IPC通信传给主进程，主进程调用robotjs.moveMouse(x, y)移动系统光标。
• Python辅助脚本：用pyautogui库控制光标，前端通过WebSocket或HTTP请求将坐标传给本地运行的Python服务，Python调用pyautogui.moveTo(x, y)完成光标移动。

示例Electron主进程代码片段：

const { ipcMain } = require('electron');
const robot = require('robotjs');

ipcMain.on('move-cursor', (event, {x, y}) => {
  // 把网页坐标映射到屏幕尺寸
  const { width: screenWidth, height: screenHeight } = robot.getScreenSize();
  robot.moveMouse(x * screenWidth, y * screenHeight);
});

三、实用提示 #

• 坐标映射：Handpose输出的是视频流相对坐标，需根据网页视口或屏幕尺寸做比例转换，避免光标偏移。
• 平滑处理：手部识别坐标可能抖动，可通过取最近几帧平均值的插值算法，让光标移动更流畅。
• 权限配置：桌面端方案需用户授予应用控制鼠标的权限，Electron打包时要注意权限声明，Python脚本需本地运行。

内容的提问来源于stack exchange，提问作者Andrew Xu