欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序圓形進度條及面積圖實現(xiàn)的方法

 更新時間:2022年05月05日 12:53:41   作者:劉煎蛋  
做微信小程序的朋友大都接觸過或自己動手寫過自定義組件,下面這篇文章主要給大家介紹了關(guān)于小程序圓形進度條及面積圖實現(xiàn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

以下兩個圖可以用來展示完成進度或者進度詳情,圖1用的是css來繪制進度條,圖2用canvas來繪制面積圖。

效果預(yù)覽

圓形進度條

傳進去的有三個參數(shù)

字段意思
currentVal當前值
maxVal最大值
status1 上漲 | 2 下跌
<circle 
    :maxVal="maxVal" 
    :currentVal="currentVal" 
    :status="2"
/>

重點就是左右各畫一半然后利用transform: rotate()旋轉(zhuǎn)隱藏起來,接著利用傳進來的當前值計算進度并進行旋轉(zhuǎn)展示。

左右各一半如下圖:

setCircle() {
    const { currentVal, maxVal } = this;
    // NO1
    if (currentVal > maxVal / 2) {
        this.leftRotate = this.formatDegree(maxVal / 2);
        this.rightRotate = this.formatDegree(currentVal - maxVal / 2);
    } else {
        // NO2
        this.leftRotate = this.formatDegree(currentVal);
    }
    this.pointRotate = this.formatDegree(currentVal);
},
// NO3 計算旋轉(zhuǎn)
formatDegree(percent) {
    return -136 + (360 / this.maxVal * percent);
}

說明:

NO1: 如果當前值大于最大值的50%則證明左右兩邊都需要計算展示進度
NO2: 走到這里則證明當前值小于最大值的一半只需要展示左邊進度
NO3: 一個圈360度 / 最大值 * 多少份

關(guān)于圓點跟隨我這里的做法是設(shè)置一個一模一樣大小的盒子定位上去,并設(shè)置成圓形這樣就會和進度條重合,然后根據(jù)當前值旋轉(zhuǎn)就能準確跟隨在進度條的末端。

面積圖

字段意思
currentVal當前值
maxVal最大值
sourceData數(shù)值分布情況
<combat 
    :maxVal="maxVal"
    :currentVal="currentVal" 
    :sourceData="sourceData"
/>

我這里的做法是先做個四邊形然后進行旋轉(zhuǎn)變成一個棱形在根據(jù)傳入的數(shù)據(jù)進行繪制。

// 設(shè)置圖表信息
async setUppixelRatio() {
    const pixelRatio = await this.getSystemInfo();
    const { canvas: res, ctx } = this;
    let canvas = res.node;
    // 放大canvas 解決模糊問題
    canvas.width = res.width * pixelRatio;
    canvas.height = res.height * pixelRatio;
    this.originX = canvas.width / 2;
    this.originY = canvas.height / 2;
    this.startAngle = Math.PI + Math.PI / this.sourceData.length;
    // 最大值分為若干等分
    this.combatMaxVal = this.maxVal / this.sourceData.length;
    this.fitAngle();
    // 縮小canvas
    ctx.scale(pixelRatio, pixelRatio);
},

在手機上中canvas會變模糊,在這里我們先將canvas放大然后縮小就可以解決模糊的問題了。其他的都是一些畫線操作。

最后

源碼在這demo以上的兩個demo是用uni-app開發(fā)的,如果需要運啟動得用HBuilder運行。

到此這篇關(guān)于小程序圓形進度條及面積圖實現(xiàn)的文章就介紹到這了,更多相關(guān)小程序圓形進度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論