模仿苹果手机屏幕的虚拟键,可以在手机上随意拖动

使用JavaScript实现可拖动屏幕虚拟键
本文介绍如何利用JavaScript实现类似苹果手机屏幕上的可拖动虚拟键。通过监听touchmove事件,实时计算按钮的偏移量并限制其在屏幕内的移动范围,确保其始终可见。代码已上传至GitHub,感兴趣的同学可以查看并给予支持。

自己在开发项目时,需要做一个可以在屏幕上随意拖动的按钮,类似苹果机的虚拟键,先看一下我做好的效果,如图:



效果就是那个“主页”按钮可以随意拖动,我是用原生js写的,代码如下:

        var homeBtn = document.getElementById("HomeBtn");
        var width = document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
        homeBtn.addEventListener('touchmove', function (event) {
            event.preventDefault();
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];
                moveleft = touch.pageX-22;
                movetop = touch.pageY-25;
                if(moveleft<0){moveleft=0;}
                if(moveleft>(width-43)){ moveleft = width - 43}
                if (movetop < 0) {movetop = 0;}
                if (movetop > (height-50)) { movetop = height - 50; }
                homeBtn.style.top = movetop+'px';
                homeBtn.style.left = moveleft + 'px';
            };
        }); 

大致思路:就是给按钮加上touchmove事件,每次拖动时计算出它的偏移量,计算好值范围,然后赋值上去就可以了。这个函数和我以前写的进度条效果是一样的,就是多了个值而已。具体的代码可以到我的GitHub上下载看看(在index.html页面上),觉得可以就给颗星星喽   https://github.com/leileibrother/slippage

注意:函数里面的数字不是随意写的!!!是要计算的!!!



### Unity中为手机游戏实现虚拟按键 在Unity中为手机游戏实现虚拟按键是一种常见的需求,可以通过UI系统结合Input模块来完成。以下是一个完整的解决方案[^1]: #### 创建虚拟按键 使用Unity的Canvas和Button组件创建虚拟按键。首先,在Hierarchy窗口中右键选择`UI -> Button`来添加一个按钮到场景中。调整按钮的位置、大小和样式以适应手机屏幕。 ```csharp using UnityEngine; using UnityEngine.UI; public class VirtualButton : MonoBehaviour { public Button button; // 将Button拖拽到此字段 public void Initialize() { if (button != null) { button.onClick.AddListener(() => OnButtonClick()); } } private void OnButtonClick() { Debug.Log("Virtual Button Pressed!"); // 在这里添加按键逻辑 } } ``` #### 检测触摸输入 对于更复杂的控制(如移动或射击),需要检测屏幕上的触摸位置并映射到虚拟按键区域。通过`Input.touchCount`和`Input.GetTouch`可以实现触摸检测[^2]。 ```csharp void Update() { if (Input.touchCount > 0) { Touch touch = Input.GetTouch(0); Vector2 touchPosition = Camera.main.ScreenToWorldPoint(touch.position); if (IsTouchInButtonArea(touchPosition, button)) { OnButtonClick(); } } } bool IsTouchInButtonArea(Vector2 touchPosition, Button button) { Vector2 buttonPosition = Camera.main.ScreenToWorldPoint(button.transform.position); float distance = Vector2.Distance(buttonPosition, touchPosition); return distance <= button.GetComponent<RectTransform>().rect.width / 2; } ``` #### 优化虚拟按键布局 为了适配不同设备的屏幕比例,建议将Canvas的Render Mode设置为`Screen Space - Camera`,并为其指定一个摄像机[^3]。此外,使用Anchor和Pivot调整按钮的对齐方式,确保在各种分辨率下都能正确显示。 #### 示例完整代码 以下是将上述功能整合后的完整脚本示例: ```csharp using UnityEngine; using UnityEngine.UI; public class VirtualInputManager : MonoBehaviour { public Button moveLeftButton; public Button moveRightButton; void Start() { if (moveLeftButton != null) { moveLeftButton.onClick.AddListener(() => MovePlayer(-1)); } if (moveRightButton != null) { moveRightButton.onClick.AddListener(() => MovePlayer(1)); } } void MovePlayer(int direction) { Debug.Log($"Moving Player {direction > 0 ? "Right" : "Left"}"); // 添加玩家移动逻辑 } void Update() { if (Input.touchCount > 0) { Touch touch = Input.GetTouch(0); Vector2 touchPosition = Camera.main.ScreenToWorldPoint(touch.position); if (IsTouchInButtonArea(touchPosition, moveLeftButton)) { MovePlayer(-1); } else if (IsTouchInButtonArea(touchPosition, moveRightButton)) { MovePlayer(1); } } } bool IsTouchInButtonArea(Vector2 touchPosition, Button button) { Vector2 buttonPosition = Camera.main.ScreenToWorldPoint((Vector3)button.transform.position); float distance = Vector2.Distance(buttonPosition, touchPosition); return distance <= button.GetComponent<RectTransform>().rect.width / 2; } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值