UD5工具箱
漏光效果添加 - 图片角落红黄色调渐变
为图片添加类似胶片漏光的红黄色调渐变或光晕效果，营造怀旧氛围。
点彩画效果生成器 - Voronoi格子点描风格
点彩画效果生成器
Voronoi格子点描风格 · 基于亮度加权采样 · 支持Lloyd迭代优化
原始图片
拖拽图片到此处
或点击选择文件 · JPG/PNG/WebP
经典点描
浓密暗区
轻盈稀疏
Voronoi细胞
混合模式
点彩结果
点: 0
参数调节
常见问题与知识点
什么是Voronoi点描（Stippling）？
Voronoi点描是一种基于Voronoi图理论的数字点彩技术。它通过在图像暗区域密集分布点、亮区域稀疏分布点来再现图像。核心算法使用亮度加权采样和Lloyd松弛迭代，使得点的分布既符合图像明暗，又保持均匀的空间关系。该技术由Adrian Secord在2002年首次系统提出。
Lloyd迭代是什么？有什么作用？
Lloyd迭代（Lloyd's algorithm）是一种通过反复移动点到其Voronoi单元质心来优化点分布的方法。在点描中，它使点的分布更加均匀自然，避免点堆积或过于稀疏的区域。每次迭代都会重新计算Voronoi图并调整点位置。通常2-5次迭代即可获得良好效果，更多迭代收益递减。
最小距离参数如何影响效果？
最小距离约束确保任意两点之间保持一定间距，避免点重叠。较小的值（1-3px）允许暗区域非常密集，产生丰富层次；较大的值（5-10px）创造更稀疏、更有呼吸感的效果。该参数与目标点数共同决定整体密度。
三种渲染模式有什么区别？
纯点描：仅渲染大小不一的圆点，经典点彩风格。
Voronoi细胞：渲染每个点对应的Voronoi多边形，用原图颜色填充，呈现彩色玻璃效果。
混合叠加：在Voronoi细胞上叠加点描，结合两种风格的视觉特点。
Voronoi细胞：渲染每个点对应的Voronoi多边形，用原图颜色填充，呈现彩色玻璃效果。
混合叠加：在Voronoi细胞上叠加点描，结合两种风格的视觉特点。
如何获得最佳效果？
建议使用高对比度、细节丰富的图片。人像和建筑通常效果最佳。参数方面：目标点数2000-4000、最小距离2-4px、对比度增强1.3-1.8、Lloyd迭代2-3次是常用设置。对于Voronoi细胞模式，点数不宜过多（1000-2000），以保证多边形清晰可见。
SVG和PNG导出有何不同？
PNG是位图格式，适合直接使用和分享，支持所有渲染模式。SVG是矢量格式，可无限缩放而不失真，特别适合纯点描模式（点被导出为circle元素）。Voronoi细胞模式导出SVG时保留多边形结构，可在矢量编辑软件中进一步编辑。
像素绘板 - 网格填色与动画帧
在可缩放网格上选区颜色绘制像素图，支持多帧预览简单动画。
波普艺术效果生成器 - 沃霍尔风格四宫格
将照片转为安迪·沃霍尔风格的丝网印刷波普四宫格，可替换每个格子的色彩。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
图片暗角效果工具 - 在线添加Vignette晕影
为照片四周添加纯色或渐变暗角，调整强度与羽化程度，营造复古或突出中心效果。
渐变网格着色器 - 多点自由色渐变
在画布上放置多个色点，颜色平滑插值形成类似矢量网格渐变的梦幻背景。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
毛玻璃效果生成器 - CSS Glassmorphism在线
调整透明度、模糊度和边框，实时预览毛玻璃UI卡片，生成兼容CSS backdrop-filter代码。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
新拟态UI元素生成器 - 柔和阴影与凸起凹陷
调节背景色、亮阴影与暗阴影距离，生成新拟态风格按钮/卡片样式并导出代码。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层，独立调节每层的偏移、模糊、扩展和颜色，创造复杂立体效果。
双色调效果生成 - 高光阴影颜色映射
将图片灰度化后，把阴影区域映射为一种颜色，高光映射为另一种，创造经典双色效果。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
Etch A Sketch电子画板 - 旋钮控制绘图
模拟经典玩具，按方向键或虚拟旋钮绘制线条，按空格键晃动清除。
老电视效果滤镜 - 图片添加扫描线雪花
为图片添加CRT电视的扫描线、像素抖动和雪花噪点效果，营造怀旧氛围。
Oklch调色板生成器 - 感知均匀色彩搭配
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案，确保视觉一致性。
实时协作画板 - 通过WebSocket同步
基于简单WebSocket服务，多人同时在同一画布上绘图，远程协作。
图片精灵图辅助定位器 - 单击获取CSS坐标
上传精灵图，自动切片检测或手动框选获取背景定位数值，生成CSS Sprite代码。
复古终端样式生成器 - 绿色字符CRT效果
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
首屏大图模板生成器 - 文字叠加背景图
选择背景图片（或使用占位色），配置标题、副标题和按钮，生成Hero区域代码。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。
JSON 结构树浏览器 - 交互展开与路径复制
粘贴JSON对象，生成可折叠的树形视图，点击节点复制其键值路径，方便调试。
Dialog 元素生成器 - 原生模态框样式定制
可视化配置<dialog>元素外观与行为，生成现代化、无障碍友好的模态框代码。