wired-divider 手绘风格分隔线组件：从安装配置到源码绘制原理全解析

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-divider是 wired-elements 组件库中用于在页面区块之间绘制一条手绘感分割线的轻量级 Web Component。本文以 docs/wired-divider.md 为骨架结合 源码实现 深入讲解它的安装方式、elevation属性、CSS 定制技巧以及底层基于 Rough.js 的绘制与响应式重绘机制读完即可在 wireframe、原型草图或趣味风格页面中直接使用并自由调参。组件简介用一条手绘线划分内容区块wired-divider在页面中渲染一条略带抖动、具有手绘笔触的水平分隔线用于替代传统的hr非常适合线框图wireframes、低保真原型mockups或任何追求随手画风格的界面。该组件自 2.0.0 版本2019 年 10 月加入 wired-elements见 CHANGELOG.md当前仓库包版本为 3.0.0-rc.7见 package.json。组件本身不包含任何可见的 HTML 内容而是通过自定义元素wired-divider在内部生成一个 SVG再经由 Rough.js 的绘图算法输出带随机抖动的路径。它由 WiredDivider 类 实现继承自WiredBasesrc/wired-base.ts。安装与引入通过 npm 安装把 wired-elements 添加到你的 JavaScript 项目npm i wired-elements安装完成后即可从包入口导入WiredDividerimport { WiredDivider } from wired-elements; // 或者按需只加载单个组件 import { WiredDivider } from wired-elements/lib/wired-divider.js;两种方式都会注册wired-divider自定义元素。第一种方式经由包总入口 src/wired-elements.ts 一次性导出所有组件第二种方式直接加载单个编译产物lib/wired-divider.jslib目录由npm run build调用 TypeScript 编译生成编译配置见 tsconfig.json。通过 CDN 直接引入不经过打包工具时可以在 HTML 页面中直接加载 ES Modulescript typemodule srchttps://unpkg.com/wired-elements/lib/wired-divider.js?module/script加载后页面上所有wired-divider标签都会被自动升级为手绘分隔线组件。在 HTML 中使用最简单的用法是把wired-divider放在两个内容区块之间。原文档给出的示例pLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p wired-divider/wired-divider pLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p仓库中提供了可直接运行的完整示例页面 examples/divider.html它通过script typemodule src../lib/wired-divider.js/script引入本地构建产物并用两段 Lorem ipsum 文本夹着一个wired-divider/wired-divider来演示效果。参照该示例你的页面最小结构为!DOCTYPE html html head script typemodule srchttps://unpkg.com/wired-elements/lib/wired-divider.js?module/script /head body p上方段落……/p wired-divider/wired-divider p下方段落……/p /body /html分隔线会自动撑满宿主元素display: block的可用宽度并在组件首次渲染或容器尺寸变化时按当前宽度重新绘制。属性详解elevationwired-divider只暴露一个属性属性类型取值范围默认值说明elevationNumber15含边界1绘制的手绘线条数elevation表示组件绘制几条叠加的抖动线条。值为 1 时只画一条线值越大线条越浓重视觉上像多层描边可用作更强的视觉分隔强调。!-- 单条线默认 -- wired-divider/wired-divider !-- 双线分隔 -- wired-divider elevation2/wired-divider !-- 五条线最浓重 -- wired-divider elevation5/wired-divider从源码看elevation是property({ type: Number })声明的一个数字属性src/wired-divider.ts#L8并且超出 15 范围的值会被钳制。绘制与尺寸计算两处都执行了同样的钳制逻辑const elev Math.min(Math.max(1, this.elevation), 5);也就是说即使传入elevation10或elevation0实际绘制仍按 5 条或 1 条处理而不是抛出错误。由于它是响应式属性运行时通过 JS 修改也会触发重绘const divider document.querySelector(wired-divider); divider.elevation 3; // 立即变为 3 条线自定义外观颜色与线宽组件遵循currentColor继承机制因此通过 CSS 的color属性即可改变分隔线颜色无需任何专属样式变量wired-divider { color: #b03060; /* 任意文字颜色都会作用于分隔线 */ }原因在基类样式 src/wired-base.ts#L24-L28 中所有path均设置了stroke: currentColor;和stroke-width: 0.7;。如果希望更粗的笔触可以直接覆盖路径样式wired-divider path { stroke-width: 1.5; }此外基类样式还规定宿主元素默认opacity: 0只有当组件完成首次绘制并加上wired-rendered类后才淡入显示src/wired-base.ts#L6-L12避免用户看到绘制前的空白或半成品闪烁。源码原理手绘线是如何画出来的画布尺寸与线条布局WiredDivider的重绘流程由基类WiredBase.wiredRender()驱动src/wired-base.ts#L44-L59先通过canvasSize()计算画布尺寸再调用抽象方法draw()绘制。divider 的实现非常直观src/wired-divider.ts#L30-L41protected canvasSize(): Point { const size this.getBoundingClientRect(); const elev Math.min(Math.max(1, this.elevation), 5); return [size.width, elev * 6]; } protected draw(svg: SVGSVGElement, size: Point) { const elev Math.min(Math.max(1, this.elevation), 5); for (let i 0; i elev; i) { line(svg, 0, (i * 6) 3, size[0], (i * 6) 3, this.seed); } }可以拆解出几个关键结论高度公式画布高度 elevation × 6像素即每条线占用 6px 的纵向空间线条位置第i条线从 0 开始绘制在纵向i * 6 3处正好落在每个 6px 条带的垂直居中位置横向贯穿每条线从 x0 画到 x容器宽度因此分隔线始终占满可用宽度画布宽度自适应宽度来自getBoundingClientRect()所以无论容器如何变化线条都会重新铺满。抖动效果来自 Rough.jsline()函数在 src/wired-lib.ts#L100-L102 中定义它调用 Rough.js 的roughLine渲染器生成 SVG path。Rough.js 的随机参数在 src/wired-lib.ts#L32-L54 统一配置roughness: 1抖动程度bowing: 0.85弯曲程度maxRandomnessOffset: 2随机偏移上限stroke: #000、strokeWidth: 1.5作为绘制参数最终呈色仍受currentColor影响正因为 Rough.js 引入了随机偏移画出的线不是笔直的标准线段而是带着轻微毛边与弯曲的手绘感线条。随机种子每次都是独一无二的手写体每个组件实例在创建时都会生成一个随机种子src/wired-base.ts#L38protected seed Math.floor(Math.random() * 2 ** 31);这个seed在每次调用line()时作为参数传入 Rough.js。结果是同一个页面上多个wired-divider的抖动形态各不相同如同每个人手写的线都不一样而同一实例的多次重绘如窗口缩放则会复用同一个 seed保持线条形态稳定一致。响应式重绘机制WiredDivider通过两种机制监听尺寸变化src/wired-divider.ts#L52-L72优先使用ResizeObserver观察宿主元素尺寸变化时触发wiredRender()若环境不支持ResizeObserver则回退到监听window的resize事件passive: true。而wiredRender()内部还会做一次尺寸比对src/wired-base.ts#L45-L58只有宽高真正变化时才清空旧的 SVG 子节点并按新尺寸重绘否则直接跳过避免无意义的重复绘制开销。组件在disconnectedCallback中会正确解除监听防止内存泄漏。与整个组件库的关系wired-divider只是 wired-elements 中 20 余个手绘组件之一总入口 src/wired-elements.ts 会导出全部组件包括WiredButton、WiredInput、WiredCard等因此安装一个包即可按需引用任意组件。各组件共享 WiredBase 基类 的尺寸变化重绘 随机种子 currentColor 上色这套统一机制使用体验一致。更多组件的 API 文档位于 docs 目录组件行为也遵循 README 中的通用安装与使用约定见 README.md。许可证wired-divider 随 wired-elements 整体以 MIT License 开源版权归 Preet Shihn 所有见 docs/wired-divider.md 与 package.json 中的 license 字段。你可以在个人与商业项目中自由使用包括 wireframe 工具、原型演示和产品 UI。赞分享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点击查看免费下载相关推荐flask-restful-swagger源码解析Swagger规范提取的实现原理flask restful swagger源码解析Swagger规范提取的实现原理 flask restful swagger是一个专为Flask RESTf后端开发工具MJML 邮件开发指南mj-divider 分隔线组件从配置到源码原理全解析MJML 邮件开发指南mj divider 分隔线组件从配置到源码原理全解析 导读 mj divider 是 MJML 标准组件库中用于在响应式邮件中插入水平前端CLIwired-elements 之 wired-radio-group手绘风格单选组组件完整使用与源码解析wired elements 之 wired radio group手绘风格单选组组件完整使用与源码解析 导读 wired radio group 是 wirUI组件前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考