wired-elements 手绘进度环组件 wired-progress-ring 完整指南：属性、自定义样式与绘制原理-北京尧图网络

UI组件前端【免费下载链接】wired-elementsCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.项目地址https://gitcode.com/gh_mirrors/wi/wired-elements点击查看免费下载wired-progress-ring是 wired-elements 组件库中用于展示环形进度的 Web Component它以手绘hand-drawn线条风格渲染一个进度圆环非常适合线框图、原型设计或追求轻松视觉风格的应用。本文围绕 docs/wired-progress-ring.md 文档展开结合 src/wired-progress-ring.ts 源码与 examples/progress-ring.html 示例带你掌握它的安装方式、全部属性、标签与百分比显示逻辑、CSS 自定义变量以及底层 SVG 圆环的绘制原理。组件概述wired-progress-ring是一个标准的自定义元素注册名称为wired-progress-ring见 src/wired-progress-ring.ts。它在页面上渲染一个圆形的手绘描边外环并根据value相对min/max的比例画出一段同风格的手绘圆弧作为进度填充圆环中心默认显示当前数值标签。默认尺寸为 200px 宽的正方形区域视觉风格由 roughjs 的随机种子seed生成因此每个实例的手绘笔迹都略有不同。安装与引入在 JavaScript 项目中安装 wired-elementsnpm i wired-elements然后在代码中引入组件模块两种方式等价import { WiredProgressRing } from wired-elements; // 或按需单独引入减小打包体积 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说明以当前仓库为准包版本为3.0.0-rc.7构建产物输出到lib/目录package.json中module指向lib/wired-elements.js构建命令为npm run build即rm -rf lib tsc因此按需引入路径为lib/wired-progress-ring.js。运行时依赖lit与roughjs详见 package.json。基本用法在 HTML 中直接使用标签即可wired-progress-ring value25/wired-progress-ring wired-progress-ring value10 min5 max15/wired-progress-ring第一个例子展示进度为 25默认min0、max100第二个例子演示了自定义min/max范围此时进度按(value - min) / (max - min)换算为 0100% 的相对比例。官方演示与全部组件的完整效果可参考 examples/progress-ring.html本地运行该文件即可看到真实渲染效果。属性详解组件共暴露 6 个属性其声明与默认值可直接在 src/wired-progress-ring.ts 中确认属性类型默认值说明valueNumber0进度的当前数值minNumber0进度最小值maxNumber100进度最大值hideLabelBooleanfalse是否隐藏圆环中心的标签默认显示当前值showLabelAsPercentBooleanfalse显示标签时是否以百分比形式展示precisionNumber0以百分比显示时指定取整精度默认四舍五入为整数其中几个关键点value、min、max均为数值型属性通过property({ type: Number })声明字符串形式传入如value25会被自动转换为数字。hideLabel与showLabelAsPercent为布尔型标签容器默认通过绝对定位覆盖在整个圆环之上见 src/wired-progress-ring.ts。precision仅在showLabelAsPercent为true时生效且当precision为0默认时按整数四舍五入。标签与百分比显示逻辑标签内容的生成逻辑在 src/wired-progress-ring.ts默认情况下标签直接显示原始value数值开启showLabelAsPercent后先按100 * Math.min(1, Math.max(0, (value - min) / (max - min)))计算百分比——注意这里对结果做了 0100 的钳制clamp越界值不会导致标签超出合理范围若设置了precision使用pct.toPrecision(precision)生成百分比字符串toPrecision是有效数字位数的语义否则使用Math.round(pct)四舍五入到整数并统一追加%后缀。一个典型的百分比用法wired-progress-ring value50 showLabelAsPercent/wired-progress-ring !-- 中心标签显示 50% --自定义样式组件暴露一个 CSS 自定义变量用于控制进度条颜色--wired-progress-color—— 进度圆弧的颜色默认值为blue。wired-progress-ring { --wired-progress-color: #ff5722; }该变量在组件样式表中通过stroke: var(--wired-progress-color, blue)消费见 src/wired-progress-ring.ts因此也可以在实例上直接覆盖#wp2 { --wired-progress-color: red; }标签的字体与颜色则可以直接通过给wired-progress-ring元素设置样式来定制——标签面板内的文本继承了宿主元素的计算样式例如wired-progress-ring { font-family: Comic Sans MS, cursive; color: #333; width: 160px; /* 圆环为正方形修改宽度即可整体缩放 */ }尺寸说明组件的:host默认宽度为200px见 src/wired-progress-ring.ts而canvasSize()返回[width, width]即绘制区域始终按宿主元素的实际宽度生成正方形画布见 src/wired-progress-ring.ts所以只需调整宽度即可等比缩放圆环。源码级原理圆环是如何手绘出来的wired-progress-ring继承自WiredBasesrc/wired-base.ts绘制流程为组件updated时触发wiredRender()尺寸未变化时跳过重绘尺寸变化后清空 SVG 子节点、设置画布宽高并调用draw()。draw()以画布中心为圆心、边长减 10 为直径调用ellipse()绘制手绘风格的外环见 src/wired-progress-ring.ts。refreshProgressFill()计算进度比例pct Math.min(1, Math.max(0, (value - min) / (max - min)))若pct大于 0则调用arc()从-π/2即圆环正上方 12 点方向开始顺时针扫过2π * pct的角度绘制进度弧并为该路径添加progressArc类见 src/wired-progress-ring.ts。由于进度弧的stroke-width: 10px且描边颜色取自--wired-progress-color视觉上形成加粗的彩色进度条。每次属性变化重新渲染时旧的进度弧会被移除并重新绘制保证进度更新即时生效。ellipse与arc底层都经由 src/wired-lib.ts 封装 roughjs 渲染器ellipse生成完整椭圆路径arc生成指定起止角度的圆弧路径二者都传入组件实例的随机种子seed在WiredBase中初始化为Math.floor(Math.random() * 2 ** 31)从而让每一笔都有手绘的轻微抖动与弯曲感同时同一实例重绘时笔迹保持稳定。几个可以从源码确认的行为细节value为 0且非百分比模式时pct为 0不绘制进度弧只显示外环进度比例被强制钳制在 01 之间即使value超出min/max范围圆弧也不会越界弧度从 12 点钟方向起始并按顺时针方向增长。实战示例动态驱动进度examples/progress-ring.html 提供了一个可直接运行的交互示例演示了通过 JavaScript 动态修改value来驱动进度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; });该示例还展示了几个值得参考的组合用法wired-progress-ring value25 hideLabel/wired-progress-ring隐藏标签、wired-progress-ring idwp2 min-100 max100 value0/wired-progress-ring自定义负值范围以及通过--wired-progress-color: red定制颜色。由于value是响应式属性任何赋值都会触发重绘非常适合与定时器、上传进度、请求加载等场景结合。许可证wired-elements 采用 MIT 许可证版权归 Preet Shihn 所有许可证全文见仓库根目录的 LICENSE 文件。赞分享UI组件前端【免费下载链接】wired-elementsCollection of custom elements that appear hand drawn. Great for wireframes or a fun look.项目地址https://gitcode.com/gh_mirrors/wi/wired-elements点击查看免费下载相关推荐GitHub_Trending/ma/machine-learning-for-trading中的无监督学习PCA与聚类分析GitHub_Trending/ma/machine learning for trading中的无监督学习PCA与聚类分析在量化交易领域无监督学习技术能示例工程金融科技机器学习人工智能深度学习Wired Elements 手绘风格进度环组件 wired-progress-ring 详解Wired Elements 手绘风格进度环组件 wired progress ring 详解组件概述 Wired Elements 项目中的 wired pUI组件前端wired-radio 手绘单选按钮组件实战指南wired-elements 安装、属性、样式定制与源码实现wired radio 手绘单选按钮组件实战指南wired elements 安装、属性、样式定制与源码实现 wired radio 是 wired elemUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

wired-elements 手绘进度环组件 wired-progress-ring 完整指南：属性、自定义样式与绘制原理

相关推荐

Talos Linux CRIBaseRuntimeSpecConfig 配置指南：为 CRI 容器定制基础 OCI 运行时规范

刚当爸的产品经理做幼崽成长手册：夜奶 3 秒记完

Python猫眼电影数据分析可视化系统：从爬虫到展示全流程实践

更多资讯

亿铸科技公司简介：以3D DRAM通用存算一体，应对大模型算力与能耗之困

X注册养号怎么做？2026年X新账号注册与养号指南

Visiodo 新工具上线｜自动补偿工具，实现机器人取放料双向视觉闭环引导

Presto 0.250 版本全解析：内存泄漏修复、Split 调度配置、位运算移位函数与物化视图支持

2026企业AI办公工具选型指南：如何评估可完成端到端任务的办公AI

STM32F407ZGT6嵌入式开发实战：架构、外设与避坑指南

今日更新

Play Framework 迁移指南：移除 GlobalSettings，全面转向依赖注入（Scala 与 Java）

Numba 类型推断机制详解：从 Numba IR 到编译期类型重建的完整原理与实践

企业级项目dragonballz_e159-1的技术架构与实现方案

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？