这两天打算做一个手机H5控制电脑的屏幕的小工具，已经做好了鼠标滑动的逻辑，还差鼠标点击、双击功能、键盘输入等的功能就不先都漏出来啦。
主要使用nodejs、robotjs、socket.io.js。
昨天写了一晚上的，终于把这个触控板逻辑写好了，发出来先显摆显摆~嘿嘿😋

基本逻辑

名词解释：

  • 被控制电脑 === 服务端
  • 触控板 === 客户端

1、当触控触摸板touchstart时，客户端获取当前触控板点击位置的坐标，并通知服务端获取当前鼠标位置的坐标；
2、当touchmove时，客户端获取当前手指所在的位置减去touchstart时的位置得到一个向量，把这个向量传递给服务端，服务端根据第一步获取的鼠标位置加这个向量得到新的鼠标位置。（就是一个映射~）

客户端触控板基本逻辑

  1. const socket = io("http://172.19.133.243:8999/");
  2. socket.on("connect", function () {
  3.   socket.emit("message", { x: 0, y: 0 });
  4. });
  6. const controllArea = $("#controllArea");
  8. const bodyWidth = controllArea.width();
  9. const bodyHeight = controllArea.height();
  10. const offsetTop = controllArea[0].offsetTop;
  11. // 1、客户端向服务端发送设备信息
  12. socket.emit("deviceInfo", {
  13.   offsetTop: offsetTop,
  14.   width: bodyWidth,
  15.   height: bodyHeight,
  16. });
  19. let startX, startY;
  20. let startTime;
  21. // 3、触控开始向服务端发送信号
  22. controllArea.on("touchstart", function (e) {
  23.   startTime = new Date().getTime();
  24.   startX = e.originalEvent.changedTouches[0].pageX;
  25.   startY = e.originalEvent.changedTouches[0].pageY;
  26.   socket.emit("touchstartMessage");
  27.   return false;
  28. });
  30. let moveEndX, moveEndY;
  31. // 5、鼠标滑动向服务端发送一个基于触控开始的向量
  32. controllArea.on("touchmove", function (e) {
  33.   const ev = e.originalEvent.changedTouches[0];
  34.   moveEndX = ev.clientX;
  35.   moveEndY = ev.clientY;
  36.   const X = moveEndX - startX;
  37.   const Y = moveEndY - startY;
  38.   const data = {};
  39.   data.x = X;
  40.   data.y = Y;
  41.   socket.emit("message", data);
  42.   return false;
  43. });

服务端被控制电脑逻辑

  1. socket.on("connection", function (client) {
  2.   // 被控制设备的尺寸
  3.   let computerInfoWidth;
  4.   let computerInfoHeight;
  5.   // 控制设备的控制区域尺寸
  6.   let controlDeviceInfoWidth;
  7.   let controlDeviceInfoHeight;
  8.   let offsetTop;
  9.   // 设备控制比例
  10.   const transformRate = {
  11.     x: 1,
  12.     y: 1,
  13.     offsetTop: 0,
  14.   };
  16.   // 获取控制设备的触控区域信息和被控制设备的尺寸信息，做触控灵敏度
  17.   // 3、服务端获取客户端发送的设备信息
  18.   client.on("deviceInfo", function (data) {
  19.     computerInfoWidth = robot.getScreenSize().width;
  20.     computerInfoHeight = robot.getScreenSize().height;
  21.     controlDeviceInfoWidth = data.width;
  22.     controlDeviceInfoHeight = data.height;
  23.     offsetTop = data.offsetTop;
  24.     transformRate.x = parseInt(computerInfoWidth / controlDeviceInfoWidth);
  25.     transformRate.y = parseInt(computerInfoHeight / controlDeviceInfoHeight);
  26.     transformRate.offsetTop = parseInt(offsetTop);
  27.   });
  29.   // 3、触摸开始获取当前鼠标在电脑上的位置
  30.   let mouse;
  31.   client.on("touchstartMessage", function () {
  32.     mouse = robot.getMousePos();
  33.   });
  35.   // 6、根据客户端发送的向量和滑动速率进行鼠标的移动
  36.   //    最大不大过服务端屏幕宽度，最小不小于0
  37.   client.on("message", function (data) {
  38.     try {
  39.       const posiX = Math.max(
  40.         Math.min(
  41.           parseInt(mouse.x + data.x * transformRate.x),
  42.           computerInfoWidth
  43.         ),
  44.         0
  45.       );
  46.       const posiY = Math.max(
  47.         Math.min(
  48.           parseInt(mouse.y + data.y * transformRate.y),
  49.           computerInfoHeight
  50.         ),
  51.         0
  52.       );
  53.       robot.moveMouse(parseInt(posiX), parseInt(posiY));
  54.     } catch (error) {
  55.       console.error("moveMouse error: ", error);
  56.     }
  57.   });
  59. });