微信小程序之虚拟摇杆练习

这段时间研究了一下微信小程序，对小程序有了大概的了解，由于项目需要做一个虚拟摇杆，查了一下发现跟小程序相关的教程非常少，更别说是具体的一些功能实现如虚拟摇杆，所以还是自己动手做一个吧。

本教程适合对微信小程序有一些了解的新手，至于大神分分钟能实现自己想要的功能。虚拟摇杆成品如下：

OK，如果你觉得效果还行那就开始吧。我们可以先拆解虚拟摇杆的内容，一步一步实现，步骤如下：

手指拖动图片任意移动—给出一个圆形限定范围—松手返回中心点

就是这么简单，先实现第一步，拖动图片，查了一下微信小程序关于Image组件的api非常简单，好吧只能自己去其他地方查，功夫不负有心人，后来找到了Image组件的api，image组件包含三个触摸事件，分别为bindtap（触摸），bindtouchmove（触摸滑动），bindtouchend（触摸结束），知道了这个就非常简单了，我们写一下代码：

<image left:{{leftLooks}}px;top:{{topLooks}}px;" bindtouchend='ImageReturn' bindtouchmove='ImageTouchMove' bindtap="ImageTouch"  src="../../yaogan_tou.png " ></image>

ImageTouch: function (e) {
console.log("点击")
},//拖动摇杆移动
ImageTouchMove: function (e) {
console.log("拖动")
var self = this;
self.setData({
leftLooks: e.touches[0].clientX-40,
topLooks: e.touches[0].clientY-40,
})
},//松开摇杆复原
ImageReturn: function (e) {
console.log("松开")
},

这里图片拖动就实现了，e.touches[0]是触摸点坐标，减去40是为了让图片在触摸点中心。

接着我们实现限制范围，问题是两张图片如何让它们叠加，后来学习了一下小程序的布局（可参考Flex 布局教程实例篇），得到了非常大的帮助，这里采用了间距定位的方法来固定图片，代码如下：

Logs.wxml
<view class="relative"><!-- 背景图片 --><image style="width: 100px; height: 100px;" class="pic_background" src="../../yaogan_di.png"></image><!-- 摇杆图片 --><image style="width: 80px; height: 80px;left:{{leftLooks}}px;top:{{topLooks}}px;" bindtouchend='ImageReturn' bindtouchmove='ImageTouchMove' class="pic_tou" src="../../yaogan_tou.png " bindtap="ImageTouch"></image>
</view>

Logs.wxss
.relative {height: 100%;width: 100%;position: relative;
}
.pic_background {height: 100%;width: 100%;position: absolute;top: 300px;left: 150px;
}
.pic_tou {height: 100%;width: 100%;position: absolute;top: 310px;left: 160px;
}

上面代码关键是Top和left用来定位当前图片的位置，可以根据自己屏幕大小进行适当设置，我这里选的中心位置是（160，310）。

这样两张图就叠加在一起了。接着我们开始计算虚拟摇杆的位置，分为两种情况，第一种情况是在范围内拖动，很简单就是移动位置=触摸点位置。第二种情况是触摸点在范围外，就需要算得范围内离触摸点最近的距离，具体图示如下，应该都能看得懂，先获得斜边长度然后根据与半径的比例获得交点的坐标。

