點擊上方藍字「前端司南」關注我

您的關注意義重大

原創@前端司南

週末好，今天給你們帶來一款接地氣的環形進度條組件vue-awesome-progress。近日被設計小姐姐要求實現這麼一個環形進度條效果，大致由四部分組成，分別是底色圓環，進度弧，環內文字，進度圓點。設計稿截圖以下：css

個人第一反應仍是找現成的組件，市面上不少組件都實現了前3點，獨獨沒找到能畫進度圓點的組件，否則稍加定製也能複用。既然沒有現成的組件，只有本身用vue + canvas擼一個了。html

效果圖

先放個效果圖，而後再說下具體實現過程，各位看官且聽我慢慢道來。前端

安裝與使用

源碼地址^[1]，歡迎star和提issue。vue

安裝

npm install --save vue-awesome-progress

使用

全局註冊

import Vue from 'vue'
import VueAwesomeProgress from "vue-awesome-progress"
Vue.use(VueAwesomeProgress)

局部使用

import VueAwesomeProgress from "vue-awesome-progress"

export default {
    components: {
        VueAwesomeProgress
    },
    // 其餘代碼
}

script標籤引入組件

同時也支持直接使用script標籤引入哦，知足有這部分需求的朋友。git

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="path-to/vue-awesome-progress.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    new Vue({
      el: "#app",
      template: '<vue-awesome-progress :percentage="40"></vue-awesome-progress>'
    })
  </script>
</body>
</html>

靜態展現

任何事都不是一蹴而就的，咱們首先來實現一個靜態的效果，而後再實現動畫效果，甚至是複雜的控制邏輯。程序員

肯定畫布大小

第一步是肯定畫布大小。從設計稿咱們能夠直觀地看到，整個環形進度條的最外圍是由進度圓點肯定的，而進度圓點的圓心在圓環圓周上。github

所以咱們得出僞代碼以下：web

// canvasSize: canvas寬度/高度
// outerRadius: 外圍半徑
// pointRadius: 圓點半徑
// pointRadius: 圓環半徑
canvasSize = 2 * outerRadius = 2 * (pointRadius + circleRadius)

據此咱們能夠定義以下組件屬性：npm

props: {
  circleRadius: {
    type: Number,
    default: 40
  },
  pointRadius: {
    type: Number,
    default: 6
  }
},
computed: {
  // 外圍半徑
  outerRadius() {
    return this.circleRadius + this.pointRadius
  },
  // canvas寬/高
  canvasSize() {
    return 2 * this.outerRadius + 'px'
  }
}

那麼canvas大小也能夠先進行綁定了canvas

<template>
    <canvas ref="canvasDemo" :width="canvasSize" :height="canvasSize" />
</template>

獲取繪圖上下文

getContext('2d')方法返回一個用於在canvas上繪圖的環境，支持一系列2d繪圖API。

mounted() {
  // 在 $nextTick初始化畫布，否則dom還未渲染好
  this.$nextTick(() => {
    this.initCanvas()
  })
},
methods: {
  initCanvas() {
    var canvas = this.$refs.canvasDemo;
    var ctx = canvas.getContext('2d');
  }
}

畫底色圓環

完成了上述步驟後，咱們就能夠着手畫各個元素了。咱們先畫圓環，這時咱們還要定義兩個屬性，分別是圓環線寬circleWidth和圓環顏色circleColor。

circleWidth: {
  type: Number,
  default: 2
},
circleColor: {
  type: String,
  default: '#3B77E3'
}

canvas提供的畫圓弧的方法是ctx.arc()，須要提供圓心座標，半徑，起止弧度，是否逆時針等參數。

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

咱們知道，Web網頁中的座標系是這樣的，從絕對定位的設置上其實就能看出來（top，left設置正負值會發生什麼變化），並且原點(0, 0)是在盒子（好比說canvas）的左上角哦。

對於角度而言，0°是x軸正向，默認是順時針方向旋轉。

圓環的圓心就是canvas的中心，因此x, y 取outerRadius的值就能夠了。

ctx.strokeStyle = this.circleColor;
ctx.lineWidth = this.circleWidth;
ctx.beginPath();
ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, 0, this.deg2Arc(360));
ctx.stroke();

注意arc傳的是弧度參數，而不是咱們常理解的360°這種概念，所以咱們須要將咱們理解的360°轉爲弧度。

// deg轉弧度
deg2Arc(deg) {
  return deg / 180 * Math.PI
}

畫文字

調用fillText繪製文字，利用canvas.clientWidth / 2和canvas.clientWidth / 2取得中點座標，結合控制文字對齊的兩個屬性textAlign和textBaseline，咱們能夠將文字繪製在畫布中央。文字的值由label屬性接收，字體大小由fontSize屬性接收，顏色則取的fontColor。

