需求:滑动时使三角按钮围绕圆圈转动;
在网上找了下类似的只有图表展示,并不能手动滑动。
思考过程如下:
1.实现转动的效果
通过改变旋转的角度可以让按钮转起来
transform:rotate(0deg);
transition:all .1s;
2.获取转动的角度
首先我们在图形中画个坐标轴xy,先按钮处于第一象限时,按钮旋转的角度就是bc边的夹角,
a边的长度是: 屏幕触摸位置的x值减去节点到屏幕左侧的距离再减去节点一半的宽度;
b边的长度是: 屏幕触摸位置的y值减去节点到屏幕上侧的距离再减去节点一半的高度之后取绝对值;
有了a和b的长度之后就用勾股定理算出c的长度;
用 a / c 之后用 Math.asin 方法取反正弦值 之后再 * 180/Math.PI ;
所得到的值就是bc边的夹角了;
如果按钮处于第四象限时,
这时a边与b边的计算方法调换;其他的与处于第一象限时一样,最后的角度加上90度;
第三象限与第一象限计算方法相同,最后的角度加上180度;
第二象限与第四象限计算方法相同,最后的角度加上270度;
这样我们就获取到了滑动到任何位置的角度了。
代码实现:
html、css代码我这里就不贴了,根据自己的界面样式实现即可。
首先在onload中获取下外层节点的属性并计算出中心点的位置;
//由于小程序中不支持ref所以使用这种方式;
uni.createSelectorQuery().select('.inner').boundingClientRect(
(rect) => {
this.rect = rect;
this.rect.width_c = this.rect.width / 2;
this.rect.height_c = this.rect.height / 2;
console.log(this.rect);
}
).exec();
然后再外层节点中监听下touchmove
<view class="inner" @touchmove="move">
move中内容如下:
/*
触摸位置的值减去节点距离屏幕边缘的位置 就得到了触摸点在节点中所在的位置;
注意这里的值并不是坐标轴里面的xy值,而是从节点的左上角向右向下延伸的值;
*/
let left = e.touches[0].pageX - this.rect.left;
let top = e.touches[0].pageY - this.rect.top;
// 这里根据中心点的位置判断下,触摸点所在的象限;
let now_index = 0;
if (left < this.rect.width_c) {
if (top < this.rect.height_c) {
now_index = 3
} else {
now_index = 2;
}
} else {
if (top < this.rect.height_c) {
now_index = 0;
} else {
now_index = 1;
}
}
// 触摸点在节点中所在的位置减去节点宽高的一半之后取绝对值,这样就确定了坐标轴中xy的值了。然后根据勾股定理计算出斜边的值;
let x = Math.abs(left - this.rect.width_c);
let y = Math.abs(top - this.rect.height_c);
let z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
// 根据触摸点所在的象限判断 是取哪条边的值除以斜边之后取反正弦值
let asin = 0;
if (now_index == 0 || now_index == 2) {
asin = Math.asin(x / z);
} else {
asin = Math.asin(y / z);
}
// 计算出反正弦值后 * 180 / Math.PI后就得出了角度,再加上之前象限的角度就得到了所要旋转的角度了,之后赋值给html中的样式就可以了
let angle = Number((asin * 180 / Math.PI).toFixed(2)) + (now_index * 90);
写到这里需求就基本实现了。
原创不易,希望大家多多留言点赞。
仪表盘滑动效果-CSDN直播仪表盘滑动效果 uni-app 微信小程序https://live.csdn.net/v/182330