效果图
image.png
image.png
image.png
知识点一
定义和用法
atan2() 返回从原点(0,0) 到 (x,y) 点的线段与 x 轴正方向之间的平面角度(弧度值)，也就是 Math.atan2(y,x)。(返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。)
注意： atan2()有两个参数, y 坐标是作为第一个参数传递， x 坐标作为第二个参数传递。
语法
Math.atan2(y,x)
| 参数 | 描述 |
|---|---|
| y | 必须。一个数字代表Y坐标 |
| x | 必须。 一个数字代表x坐标 |
返回值
| 类型 | 描述 |
|---|---|
| Number | x 的反正切值。返回一个 -PI 到 PI 之间的数值。表示点 (x, y) 对应的偏移角度。这是一个逆时针角度，以弧度为单位，正X轴和点 (x, y) 与原点连线 之间。注意此函数接受的参数：先传递 y 坐标，然后是 x 坐标。 |
知识点二
弧度 = 角度 * Math.PI / 180
角度 = 弧度 * 180 / Math.PI
弧度制与角度制的换算公式：1度=π/180≈0.01745弧度，1弧度=180/π≈57.3度。角的度量单位通常有两种，一种是角度制，另一种就是弧度制。
1弧度=180/pai 度。
1度=pai/180 弧度。
记不住的时候就像圆。
一个圆是360度，2pai弧度。
image.png
弧度制的基本思想是使圆半径与圆周长有同一度量单位，然后用对应的弧长与圆半径之比来度量角度，这一思想的雏型起源于印度。
那么半圆的弧长为π，此时的正弦值为0，就记为sinπ= 0，同理，1/4圆周的弧长为π/2，此时的正弦为1，记为sin(π/2)=1。从而确立了用π、π/2分别表示半圆及1/4圆弧所对的中心角。其它的角也可依此类推。
知识点三
image.png
wxml文件
<view style="width:100vw;height:50vh;margin-top: 200rpx;" class="flex_column flex_center">
<canvas bindtouchmove="doTouchMove" bindtouchstart="doTouchStart" canvas-id="circle" style="width:70vw;height:70vw;border: 1rpx solid red;"></canvas>
</view>
<view style="text-align: center;color: white;margin-top: 50rpx;font-size: 40rpx;">
{{realValue}} min
</view>
wxss文件
page{
background: #00a8ff;
}
.text_hint{
font-size:80%;
font-family:PingFang SC;
font-weight:500;
color:rgba(204,204,204,1);
}
.text_name{
margin-top: 5px;
font-size:100%;
font-family:PingFang SC;
font-weight:500;
color:rgba(0,0,0,1);
}
.flex_column{
display: flex;
flex-direction: column;
}
.flex_center{
justify-content: center;
align-items: center
}
js文件
const app = getApp()
var lasttime = 0; //上次滑动时间
Page({
data: {
maxTemp: 100, //最大值
value: 0, //弧度数
realValue: 0, //弧度数对应的分钟
},
onLoad() {
this.drawCircle();
},
onShow() {
},
doTouchStart: function (res) {
this.doTouchMove(res);
},
doTouchMove: function (res) {
let nowtime = (new Date()).getTime();
//100ms触发一次 减少不必要的绘图
if (nowtime - lasttime < 100) {
return;
}
lasttime = nowtime;
let x = res.touches[0].x; //触摸点的x轴坐标
let y = res.touches[0].y; //触摸点的y轴坐标
console.log("触摸点", x, y);
let width = app.globalData.width * 0.7;
let height = app.globalData.width * 0.7;
//获取中心坐标
let centerPoint = {
x: width / 2,
y: height / 2
}
console.log("中心坐标", centerPoint);
let line = 30; //圆环的宽度
const radius = width / 2 * 0.8; //圆环的半径
//最大圆的距离
let maxDistance = radius + line / 2;
//最小圆的距离
let minDistance = radius - line / 2;
//计算到圆心的距离(触摸点到圆心的距离)
let distance = Math.sqrt(Math.pow(centerPoint.x - x, 2) + Math.pow(centerPoint.y - y, 2));
console.log('最大：%s 最小：%s 当前：%s', maxDistance, minDistance, distance);
//触摸点再刻度上
if (distance <= maxDistance && distance >= minDistance) {
//atan2() 返回从原点(0,0) 到 (x,y) 点的线段与 x 轴正方向之间的平面角度(弧度值)，也就是 Math.atan2(y,x)
//弧度 = 角度 * Math.PI / 180
//角度 = 弧度 * 180 / Math.PI
let value = Math.atan2(y - centerPoint.y, x - centerPoint.x); //计算触摸点到centerPoint点的弧度
this.data.value = value;
//分成两份，0~Math.PI 和 0~ -Math.PI
//this.data.maxTemp / 2 最大值的一半
//Math.PI / (this.data.maxTemp / 2)) Math.PI每份占多少
if(value >= 0 && this.data.value <= Math.PI){
this.setData({
realValue: Math.ceil(value / (Math.PI / (this.data.maxTemp / 2))),
});
}else{
this.setData({
realValue: 50 + Math.ceil((Math.PI - Math.abs(value)) / (Math.PI / (this.data.maxTemp / 2))),
});
}
this.drawCircle();
}
},
drawCircle() {
//定义画图大小
let width = app.globalData.width * 0.7; //canvas宽
let height = app.globalData.width * 0.7; //canvas高
//获取中心坐标
let centerPoint = {
x: width / 2,
y: height / 2
}
const ringWidth = 30; //圆环宽度
const radius = width / 2 * 0.8;
let ctx = wx.createCanvasContext('circle');
ctx.save();
ctx.translate(centerPoint.x, centerPoint.y); //画布移动到中心
//画背景圆环
ctx.beginPath();
ctx.setStrokeStyle('pink');
ctx.setLineWidth(ringWidth);
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
//画进度弧弧
ctx.beginPath();
ctx.setStrokeStyle('red');
ctx.setLineCap('round');
ctx.setLineWidth(ringWidth);
ctx.arc(0, 0, radius, 0, this.data.value);
ctx.stroke();
ctx.draw();
}
})