if (this.label) {
  ctx.font = `${this.fontSize}px Arial,"Microsoft YaHei"`
  ctx.fillStyle = this.fontColor;
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(this.label, canvas.clientWidth / 2, canvas.clientWidth / 2);
}

畫進度弧

支持普通顏色和漸變色，withGradient默認爲true，表明使用漸變色繪製進度弧，漸變方向我默認給的從上到下。若是但願使用普通顏色，withGradient傳false便可，並能夠經過lineColor自定義顏色。

if (this.withGradient) {
  this.gradient = ctx.createLinearGradient(this.circleRadius, 0, this.circleRadius, this.circleRadius * 2);
  this.lineColorStops.forEach(item => {
    this.gradient.addColorStop(item.percent, item.color);
  });
}

其中lineColorStops是漸變色的顏色偏移斷點，由父組件傳入，可傳入任意個顏色斷點，格式以下：

colorStops2: [
  { percent: 0, color: '#FF9933' },
  { percent: 1, color: '#FF4949' }
]

畫一條從上到下的進度弧，即270°到90°

ctx.strokeStyle = this.withGradient ? this.gradient : this.lineColor;
ctx.lineWidth = this.lineWidth;
ctx.beginPath();
ctx.arc(this.outerRadius, this.outerRadius, this.circleRadius, this.deg2Arc(270), this.deg2Arc(90));
ctx.stroke();

其中lineWidth是弧線的寬度，由父組件傳入

lineWidth: {
  type: Number,
  default: 8
}

畫進度圓點

最後咱們須要把進度圓點補上，咱們先寫死一個角度90°，顯而易見，圓點座標爲(this.outerRadius, this.outerRadius + this.circleRadius)

畫圓點的代碼以下：

ctx.fillStyle = this.pointColor;
ctx.beginPath();
ctx.arc(this.outerRadius, this.outerRadius + this.circleRadius, this.pointRadius, 0, this.deg2Arc(360));
ctx.fill();

其中pointRadius是圓點的半徑，由父組件傳入：

pointRadius: {
  type: Number,
  default: 6
}

角度自定義

固然，進度條的角度是靈活定義的，包括開始角度，結束角度，都應該由調用者隨意給出。所以咱們再定義一個屬性angleRange，用於接收起止角度。

angleRange: {
  type: Array,
  default: function() {
    return [270, 90]
  }
}

有了這個屬性，咱們就能夠隨意地畫進度弧和圓點了，哈哈哈哈。

老哥，這種圓點座標怎麼求？

噗......看來高興過早了，最重要的是根據不一樣角度求得圓點的圓心座標，這讓我頓時犯了難。

通過冷靜思考，我腦子裏閃過了一個利用正餘弦公式求座標的思路，但前提是座標系原點若是在圓環外接矩形的左上角纔好算。仔細想一想，冇問題啦，我先給座標系平移一下，最後求出來結果，再補個平移差值不就好了嘛。

畫圖工具不是很熟練，這裏圖沒畫好，線歪了，請忽略細節。

好的，咱們先給座標系向右下方平移pointRadius，最後求得結果再加上pointRadius就行了。僞代碼以下：

// realx：真實的x座標
// realy：真實的y座標
// resultx：平移後求取的x座標
// resultx：平移後求取的y座標
// pointRadius 圓點半徑
realx = resultx + pointRadius
realy = resulty + pointRadius

求解座標的思路大概以下，分四個範圍判斷，得出求解公式，應該還能夠化簡，不過我數學太菜了，先這樣吧。

getPositionsByDeg(deg) {
    let x = 0;
    let y = 0;
    if (deg >= 0 && deg <= 90) {
        // 0~90度
        x = this.circleRadius * (1 + Math.cos(this.deg2Arc(deg)))
        y = this.circleRadius * (1 + Math.sin(this.deg2Arc(deg)))
    } else if (deg > 90 && deg <= 180) {
        // 90~180度
        x = this.circleRadius * (1 - Math.cos(this.deg2Arc(180 - deg)))
        y = this.circleRadius * (1 + Math.sin(this.deg2Arc(180 - deg)))
    } else if (deg > 180 && deg <= 270) {
        // 180~270度
        x = this.circleRadius * (1 - Math.sin(this.deg2Arc(270 - deg)))
        y = this.circleRadius * (1 - Math.cos(this.deg2Arc(270 - deg)))
    } else {
        // 270~360度
        x = this.circleRadius * (1 + Math.cos(this.deg2Arc(360 - deg)))
        y = this.circleRadius * (1 - Math.sin(this.deg2Arc(360 - deg)))
    }
    return { x, y }
}

最後再補上偏移值便可。

