效果图

image.png

image.png

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)

返回值

知识点二

弧度 = 角度 * 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,//弧度制对应的时间min
    realAngle: 0,//弧度制对应的角度
  },
  onLoad() {
    this.drawCircle();
  },
  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));
    //触摸点再刻度上
    if (distance <= maxDistance && distance >= minDistance) {
      //atan2() 返回从原点(0,0) 到 (x,y) 点的线段与 x 轴正方向之间的平面角度(弧度值)，也就是 Math.atan2(y,x)
      //弧度 = 角度 * Math.PI / 180
      //角度 = 弧度 * 180 / Math.PI 
      //计算点击点与中心centerPoint连线与x轴形成的弧度( 加+ 0.5 * Math.PI是因为起点逆时针旋转了90°)
      let value = Math.atan2(y - centerPoint.y, x - centerPoint.x) + 0.5 * Math.PI; 
      this.data.value = value;
      this.data.realAngle = value * 180 / Math.PI; //弧度转化为角度
      console.log(this.data.value, this.data.realAngle + '°');
      //把弧度转为为真实的项目值(根据项目需求来定)
      if (value >= 0) {
        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.rotate(270 * Math.PI / 180);
    ctx.beginPath();
    ctx.setStrokeStyle('red');
    ctx.setLineCap('round');
    ctx.setLineWidth(ringWidth);
    ctx.arc(0, 0, radius, 0, this.data.value);
    ctx.stroke();

    //画白色点
    ctx.rotate(-270 * Math.PI / 180);
    const whiteRadius = 8;
    const realAngle = this.data.realAngle;
    let whitePoint = {};
    if (realAngle >= 0 && realAngle <= 90) { //[0,90]计算与x轴形成的夹角坐标
      whitePoint.x = Math.cos((90 - realAngle) * Math.PI / 180) * radius;
      whitePoint.y = -Math.sin((90 - realAngle) * Math.PI / 180) * radius;
    } else if (realAngle > 90 && realAngle <= 180) { //(90,180]计算与x轴形成的夹角坐标
      whitePoint.x = Math.cos((realAngle - 90) * Math.PI / 180) * radius;
      whitePoint.y = Math.sin((realAngle - 90) * Math.PI / 180) * radius;
    } else if (realAngle > 180 && realAngle <= 270) { //(180,270]计算与x轴形成的夹角坐标
      whitePoint.x = -Math.cos((90 - (realAngle - 180)) * Math.PI / 180) * radius;
      whitePoint.y = Math.sin((90 - (realAngle - 180)) * Math.PI / 180) * radius;
    } else if (realAngle < 0) {//(270,360]计算与x轴形成的夹角坐标
      whitePoint.x = -Math.cos((90 - Math.abs(realAngle)) * Math.PI / 180) * radius;
      whitePoint.y = -Math.sin((90 - Math.abs(realAngle)) * Math.PI / 180) * radius;
    }
    console.log(whitePoint);
    ctx.beginPath();
    ctx.setStrokeStyle('white');
    ctx.setLineCap('round');
    ctx.setLineWidth(12);
    ctx.arc(whitePoint.x, whitePoint.y, whiteRadius, 0, 2 * Math.PI);
    ctx.stroke();
    
    ctx.draw();
  }
})