微信小程序使用convas画弧形滑块

Red_Sugar

于 2024-07-10 15:30:13 发布

阅读量520

点赞数 2

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.youkuaiyun.com/Red_Sugar/article/details/140323388

版权

先来看看效果图
在这里插入图片描述

两种效果图其实都是一个逻辑，控制弧度的起始角度与结束角度，再控制粗细即可实现
先在我们页面上创建一个convas元素

<canvas style="{
       {
       'width:'+(canvasSize+'px')+';'+('height:'+(canvasSize+'px')+';')}}" canvas-id="slider" type="2d" id="myCanvas" bindtouchstart="onMouseDown" bindtouchmove="onMouseMove" bindtouchend="onChend"></canvas>

canvasSize:控制convas大小的变量，我这里是正方形渲染，所以控制的宽高是一样的大小
onMouseDown：手指按下事件
onMouseMove：手指移动事件
onChend：手指松开事件

现在我们已经有了convas元素，接下来我们先画一个弧形

	//先定义一些全局的变量，写在data里面也可以
	let startAngle, allAngle, lineWidth, ctx, cvs, r, dotR, A, O;
	//.......
	 data: {
   
	 
	 	//定义一些参数
	 	  ratio: 0,
	 	  integerTemperature:0,
	 	  decimalsTemperature:0,
        canvasSize: 0,
           minTemperature:20, //最小值 这里是我自己的变量，根据你们需求自己定义
            maxTemperature:62, //最大值

            unitTemperature:'°C', //单位
            step:1,// {step:滑块的步进单位}
            value:0, //存储的温度值
		 config: {
   
		 		
	            size: 450,  //渲染的convas大小
	            dotRatio: 5,//渲染的滑块点大小
	            nowRatio: 50,
	            lineRatio: 4, //线条的粗细
	            allAngle: 300, //结束的弧度
	            canMove: true, //是否可以拖动滑块
	            startAngle: 120, //起始弧度
	            dotColor: '#FFF', //点的颜色
	            actColor: '#e0282f' //激活态颜色
	        }
	 }
 	//.......
	//写一个初始化的函数
    init() {
   
        const query = wx.createSelectorQuery()
        // 查询canvas实例
        query.select("#myCanvas").fields({
   
            node: true,
            size: true
        }).exec((res) => {
   
            // 创建实例
            cvs = res[0].node
            // 创建上下文
            ctx = cvs.getContext("2d")
            const dpr = wx.getSystemInfoSync().pixelRatio
           
            this.data.canvasSize = this.data.config.size / 750 * wx.getSystemInfoSync().windowWidth
            cvs.width = this.data.canvasSize * dpr
            cvs.height = this.data.canvasSize * dpr
            startAngle = this.data.config.startAngle > 360 ? 360 : this.data.config.startAngle
            allAngle = this.data.config.allAngle > 360 ? 360 : this.data.config.allAngle
            this.data.ratio = this.data.config.nowRatio
            r = this.data.canvasSize * .4
            dotR = (r * this.data.config.dotRatio / 100) * dpr
            lineWidth = (r * this.data.config.lineRatio / 100) * dpr
            A = {
   
                x: this.data