const pointPosition = this.getPositionsByDeg(nextDeg);
ctx.arc(pointPosition.x + this.pointRadius, pointPosition.y + this.pointRadius, this.pointRadius, 0, this.deg2Arc(360));

這樣，一個基本的canvas環形進度條就成型了。

動畫展現

靜態的東西逼格天然是不夠的，所以咱們須要再搞點動畫效果裝裝逼。

基礎動畫

咱們先簡單實現一個線性的動畫效果。基本思路是把開始角度和結束角度的差值分爲N段，利用window.requestAnimationFrame依次執行動畫。

好比從30°到90°，我給它分爲6段，每次畫10°。要注意canvas畫這種動畫過程通常是要重複地清空畫布並重繪的，因此第一次我畫的弧線範圍就是30°~40°，第二次我畫的弧線範圍就是30°~50°，以此類推......

基本的代碼結構以下，具體代碼請參考vue-awesome-progress^[2] v1.1.0版本，若是順手幫忙點個star也是極好的。

animateDrawArc(canvas, ctx, startDeg, endDeg, nextDeg, step) {
  window.requestAnimationFrame(() => {
    // 清空畫布
    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
    // 求下一個目標角度
    nextDeg = this.getTargetDeg(nextDeg || startDeg, endDeg, step);
    // 畫圓環
    // 畫文字
    // 畫進度弧線
    // 畫進度圓點
    if (nextDeg !== endDeg) {
      // 知足條件繼續調用動畫，不然結束動畫
      this.animateDrawArc(canvas, ctx, startDeg, endDeg, nextDeg, step)
    }
  }
}

緩動效果

線性動畫顯得有點單調，可操做性不大，所以我考慮引入貝塞爾緩動函數easing，而且支持傳入動畫執行時間週期duration，加強了可定製性，使用體驗更好。這裏不列出實現代碼了，請前往vue-awesome-progress^[2]查看。

<vue-awesome-progress label="188人" :duration="10" easing="0,0,1,1" />

<vue-awesome-progress
  label="36℃"
  circle-color="#FF4949"
  :line-color-stops="colorStops"
  :angle-range="[60, 180]"
  :duration="5"
/>

// 省略部分...

<vue-awesome-progress label="188人" easing="1,0.28,0.17,0.53" :duration="10" />

<vue-awesome-progress
  label="36℃"
  circle-color="#FF4949"
  :line-color-stops="colorStops"
  :angle-range="[60, 180]"
  :duration="5"
  easing="0.17,0.67,0.83,0.67"
/>

能夠看到，當傳入不一樣的動畫週期duration和緩動參數easing時，動畫效果各異，徹底取決於使用者本身。

其餘效果

固然根據組件支持的屬性，咱們也能夠定製出其餘效果，好比不顯示文字，不顯示圓點，弧線線寬與圓環線寬同樣，不使用漸變色，不須要動畫，等等。咱們後續也會考慮支持更多能力，好比控制進度，數字動態增加等！具體使用方法，請參考vue-awesome-progress^[2]。

更新日誌

2020年04月10日更新

支持進度控制，只須要修改組件的屬性值percentage便可。

2019年11月10日更新

因爲我從業務場景出發作了這個組件，沒有考慮到大部分場景都是傳百分比控制進度的，所以在v1.4.0版本作了以下修正：

廢棄angle-range，改用percentage控制進度，同時提供start-deg屬性控制起始角度；
with-gradient改成use-gradient
經過show-text控制是否顯示進度文字
支持經過format函數自定義顯示文字的規則

2021年04月04日更新

支持自動檢測DPR，解決高清屏模糊等問題

結語

寫完這個組件有讓我感受到，程序員最終不是輸給了代碼和技術的快速迭代，而是輸給了本身的邏輯思惟能力和數學功底。就vue-awesome-progress^[2]這個組件而言，根據這個思路，咱們也能迅速開發出適用於React，Angular以及其餘框架生態下的組件。工做三年有餘，接觸了很多框架和技術，經歷了MVVM，Hybrid，小程序，跨平臺，大前端，serverless的大火，也時常感慨「學不動了」，在這個快速演進的代碼世界裏經常感到失落。好在本身尚未丟掉分析問題的能力，而不只僅是調用各類API和插件，這多是程序員最寶貴的財富吧。前路坎坷，我輩當不忘初心，願你出走半生，歸來還是少年！

參考

[1]

源碼地址: https://github.com/cumt-robin/vue-awesome-progress

[2]

vue-awesome-progress: https://github.com/cumt-robin/vue-awesome-progress

END

若是以爲這篇文章還不錯

點擊下面卡片關注我

來個【分享、點贊、在看】三連支持一下吧

「分享、點贊、在看」支持一波

本文分享自微信公衆號 - 大前端技術沙龍（is_coder）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

用初中數學知識擼一個canvas環形進度條

效果圖