想要找点什么呢?

幕冬有柒

小程序 canvas 实现半圆进度条 评分条

幕冬有柒 · 2021-08-18 · 160 次阅读

效果图

QQ截图20210818170922.png

用法

<miniprogress score="50" />

组件

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        score: {
            type: Number
        }
    },

    /**
     * 组件的初始数据
     */
    data: {

    },
    ready: function () {
        const query = this.createSelectorQuery()
        query.select('#ring').boundingClientRect(res => {
            this.drawRing('ring', res.width, res.height, this.data.score)
        }).exec()
    },

    /**
     * 组件的方法列表
     */
    methods: {
        drawRing: function (canvasId, width, height, angle) {
            var context = wx.createCanvasContext(canvasId, this)
            // 外层圆环
            context.beginPath()
            context.arc(width / 2, height - 80, width / 2 - 20, 0.8 * Math.PI, 2.2 * Math.PI)
            context.setLineWidth(12)
            context.setLineCap('round')
            context.setStrokeStyle('#c9d2ef')
            context.stroke()

            // 外层进度圆环
            context.beginPath()
            context.arc(width / 2, height - 80, width / 2 - 20, 0.8 * Math.PI, (1.4 * (angle / 100) + 0.8).toFixed(1) * Math.PI)
            context.setLineWidth(12)
            context.setLineCap('round')
            context.setStrokeStyle('#3d79fe')
            context.stroke()

            // 指示器
            const xAxis = Math.cos(Math.PI * ((1.4 * (angle / 100) + 0.8).toFixed(1) - 0.005)) * (width / 2 - 20)
            const yAxis = Math.sin(Math.PI * ((1.4 * (angle / 100) + 0.8).toFixed(1) - 0.005)) * (width / 2 - 20)
            context.beginPath()
            context.arc(width / 2 + xAxis, height - 80 + yAxis, 4, 0, 2 * Math.PI)
            context.setFillStyle('#fff')
            context.fill()


            // 文本
            const textY = Math.sin(Math.PI * 2 / 360 * (1.8 * (100 + 15))) * (width / 2 - 20)
            context.beginPath()
            context.setFillStyle('#24324E')
            context.setFontSize(14)
            context.setTextAlign('center')
            context.setTextBaseline('middle')
            context.fillText('不合格', width / 2, height - 60)
            context.fillText('没有认真', width / 2, height - 30)
            context.setFillStyle('#3D79FE')
            context.font = `normal bold ${46}px sans-serif`;
            context.fillText(angle, width / 2, height - 50 + textY)

            context.draw()
        },
    }
})

  • 微信

Comments | 0 条评论