0

0

怎么添加虚拟摇杆控制_移动端操控方案实现教程【教程】

星夢妙者

星夢妙者

发布时间:2026-02-10 18:08:03

|

623人浏览过

|

来源于php中文网

原创

虚拟摇杆偏移捕获不准是因坐标未归一化及触点绑定丢失;需用getBoundingClientRect()获取摇杆视口位置并减去left/top,再结合visualViewport.scale修正缩放;touchstart须缓存identifier,touchmove中匹配处理;角度计算前应设死区过滤抖动。

怎么添加虚拟摇杆控制_移动端操控方案实现教程【教程】

虚拟摇杆在移动端无法直接用 touchstart / touchmove 精准捕获偏移?不是代码写错了,是事件坐标没做归一化 + 触点绑定丢失导致的。

为什么 getBoundingClientRect() 后还要手动减去 clientX 偏移?

摇杆中心定位依赖视口坐标,但 TouchEventclientX / clientY 是相对于整个页面的,而摇杆容器可能有滚动、缩放或 CSS transform。不减去容器左上角的真实视口位置,拖拽就会“漂移”。

  • 必须用 element.getBoundingClientRect() 获取摇杆区域在视口中的实际矩形
  • 再用 touch.clientX - rect.left 得到相对摇杆中心的局部坐标
  • 如果页面启用了 viewport 缩放(如 width=device-width, initial-scale=1 未设),clientX 会失真,此时需额外除以 window.visualViewport.scale

ontouchmove 触发时拿不到持续 touch 对象?

移动端浏览器默认会在 touchstart 后释放 touch 对象引用,导致后续 touchmoveevent.touches[0] 可能为空,尤其在快速滑动或多指操作时。

海螺语音
海螺语音

海螺AI推出的AI语音生成工具,支持多种语种、情绪和效果。

下载
  • 必须在 touchstart 阶段缓存 event.touches[0].identifier 和初始位置
  • touchmove 中遍历 event.changedTouches,只处理 identifier 匹配的那一个触点
  • 不要依赖 event.touches[0] —— 多指场景下它不一定是你按下的那个

摇杆角度和力度怎么算才不抖?

原始坐标差值直接转角度(Math.atan2(dy, dx))没问题,但未过滤微小移动会导致角度跳变、角色原地打转。

  • 先计算偏移长度:const dist = Math.sqrt(dx*dx + dy*dy)
  • 设定死区半径(如 20px),if (dist
  • 归一化 power:用 Math.min(dist / maxRadius, 1),避免手指超出摇杆区域后 power 突变
  • 角度建议用 angle = Math.atan2(-dy, dx)(Y 轴翻转适配 canvas 坐标系)

真正麻烦的是 iOS Safari 的 passive touch 事件限制——不加 { passive: false }preventDefault() 会被忽略,导致摇杆拖拽被页面滚动劫持。这个点上线前不测真机,99% 掉坑里。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

803

2023.08.22

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

541

2023.09.20

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

520

2023.10.23

Docker容器化部署与DevOps实践
Docker容器化部署与DevOps实践

本专题面向后端与运维开发者,系统讲解 Docker 容器化技术在实际项目中的应用。内容涵盖 Docker 镜像构建、容器运行机制、Docker Compose 多服务编排,以及在 DevOps 流程中的持续集成与持续部署实践。通过真实场景演示,帮助开发者实现应用的快速部署、环境一致性与运维自动化。

0

2026.02.11

Rust异步编程与Tokio运行时实战
Rust异步编程与Tokio运行时实战

本专题聚焦 Rust 语言的异步编程模型,深入讲解 async/await 机制与 Tokio 运行时的核心原理。内容包括异步任务调度、Future 执行模型、并发安全、网络 IO 编程以及高并发场景下的性能优化。通过实战示例,帮助开发者使用 Rust 构建高性能、低延迟的后端服务与网络应用。

1

2026.02.11

Spring Boot企业级开发与MyBatis Plus实战
Spring Boot企业级开发与MyBatis Plus实战

本专题面向 Java 后端开发者,系统讲解如何基于 Spring Boot 与 MyBatis Plus 构建高效、规范的企业级应用。内容涵盖项目架构设计、数据访问层封装、通用 CRUD 实现、分页与条件查询、代码生成器以及常见性能优化方案。通过完整实战案例,帮助开发者提升后端开发效率,减少重复代码,快速交付稳定可维护的业务系统。

3

2026.02.11

包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法
包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法

本专题汇总了包子漫画官网和网页版入口,提供最新章节抢先看方法、正版免费阅读指南,以及稳定访问方式,帮助用户快速直达包子漫画页面,无广告畅享全集漫画内容。

137

2026.02.10

MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法
MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法

本专题汇总了MC.JS官网入口和网页版快速畅玩方法,提供免安装访问、不同版本(1.8.8、1.12.8)在线体验指南,以及正版网页端操作说明,帮助玩家轻松进入MC.JS世界,实现即时畅玩与高效体验。

80

2026.02.10

谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程
谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程

本专题汇总了谷歌邮箱网页版的最新登录入口和注册方法,详细提供官方账号快速访问方式、网页版操作教程及安全登录技巧,帮助用户轻松管理Gmail邮箱账户,实现高效、安全的邮箱使用体验。

65

2026.02.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号