唉~
唉！
唉~
这里我是封装成一个组件了，可以直接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>
如果觉得《虚拟轮杆实现触摸屏模拟游戏手柄》对你有帮助，请点赞、收藏，并留下你的观点哦！