Logs.js
data: {
StartX:'160',
StartY:'310',
leftLooks: '',
topLooks: '',
//半径
radius: '60',
},
//拖动摇杆移动ImageTouchMove: function (e) {var self = this;var touchX = e.touches[0].clientX - 40;var touchY = e.touches[0].clientY - 40;var movePos = self.GetPosition(touchX, touchY);self.setData({leftLooks: movePos.posX,topLooks: movePos.posY})},
//获得触碰位置并且进行数据处理获得触碰位置与拖动范围的交点位置
GetPosition: function (touchX, touchY) {
var self = this;
var DValue_X;
var Dvalue_Y;
var Dvalue_Z;
var imageX;
var imageY;
var ratio;
DValue_X = touchX - self.data.StartX;
Dvalue_Y = touchY - self.data.StartY;
Dvalue_Z = Math.sqrt(DValue_X * DValue_X + Dvalue_Y * Dvalue_Y);
//触碰点在范围内
if (Dvalue_Z <= self.data.radius) {
imageX = touchX;
imageY = touchY;
imageX = Math.round(imageX);
imageY = Math.round(imageY);
return { posX: imageX, posY: imageY };
}//触碰点在范围外
else {
ratio = self.data.radius / Dvalue_Z;
imageX = DValue_X * ratio + 160;
imageY = Dvalue_Y * ratio + 310;
imageX = Math.round(imageX);
imageY = Math.round(imageY);
return { posX: imageX, posY: imageY };
}
},

最后我们再修改一下触摸结束的方法让它自动回到原点。

Logs.js
ImageReturn: function (e) {
var self = this;
self.setData({
leftLooks: self.data.StartX,
topLooks: self.data.StartY,
})
},

基本的虚拟摇杆功能就实现了，你如果想要增加其他功能如角度，也都很容易就能计算出来，这里提供一下项目用到的素材。

如果对此有疑问，可以下载源码，代码可能有一些不规范敬请谅解！

微信小程序之虚拟摇杆练习相关推荐

微信小程序iOS虚拟支付问题汇总
一.做了一款在线听课的小程序,是否涉及到小程序虚拟支付的问题? 是,影响最大的还是那些把IOS会员当做变现唯一手段的小程序.如果小程序只是服务老用户,拉新.裂变等较少,影响自然少一点. 二.什么是虚拟 ...
微信小程序之蓝牙开发虚拟摇杆
文章用于学习记录文章目录前言一.App Inventor 二.uni-app 三.微信小程序 3.1 示例&应用 3.2 服务值与特征值 3.3 控制指令 3.4 测试 3.5 十六进制 ...
微信小程序项目实战知识点总结(swiper组件自适应高度，自定义弹出层，悬浮按钮，虚拟键盘)...
1.小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 height:100vh; 2.微信小程序自定义弹出层,参考网址:https://blog.cs ...
微信小程序_调用openAi搭建虚拟伙伴聊天
微信小程序_调用openAi搭建虚拟伙伴聊天背景效果关于账号注册接口实现 8行python搞定小程序实现页面结构数据逻辑结束背景从2022年的年底,网上都是chagpt的传说,个人 ...
ios微信小程序虚拟支付解决办法
ios微信小程序虚拟支付整理介绍目前iOS端暂不支持虚拟支付,微信小程序虚拟支付仅涉及到ios端,安卓端不受影响. 小程序支付规范 https://developers.weixin.qq.com/ ...
微信小程序iPhoneX 底部虚拟Home键区域适配方案
微信小程序iPhoneX 底部虚拟Home键区域适配方案为什么要适配? 先看下iPhoneX和之前的iPhone的区别,如下图可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会 ...
php 微信小程序虚拟支付,为什么有些小程序可以做虚拟支付
您好,感谢您使用短书平台. 如果小程序审核被拒,您可以前往微信公众平台登录该小程序,在右上角通知中心查看具体被拒原因.并根据微信建议和反馈进行修改后重新提交. 常见被拒情况及解决办法 1.服务类目与页 ...
微信小程序车牌号码输入（虚拟键盘）
近日在网上看到一位博主写的微信小程序输入车牌号(有新能源),原文链接:https://blog.csdn.net/qq706352062/article/details/105554453?ops_ ...
1使用帝国cms开发微信小程序之开发前的约定
实战案例博客.新闻资讯.商城本记录适用人群: 有html,css,js前端切图的开发人员. 小程序开发其实分为两端,一端是小程序界面ui开发,另一方面是数据提供者开发. 开发所需要用到的工具和软件 ...

微信小程序之虚拟摇杆练习

微信小程序之虚拟摇杆练习相关推荐

最新文章

热门文章