虚拟轮杆实现触摸屏模拟游戏手柄

唉~

唉！

唉~

这里我是封装成一个组件了，可以直接CV

<template><div id="joystick"><div id="stick"></div></div>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {// 标识当前触摸时的IDlet ID: number | null;// 获取虚拟轮杆和轮杆的DOM元素let joystick = document.getElementById("joystick");let stick = document.getElementById("stick");// 计算虚拟轮杆和轮杆的尺寸和位置参数let joystickSize = joystick.offsetWidth; // 获取虚拟轮杆的宽度let stickSize = stick.offsetWidth; // 获取轮杆的宽度let maxDistance = joystickSize / 2 - stickSize / 2; // 计算轮杆最大可移动距离let centerX = joystickSize / 2; // 计算虚拟轮杆的中心点横坐标let centerY = joystickSize / 2; // 计算虚拟轮杆的中心点纵坐标let currentX = centerX; // 初始化轮杆的当前横坐标为中心点横坐标let currentY = centerY; // 初始化轮杆的当前纵坐标为中心点纵坐标let angle = 0; // 初始化轮杆的当前角度为0let distance = 0; // 初始化轮杆和中心点的距离为0let degrees = 0; // 初始化需要展现的角度// 更新轮杆的位置和角度function updateStickPosition(x, y) {// 计算轮杆和中心点的距离和角度let dx = x - centerX; // 计算轮杆和中心点的横向距离let dy = y - centerY; // 计算轮杆和中心点的纵向距离distance = Math.min(Math.sqrt(dx * dx + dy * dy), maxDistance); // 计算轮杆和中心点的距离，取最小值angle = (Math.atan2(dy, dx) * 180) / Math.PI; // 计算轮杆和中心点的角度，转换为角度值// 计算轮杆的当前位置currentX = centerX + distance * Math.cos((angle * Math.PI) / 180); // 计算轮杆的当前横坐标currentY = centerY + distance * Math.sin((angle * Math.PI) / 180); // 计算轮杆的当前纵坐标// 移动轮杆到当前位置stick.style.transform = "translate(" + (currentX - centerX) + "px, " + (currentY - centerY) + "px)"; // 移动轮杆到当前位置if (angle < 0) {degrees = Math.floor((angle * 180) / Math.PI + 360);} else {degrees = Math.floor((angle * 180) / Math.PI);}console.log(degrees);}// 鼠标按下事件处理函数joystick.addEventListener("mousedown", function (e) {e.preventDefault(); // 阻止默认事件const rect = joystick.getBoundingClientRect(); // 获取相对于视口信息updateStickPosition(e.clientX - rect.left, e.clientY - rect.top);//更新轮杆的位置和角度document.addEventListener("mousemove", onMouseMove); // 添加鼠标移动事件监听器document.addEventListener("mouseup", onMouseUp); // 添加鼠标松开事件监听器});// 触摸屏按下事件处理函数joystick.addEventListener("touchstart", function (e) {e.preventDefault(); // 阻止默认事件let touch = e.changedTouches[0]; // 获取第一个触摸点const rect = joystick.getBoundingClientRect();// 获取相对于视口信息updateStickPosition(touch.clientX - rect.left, touch.clientY - rect.top);//更新轮杆的位置和角度document.addEventListener("touchmove", onTouchMove); // 添加触摸屏移动事件监听器document.addEventListener("touchend", onTouchEnd); // 添加触摸屏松开事件监听器});// 鼠标移动事件处理函数function onMouseMove(e) {e.preventDefault(); // 阻止默认事件const rect = joystick.getBoundingClientRect(); // 获取相对于视口信息updateStickPosition(e.clientX - rect.left, e.clientY - rect.top);//更新轮杆的位置和角度}// 鼠标松开事件处理函数function onMouseUp(e) {e.preventDefault(); // 阻止默认事件document.removeEventListener("mousemove", onMouseMove); // 移除鼠标移动事件监听器document.removeEventListener("mouseup", onMouseUp); // 移除鼠标松开事件监听器updateStickPosition(centerX, centerY); // 将轮杆移动回中心点}// 触摸屏移动事件处理函数function onTouchMove(e) {e.preventDefault(); // 阻止默认事件for (let i = 0; i < e.changedTouches.length; i++) {// 获取触摸点let touch = e.changedTouches[i];// 查早当前的出点if (touch.identifier == ID) { // 获取相对于视口信息const rect = joystickDom.value.getBoundingClientRect();//更新轮杆的位置和角度updateStickPosition(touch.clientX - rect.left, touch.clientY - rect.top);}}let touch = e.changedTouches[0]; const rect = joystick.getBoundingClientRect();updateStickPosition(touch.clientX - rect.left, touch.clientY - rect.top);}// 触摸屏松开事件处理函数function onTouchEnd(e) {e.preventDefault(); // 阻止默认事件document.removeEventListener("touchmove", onTouchMove); // 移除触摸屏移动事件监听器document.removeEventListener("touchend", onTouchEnd); // 移除触摸屏松开事件监听器updateStickPosition(centerX, centerY); // 将轮杆移动回中心点ID = null; // 清除当前触摸的ID}
});
</script>

