UI組件前端【免費(fèi)下載鏈接】wired-elementsCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.項(xiàng)目地址https://gitcode.com/gh_mirrors/wi/wired-elements點(diǎn)擊查看免費(fèi)下載wired-progress-ring是 wired-elements 組件庫中用于展示環(huán)形進(jìn)度的 Web Component它以手繪hand-drawn線條風(fēng)格渲染一個(gè)進(jìn)度圓環(huán)非常適合線框圖、原型設(shè)計(jì)或追求輕松視覺風(fēng)格的應(yīng)用。本文圍繞 docs/wired-progress-ring.md 文檔展開結(jié)合 src/wired-progress-ring.ts 源碼與 examples/progress-ring.html 示例帶你掌握它的安裝方式、全部屬性、標(biāo)簽與百分比顯示邏輯、CSS 自定義變量以及底層 SVG 圓環(huán)的繪制原理。組件概述wired-progress-ring是一個(gè)標(biāo)準(zhǔn)的自定義元素注冊名稱為wired-progress-ring見 src/wired-progress-ring.ts。它在頁面上渲染一個(gè)圓形的手繪描邊外環(huán)并根據(jù)value相對min/max的比例畫出一段同風(fēng)格的手繪圓弧作為進(jìn)度填充圓環(huán)中心默認(rèn)顯示當(dāng)前數(shù)值標(biāo)簽。默認(rèn)尺寸為 200px 寬的正方形區(qū)域視覺風(fēng)格由 roughjs 的隨機(jī)種子seed生成因此每個(gè)實(shí)例的手繪筆跡都略有不同。安裝與引入在 JavaScript 項(xiàng)目中安裝 wired-elementsnpm i wired-elements然后在代碼中引入組件模塊兩種方式等價(jià)import { WiredProgressRing } from wired-elements; // 或按需單獨(dú)引入減小打包體積 import { WiredProgressRing } from wired-elements/lib/wired-progress-ring.js;也可以在 HTML 頁面中直接通過 CDN 以 ES Module 方式加載script typemodule srchttps://unpkg.com/wired-elements/lib/wired-progress-ring.js?module/script說明以當(dāng)前倉庫為準(zhǔn)包版本為3.0.0-rc.7構(gòu)建產(chǎn)物輸出到lib/目錄package.json中module指向lib/wired-elements.js構(gòu)建命令為npm run build即rm -rf lib tsc因此按需引入路徑為lib/wired-progress-ring.js。運(yùn)行時(shí)依賴lit與roughjs詳見 package.json?；居梅ㄔ?HTML 中直接使用標(biāo)簽即可wired-progress-ring value25/wired-progress-ring wired-progress-ring value10 min5 max15/wired-progress-ring第一個(gè)例子展示進(jìn)度為 25默認(rèn)min0、max100第二個(gè)例子演示了自定義min/max范圍此時(shí)進(jìn)度按(value - min) / (max - min)換算為 0100% 的相對比例。官方演示與全部組件的完整效果可參考 examples/progress-ring.html本地運(yùn)行該文件即可看到真實(shí)渲染效果。屬性詳解組件共暴露 6 個(gè)屬性其聲明與默認(rèn)值可直接在 src/wired-progress-ring.ts 中確認(rèn)屬性類型默認(rèn)值說明valueNumber0進(jìn)度的當(dāng)前數(shù)值minNumber0進(jìn)度最小值maxNumber100進(jìn)度最大值hideLabelBooleanfalse是否隱藏圓環(huán)中心的標(biāo)簽?zāi)J(rèn)顯示當(dāng)前值showLabelAsPercentBooleanfalse顯示標(biāo)簽時(shí)是否以百分比形式展示precisionNumber0以百分比顯示時(shí)指定取整精度默認(rèn)四舍五入為整數(shù)其中幾個(gè)關(guān)鍵點(diǎn)value、min、max均為數(shù)值型屬性通過property({ type: Number })聲明字符串形式傳入如value25會被自動轉(zhuǎn)換為數(shù)字。hideLabel與showLabelAsPercent為布爾型標(biāo)簽容器默認(rèn)通過絕對定位覆蓋在整個(gè)圓環(huán)之上見 src/wired-progress-ring.ts。precision僅在showLabelAsPercent為true時(shí)生效且當(dāng)precision為0默認(rèn)時(shí)按整數(shù)四舍五入。標(biāo)簽與百分比顯示邏輯標(biāo)簽內(nèi)容的生成邏輯在 src/wired-progress-ring.ts默認(rèn)情況下標(biāo)簽直接顯示原始value數(shù)值開啟showLabelAsPercent后先按100 * Math.min(1, Math.max(0, (value - min) / (max - min)))計(jì)算百分比——注意這里對結(jié)果做了 0100 的鉗制clamp越界值不會導(dǎo)致標(biāo)簽超出合理范圍若設(shè)置了precision使用pct.toPrecision(precision)生成百分比字符串toPrecision是有效數(shù)字位數(shù)的語義否則使用Math.round(pct)四舍五入到整數(shù)并統(tǒng)一追加%后綴。一個(gè)典型的百分比用法wired-progress-ring value50 showLabelAsPercent/wired-progress-ring !-- 中心標(biāo)簽顯示 50% --自定義樣式組件暴露一個(gè) CSS 自定義變量用于控制進(jìn)度條顏色--wired-progress-color—— 進(jìn)度圓弧的顏色默認(rèn)值為blue。wired-progress-ring { --wired-progress-color: #ff5722; }該變量在組件樣式表中通過stroke: var(--wired-progress-color, blue)消費(fèi)見 src/wired-progress-ring.ts因此也可以在實(shí)例上直接覆蓋#wp2 { --wired-progress-color: red; }標(biāo)簽的字體與顏色則可以直接通過給wired-progress-ring元素設(shè)置樣式來定制——標(biāo)簽面板內(nèi)的文本繼承了宿主元素的計(jì)算樣式例如wired-progress-ring { font-family: Comic Sans MS, cursive; color: #333; width: 160px; /* 圓環(huán)為正方形修改寬度即可整體縮放 */ }尺寸說明組件的:host默認(rèn)寬度為200px見 src/wired-progress-ring.ts而canvasSize()返回[width, width]即繪制區(qū)域始終按宿主元素的實(shí)際寬度生成正方形畫布見 src/wired-progress-ring.ts所以只需調(diào)整寬度即可等比縮放圓環(huán)。源碼級原理圓環(huán)是如何手繪出來的wired-progress-ring繼承自WiredBasesrc/wired-base.ts繪制流程為組件updated時(shí)觸發(fā)wiredRender()尺寸未變化時(shí)跳過重繪尺寸變化后清空 SVG 子節(jié)點(diǎn)、設(shè)置畫布寬高并調(diào)用draw()。draw()以畫布中心為圓心、邊長減 10 為直徑調(diào)用ellipse()繪制手繪風(fēng)格的外環(huán)見 src/wired-progress-ring.ts。refreshProgressFill()計(jì)算進(jìn)度比例pct Math.min(1, Math.max(0, (value - min) / (max - min)))若pct大于 0則調(diào)用arc()從-π/2即圓環(huán)正上方 12 點(diǎn)方向開始順時(shí)針掃過2π * pct的角度繪制進(jìn)度弧并為該路徑添加progressArc類見 src/wired-progress-ring.ts。由于進(jìn)度弧的stroke-width: 10px且描邊顏色取自--wired-progress-color視覺上形成加粗的彩色進(jìn)度條。每次屬性變化重新渲染時(shí)舊的進(jìn)度弧會被移除并重新繪制保證進(jìn)度更新即時(shí)生效。ellipse與arc底層都經(jīng)由 src/wired-lib.ts 封裝 roughjs 渲染器ellipse生成完整橢圓路徑arc生成指定起止角度的圓弧路徑二者都傳入組件實(shí)例的隨機(jī)種子seed在WiredBase中初始化為Math.floor(Math.random() * 2 ** 31)從而讓每一筆都有手繪的輕微抖動與彎曲感同時(shí)同一實(shí)例重繪時(shí)筆跡保持穩(wěn)定。幾個(gè)可以從源碼確認(rèn)的行為細(xì)節(jié)value為 0且非百分比模式時(shí)pct為 0不繪制進(jìn)度弧只顯示外環(huán)進(jìn)度比例被強(qiáng)制鉗制在 01 之間即使value超出min/max范圍圓弧也不會越界弧度從 12 點(diǎn)鐘方向起始并按順時(shí)針方向增長。實(shí)戰(zhàn)示例動態(tài)驅(qū)動進(jìn)度examples/progress-ring.html 提供了一個(gè)可直接運(yùn)行的交互示例演示了通過 JavaScript 動態(tài)修改value來驅(qū)動進(jìn)度wired-progress-ring idprogress showLabelAsPercent/wired-progress-ringconst prog document.getElementById(progress); document.getElementById(btns).addEventListener(click, () { timer window.setInterval(() { if (prog.value 100) { prog.value 0; } else { prog.value prog.value 1; } }, 100); }); document.getElementById(btnr).addEventListener(click, () { if (timer) { window.clearInterval(timer); timer 0; } prog.value 0; });該示例還展示了幾個(gè)值得參考的組合用法wired-progress-ring value25 hideLabel/wired-progress-ring隱藏標(biāo)簽、wired-progress-ring idwp2 min-100 max100 value0/wired-progress-ring自定義負(fù)值范圍以及通過--wired-progress-color: red定制顏色。由于value是響應(yīng)式屬性任何賦值都會觸發(fā)重繪非常適合與定時(shí)器、上傳進(jìn)度、請求加載等場景結(jié)合。許可證wired-elements 采用 MIT 許可證版權(quán)歸 Preet Shihn 所有許可證全文見倉庫根目錄的 LICENSE 文件。贊分享UI組件前端【免費(fèi)下載鏈接】wired-elementsCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.項(xiàng)目地址https://gitcode.com/gh_mirrors/wi/wired-elements點(diǎn)擊查看免費(fèi)下載相關(guān)推薦GitHub_Trending/ma/machine-learning-for-trading中的無監(jiān)督學(xué)習(xí)PCA與聚類分析GitHub_Trending/ma/machine learning for trading中的無監(jiān)督學(xué)習(xí)PCA與聚類分析 在量化交易領(lǐng)域無監(jiān)督學(xué)習(xí)技術(shù)能示例工程金融科技機(jī)器學(xué)習(xí)人工智能深度學(xué)習(xí)Wired Elements 手繪風(fēng)格進(jìn)度環(huán)組件 wired-progress-ring 詳解Wired Elements 手繪風(fēng)格進(jìn)度環(huán)組件 wired progress ring 詳解 組件概述 Wired Elements 項(xiàng)目中的 wired pUI組件前端wired-radio 手繪單選按鈕組件實(shí)戰(zhàn)指南wired-elements 安裝、屬性、樣式定制與源碼實(shí)現(xiàn)wired radio 手繪單選按鈕組件實(shí)戰(zhàn)指南wired elements 安裝、屬性、樣式定制與源碼實(shí)現(xiàn) wired radio 是 wired elemUI組件前端創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考