Requirement: Make the triangle button rotate around the circle when sliding;
I found a similar one on the Internet that only has a chart display and cannot be manually swiped.
The thought process is as follows:
1. To achieve the effect of rotation
The button can be rotated by changing the angle of rotation
transform:rotate(0deg);
transition:all .1s;2. Get the angle of rotation
First, we draw a coordinate axis xy in the graph. When the button is in the first quadrant, the angle at which the button rotates is the angle between the sides of bc.
The length of side a is: the x value of the touch position on the screen minus the distance from the node to the left side of the screen and then minus half the width of the node;
The length of the b side is: the y value of the touch position on the screen minus the distance from the node to the upper side of the screen and then minus half of the height of the node to take the absolute value;
After having the lengths of a and b, use the Pythagorean theorem to calculate the length of c;
After using a / c, use the Math.asin method to take the arc sine value and then * 180/Math.PI;
The obtained value is the included angle of the bc side;
If the button is in the fourth quadrant,
At this time, the calculation methods of side a and side b are exchanged; the others are the same as when they are in the first quadrant, and the final angle is added 90 degrees;
The calculation method of the third quadrant is the same as that of the first quadrant, and the final angle is added by 180 degrees;
The second quadrant is calculated in the same way as the fourth quadrant, and the final angle is added with 270 degrees;
In this way, we get the angle of sliding to any position.
Code:
I will not post the html and css codes here, you can implement them according to your own interface style.
First, obtain the attributes of the lower outer node in onload and calculate the position of the center point;
//由于小程序中不支持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();Then listen to touchmove in the outer node
<view class="inner" @touchmove="move">The contents of the move are as follows:
/*
触摸位置的值减去节点距离屏幕边缘的位置 就得到了触摸点在节点中所在的位置;
注意这里的值并不是坐标轴里面的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);The requirements written here are basically realized.
Originality is not easy, I hope you will leave a lot of comments and likes.