小程序 canvas自定义画进度条(可点击&滑动&缩进)——高级

作者: hao_developer | 来源:发表于2023-04-07 12:07 被阅读0次

微信小程序中 canvas 层级过高问题
使用slider组件做歌曲进度条，滑动时出现抖动
自定义的滑动进度条在tableView上滑动时产生卡顿
小程序中图片点击全屏-可滑动
扇形进度条可点击可滑动
微信小程序swiper组件的点击切换及滑动切换及无法滚动的问题
微信小程序-人生若只如初见，何事秋风悲画扇
小程序原型进度条
微信小程序-canvas压缩图片使用入门
Mac开发-NSSlider

效果图

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>
<button bindtap="clickHandler" type="default" style="margin-top: 20rpx;">-1</button>

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: 30, //刻度最大值
    value: 0, //圆环弧度
    realValue: 0, //圆环弧度对应的真实值min
    maxRealValue: 0, //最大值min
    realAngle: 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));
    //触摸点再刻度上
    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) + 0.5 * Math.PI; //计算弧度
      this.data.value = value;
      this.data.realAngle = value * 180 / Math.PI; //弧度转角度
      console.log(this.data.value, this.data.realAngle + '°');
      //通过弧度来计算真实值min
      if (value >= 0) { //弧度大于0，
        this.setData({
          realValue: Math.ceil(value / (Math.PI / (this.data.maxTemp / 2))),
          maxRealValue: Math.ceil(value / (Math.PI / (this.data.maxTemp / 2))),
        });
      } else { //弧度大于0  半个圆弧度是一个Math.PI
        const realValue = 22.5 + Math.ceil((Math.PI / 2 - Math.abs(value)) * ((this.data.maxTemp / 4) / (Math.PI / 2)));
        this.setData({
          realValue: Math.floor(realValue),
          maxRealValue: Math.floor(realValue),
        });
      }
      this.drawCircle();
    }
  },
  isOf2(nul) { //判断是否是小数
    let rep = /[\.]/;
    let bool = false;
    if (rep.test(nul)) {
      bool = true;
    }
    return bool;
  },
  drawCircle() {//canvas画
    //定义画图大小    
    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); //将画布的圆点(0,0)移动到中心centerPoint点上(画布的中心)

    //画圆环的背景
    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) {// 第一象限(x,-y)
      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) {// 第四象限(x,y)
      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) {// 第三象限(-x,y)
      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) {// 第二象限(-x,-y) 比较特殊的计算
      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();
  },
  clickHandler() {
    let {
      realValue,
      value,
      maxRealValue,
      maxTemp
    } = this.data;
    realValue--;
    if (realValue < 0) return;
    this.setData({
      realValue: realValue,
      maxRealValue: realValue,
    });
    if (realValue == 0) { //真实值min为0(避免无限接近0的设置出现偏差)
      this.data.realValue = 0;
      this.data.value = 0;
      this.data.realAngle = 0;
    } else {
      this.data.realValue = realValue;
      const _value = realValue / maxRealValue * value; //计算-1后的弧度值
      //因为弧度在第二象限是负值，需要等分来处理，每次-1需要加一次对应1个值对应的弧度，其它象限不需做处理
      this.data.value = value < 0 ? (value + -Math.PI / 2 / (maxTemp / 4)) : _value; 
      this.data.realAngle = this.data.value * 180 / Math.PI; //弧度转角度
    }
    console.log('btn----', this.data.value, this.data.realAngle);
    this.drawCircle();
  }
})

微信小程序中 canvas 层级过高问题
问题在微信小程序中设置自定义标题后，自定义标题并不能覆盖住canvas 原因: 小程序中 canvas、text...
使用slider组件做歌曲进度条，滑动时出现抖动
使用微信小程序写音乐播放器，遇到关于 slider 组件抖动的问题问题是这样的：如果滑动或者点击进度条，进度...
自定义的滑动进度条在tableView上滑动时产生卡顿
问题：自定义的进度条CustomProgressView在TaskSubmitViewController上滑动时...
小程序中图片点击全屏-可滑动
在小程序中，如果页面中有多张图片，那么用户可能会习惯向在朋友圈中一样打开图片，这里微信也提供了类似的api，可以直...
扇形进度条可点击可滑动
自定义属性颜色啥的自己来吧。。。。使用
微信小程序swiper组件的点击切换及滑动切换及无法滚动的问题
微信小程序 swiper 组件的点击切换和滑动切换滑动切换及点击切换代码块 swiper 的 swiper-it...
微信小程序-人生若只如初见，何事秋风悲画扇
微信小程序特性:对个人开发者开放注册公众号，自定义菜单与模板消息可以绑定小程序，用户点击后可直达小程序，移动APP...
小程序原型进度条
微信小程序本身提供了html5中原生的直线进度条,但是没有提供圆形进度条,这里我使用canvas简单实现了一个圆形...
微信小程序-canvas压缩图片使用入门
微信小程序canvas组件官方文档微信小程序canvas组件官方文档canvas API canvas组件介绍 ...
Mac开发-NSSlider
NSSlider实现七彩色的进度条自定义NSSliderCell初始化进度条相关的事件：整体颜色、半径、滑动块的大...