js初級應(yīng)用之svg實現(xiàn)環(huán)形進度條

acrazing 發(fā)布于2019-08-19 17:10 / 1441人閱讀

摘要：整理一個繪制環(huán)形進度條的，需要的同學(xué)拿去用即可定義繪圖區(qū)域在頁面的任何位置，添加繪圖面板。

整理一個svg繪制環(huán)形進度條的demo，需要的同學(xué)拿去用即可

定義svg繪圖區(qū)域

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

繪制一個圓形

cx 和 cy 屬性定義圓點的 x 和 y 坐標(biāo)，單位省略為px，如果省略 cx 和 cy，圓的中心會被設(shè)置為 (0, 0)，r 屬性定義圓的半徑，stroke定義描邊的顏色，stroke-width定義描邊寬度，fill定義填充顏色

定義一個path路徑區(qū)域

使用path指令繪制扇形

首先查看一下常用的path指令,獲取svg中的path，指定半徑為100，進度為50，我們繪制一個扇形

M = moveto(M X,Y) ：將畫筆移動到指定的坐標(biāo)位置

L = lineto(L X,Y) ：畫直線到指定的坐標(biāo)位置

H = horizontal lineto(H X)：畫水平線到指定的X坐標(biāo)位置

V = vertical lineto(V Y)：畫垂直線到指定的Y坐標(biāo)位置

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

Z = closepath()：關(guān)閉路徑

    var path = document.getElementById("ring");
    var r=100;
    var progress=50;
    
    //將path平移到我們需要的坐標(biāo)位置
    ring.setAttribute("transform", "translate("+r+","+r+")");
    
    // 計算當(dāng)前的進度對應(yīng)的角度值
    var degrees = progress * (360/100);  
    
    // 計算當(dāng)前角度對應(yīng)的弧度值
    var rad = degrees* (Math.PI / 180);
    
    //極坐標(biāo)轉(zhuǎn)換成直角坐標(biāo)
    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 設(shè)置屬性
    path.setAttribute("d", descriptions.join(" "));

在扇形上覆蓋一個圓形

封裝繪圖函數(shù)

path參數(shù)為繪圖面板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(" "));
}