js初級應用之svg實現環形進度條

整理一個svg繪製環形進度條的demo，須要的同窗拿去用便可

定義svg繪圖區域

在html頁面的任何位置，添加svg繪圖面板。定義svg繪圖區域大小

<svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

繪製一個圓形

cx 和 cy 屬性定義圓點的 x 和 y 座標，單位省略爲px，若是省略 cx 和 cy，圓的中心會被設置爲 (0, 0)，r 屬性定義圓的半徑，stroke定義描邊的顏色，stroke-width定義描邊寬度，fill定義填充顏色

<circle cx="250" cy="250" r="40" stroke="black" stroke-width="2" fill="red"/>

定義一個path路徑區域

<path id="ring" fill="#76B13C" />

使用path指令繪製扇形

首先查看一下經常使用的path指令,獲取svg中的path，指定半徑爲100，進度爲50，咱們繪製一個扇形

• M = moveto(M X,Y) ：將畫筆移動到指定的座標位置

• L = lineto(L X,Y) ：畫直線到指定的座標位置

• H = horizontal lineto(H X)：畫水平線到指定的X座標位置

• V = vertical lineto(V Y)：畫垂直線到指定的Y座標位置

• A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線

• Z = closepath()：關閉路徑

var path = document.getElementById('ring');
    var r=100;
    var progress=50;
    
    //將path平移到咱們須要的座標位置
    ring.setAttribute('transform', 'translate('+r+','+r+')');
    
    // 計算當前的進度對應的角度值
    var degrees = progress * (360/100);  
    
    // 計算當前角度對應的弧度值
    var rad = degrees* (Math.PI / 180);
    
    //極座標轉換成直角座標
    var x = (Math.sin(rad) * r).toFixed(2);
    var y = -(Math.cos(rad) * r).toFixed(2);

    //大於180度時候畫大角度弧，小於180度的畫小角度弧，(deg > 180) ? 1 : 0
    var lenghty = window.Number(degrees > 180);
    
    //path 屬性
    var descriptions = ['M', 0, 0, 'v', -r, 'A', r, r, 0, lenghty, 1, x, y, 'z'];
    
    // 給path 設置屬性
    path.setAttribute('d', descriptions.join(' '));

在扇形上覆蓋一個圓形

<circle cx="100" cy="100" r="82" fill="#FFF" />

封裝繪圖函數

path參數爲繪圖面板id，progress爲進度值0-100，r爲半徑

function draw(path,progress,r) {
    path.setAttribute('transform', 'translate('+r+','+r+')');
    var degrees = progress * (360/100);  
    var rad = degrees* (Math.PI / 180);
    var x = (Math.sin(rad) * r).toFixed(2);
    var y = -(Math.cos(rad) * r).toFixed(2);
    var lenghty = window.Number(degrees > 180);
    var descriptions = ['M', 0, 0, 'v', -r, 'A', r, r, 0, lenghty, 1, x, y, 'z'];
    path.setAttribute('d', descriptions.join(' '));
}