資訊專(zhuān)欄INFORMATION COLUMN
摘要：整理一個(gè)繪制環(huán)形進(jìn)度條的，需要的同學(xué)拿去用即可定義繪圖區(qū)域在頁(yè)面的任何位置，添加繪圖面板。
整理一個(gè)svg繪制環(huán)形進(jìn)度條的demo，需要的同學(xué)拿去用即可
定義svg繪圖區(qū)域在html頁(yè)面的任何位置，添加svg繪圖面板。定義svg繪圖區(qū)域大小
繪制一個(gè)圓形cx 和 cy 屬性定義圓點(diǎn)的 x 和 y 坐標(biāo)，單位省略為px，如果省略 cx 和 cy，圓的中心會(huì)被設(shè)置為 (0, 0)，r 屬性定義圓的半徑，stroke定義描邊的顏色，stroke-width定義描邊寬度，fill定義填充顏色
定義一個(gè)path路徑區(qū)域
使用path指令繪制扇形
首先查看一下常用的path指令,獲取svg中的path，指定半徑為100，進(jìn)度為50，我們繪制一個(gè)扇形
M = moveto(M X,Y) ：將畫(huà)筆移動(dòng)到指定的坐標(biāo)位置
L = lineto(L X,Y) ：畫(huà)直線(xiàn)到指定的坐標(biāo)位置
H = horizontal lineto(H X)：畫(huà)水平線(xiàn)到指定的X坐標(biāo)位置
V = vertical lineto(V Y)：畫(huà)垂直線(xiàn)到指定的Y坐標(biāo)位置
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線(xiàn)
Z = closepath()：關(guān)閉路徑
var path = document.getElementById("ring");
var r=100;
var progress=50;
//將path平移到我們需要的坐標(biāo)位置
ring.setAttribute("transform", "translate("+r+","+r+")");
// 計(jì)算當(dāng)前的進(jìn)度對(duì)應(yīng)的角度值
var degrees = progress * (360/100);
// 計(jì)算當(dāng)前角度對(duì)應(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度時(shí)候畫(huà)大角度弧，小于180度的畫(huà)小角度弧，(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(" "));
在扇形上覆蓋一個(gè)圓形
封裝繪圖函數(shù)
path參數(shù)為繪圖面板id，progress為進(jìn)度值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(" "));
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/78255.html
摘要：基于的簡(jiǎn)單的進(jìn)度條在線(xiàn)在線(xiàn)是什么是一款基于項(xiàng)目二次開(kāi)發(fā)的組件功能特性零依賴(lài)體積小目前支持圓環(huán)矩形的進(jìn)度條配置多滿(mǎn)足多樣需求持續(xù)維護(hù)安裝使用詳細(xì)介紹普通模式引入例子詳細(xì)介紹配置參數(shù)進(jìn)度條類(lèi)型進(jìn)度條的初始值 svg-progress-bar 基于Vue.js的簡(jiǎn)單的svg進(jìn)度條 showImg(https://segmentfault.com/img/remote/146000001282...
摘要：環(huán)形進(jìn)度條的問(wèn)題，網(wǎng)上有很多的，也有各種不同的實(shí)現(xiàn)方式，很棒的實(shí)現(xiàn)也有很多，我這自己做一下一方面是想開(kāi)闊一下自己的思路，一方面好久沒(méi)看和的東西了，基礎(chǔ)的拿來(lái)熟悉下。 環(huán)形進(jìn)度條的問(wèn)題，網(wǎng)上有很多的demo，也有各種不同的實(shí)現(xiàn)方式，很棒的實(shí)現(xiàn)也有很多，我這自己做一下一方面是想開(kāi)闊一下自己的思路，一方面好久沒(méi)看SVG和Canvas的東西了，基礎(chǔ)的拿來(lái)熟悉下。 DIV + CSS3 這個(gè)是最...
摘要：在負(fù)責(zé)的項(xiàng)目中，有一個(gè)環(huán)形漸變讀取進(jìn)度的效果的需求，于是在網(wǎng)上查閱相關(guān)資料整理一下。 在負(fù)責(zé)的項(xiàng)目中，有一個(gè)環(huán)形漸變讀取進(jìn)度的效果的需求，于是在網(wǎng)上查閱相關(guān)資料整理一下。代碼如下： Title ...
摘要：在負(fù)責(zé)的項(xiàng)目中，有一個(gè)環(huán)形漸變讀取進(jìn)度的效果的需求，于是在網(wǎng)上查閱相關(guān)資料整理一下。 在負(fù)責(zé)的項(xiàng)目中，有一個(gè)環(huán)形漸變讀取進(jìn)度的效果的需求，于是在網(wǎng)上查閱相關(guān)資料整理一下。代碼如下： Title ...
閱讀 2049·2023-04-26 01:59
閱讀 3332·2021-10-11 11:07
閱讀 3370·2021-09-22 15:43
閱讀 3454·2021-09-02 15:21
閱讀 2658·2021-09-01 10:49
閱讀 955·2019-08-29 15:15
閱讀 3165·2019-08-29 13:59
閱讀 2890·2019-08-26 13:36