<style scoped>
#joystick {position: relative;width: 200px;height: 200px;border-radius: 50%;background-color: #ccc;
}#stick {position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin-top: -25px;margin-left: -25px;border-radius: 50%;background-color: #f00;
}
</style>

虚拟轮杆实现触摸屏模拟游戏手柄相关推荐

问答| 在四轮驱动机器人(SSMR)运动学模型中，左右虚拟轮的线速度vl和vr如何得到？
关注同名微信公众号"混沌无形",有趣好文! 原文链接:https://mp.weixin.qq.com/s/Fzrpn5_3TB6apqG2Ds1v5Q(包含原文PDF百度云下载链 ...
Android 手机模拟游戏手柄（USB，C#，winio）
Android 手机模拟游戏手柄(USB,C#,winio) 使用的知识点:Android服务器通过USB连接PC端,winio发送键盘消息,Socket编程,线程,Android多点触控先说下思路 ...
Android 模拟游戏手柄按键（跨进程 KeyEvent 事件）实践方案
Android 模拟游戏手柄按键(跨进程 KeyEvent 事件)实践方案
RoboGUIDE v2.3.1-ISO 1CD(自控软件,一款使用虚拟机器人控制技术的机器人模拟软件)
RTI.ScopeTools.v4.0c.CP1.for.VxWorks-ISO 1CD VMware.VirtualCenter.v2.0-ISO 1CD(虚拟架构管理软件) VMware.Work ...
2020 CCF非专业级别软件能力认证第一轮(LGR-10)洛谷模拟试题试卷
2020 CCF非专业级别软件能力认证第一轮 (LGR-10)洛谷模拟试题试卷认证时间:2020年10月8日09:30-11:30 一.单项选择题(共15题,每题2分,共计30分:每题有且仅有一个正 ...
微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放
微信小程序自带的方法 wx.previewMedia 预览图片和视频. 图片 wx.previewImage 支持PC端可以进行播放, 视频没有找到对应的方法在真机和手机端都可以进项展示,PC端不 ...
三菱fx3u plc程序自己写的三菱fx3u程序有伺服定位控制触摸屏模拟量 FB模块编程方式很清楚明了
三菱fx3u plc程序自己写的三菱fx3u程序有伺服定位控制触摸屏模拟量 FB模块编程方式很清楚明了适合初学者学习 :828668626283056工控老司机
linux虚拟arm环境环境,Ubuntu 模拟ARM开发环境
为了简化开发和测试过程,Ubuntu从9.10开始提供静态的ARM虚拟功能,可以直接在PC机上建立ARM机器的chroot环境,既可以编译,也可以测试程序.相比于交叉编译而言,这种方法虽然编译速度较慢 ...
虚拟蜜罐：从信息模拟到实现虚拟蜜罐技术
前言:虚拟蜜罐是由一台计算机模拟的系统,但是可以响应发送给虚拟蜜罐的网络流量,今天我们来浅析一下虚拟蜜罐. 蜜罐可以运行任何操作系统和任意数量的服务.蜜罐根据交互程度(Level ofInvolvem ...

虚拟轮杆实现触摸屏模拟游戏手柄

虚拟轮杆实现触摸屏模拟游戏手柄相关推荐

最新文章

热门文章