用 18 个传统拼布块生成点对称图案：DiceBear Patchwork 头像风格使用指南

UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载导读Patchwork 是 DiceBear 10.5.0 起新增的抽象图案风格把传统拼布艺术quilt中的风车pinwheel、飞鹅flying geese、栅栏rail fence等经典块型搬进头像生成器。本文以仓库中的 Patchwork 风格文档 与 预设数据 为主线讲清楚它的生成原理、HTTP API 与 JavaScript 两种接入方式、核心渲染选项、三个专有色组以及 8 个官方预设的完整配置。读完后你可以直接用一行 URL 或几行 JS 代码生成 Patchwork 头像并基于预设继续调出自己的配色。Patchwork 是什么一张可编程的拼布被DiceBear 官方对 Patchwork 风格的定义只有一句话却点出了它最核心的三个特征A quilt laid from traditional blocks such as pinwheel, flying geese and rail fence. Each avatar repeats two of the eighteen blocks as diagonal twins, so every quilt comes out point symmetric.拆开来看传统块型traditional blocks图案由拼布界经典块型拼成文档明确点名的有pinwheel风车、flying geese飞鹅、rail fence栅栏三种。十八个块eighteen blocks整个风格的可选块共有 18 个上述三个只是其中被点名举例的代表。对角线孪生diagonal twins每一张头像不是随机堆满 18 个块而是从 18 个块中选取 2 个沿对角线成对重复排列。点对称point symmetric由于两个块沿对角线互为镜像/配对最终生成的 quilt 呈现中心对称点对称的几何美感——这正是 Patchwork 与 DiceBear 其他抽象风格如 Shapes、Triangles在视觉上的最大差异每个头像都自带对称秩序。这一设计也解释了为什么 Patchwork 在官方描述中被定位为 free quilt pattern avatar generator它不需要手绘角色、不需要五官只靠拼布块的排列与配色就产出风格统一又变化无穷的图案。官方文档同时明确Patchwork 头像可以通过DiceBear 的 HTTP API或JavaScript 库两种方式创建。快速上手两种官方接入方式官方在文档配置 usageSnippets.ts 中为每个风格统一生成了 HTTP API 与各语言 SDK 的示例代码Patchwork 也不例外。方式一HTTP API零安装Patchwork 风格的 HTTP API 端点为URL 中的10.x即当前主版本线见 HTTP API 集成文档https://api.dicebear.com/10.x/patchwork/svg?seedpatchwork-demo10.xDiceBear 当前 major 版本占位符请求时替换为具体版本patchwork风格名kebab-case 写法?seedpatchwork-demo种子字符串决定本次生成的具体图案。同一个 seed 永远生成同一张头像这是 DiceBear 所有风格的确定性deterministic基础返回image/svgxml。如需 PNG/JPEG可搭配官方转换服务参见 Converter 相关说明。其余所有渲染选项都可以继续以 query 参数追加在 URL 后面下文会讲选项清单例如把背景钉成米色backgroundColore3d2b4。方式二JavaScript 库先安装核心库与样式包安装命令同样来自 usageSnippets.tsnpm install dicebear/core dicebear/styles --save然后生成 Patchwork 头像import { Style, Avatar } from dicebear/core; import definition from dicebear/styles/patchwork.json with { type: json }; const style new Style(definition); const avatar new Avatar(style, { seed: patchwork-demo, // ... 更多选项见下文 }); const svg avatar.toString();关键点说明dicebear/styles/patchwork.json是 Patchwork 风格的定义文件遵循 定义 schema 参考 中描述的结构meta、canvas、components、colors等顶层字段核心渲染逻辑全部由dicebear/core承担new Avatar(style, options)的第二个参数就是全部渲染选项avatar.toString()输出 SVG 字符串可继续交给转换器处理除了 JavaScript仓库还提供 PHP、Python、Rust、Go、Dart、C# 的 core 移植见 src 目录选项语义完全一致只是语法不同。方式三Playground / 预设微调Patchwork 预设页 明确给出了预设的定位A preset is an ordinary set of render options. Pick one, read its code or open it in the Playground and keep tuning.即预设只是普通渲染选项集合你可以直接复制预设的 options 到代码里或者在 Playground 中打开预设后继续拖拽调整。核心渲染选项控制构图与画布Patchwork 同样支持 DiceBear 全风格共用的核心选项完整规范见 核心选项参考。对拼布图案风格而言最常用的是以下几类选项类型默认值对 Patchwork 的实际影响seedstring确定性生成的种子同一种子得到同一张 quiltscalenumber \| [min, max]1围绕画布中心整体缩放0101为原始大小——Close Up 预设就用它实现特写rotatenumber \| [min, max]0旋转角度−360360可传范围让每次随机flipnone \| horizontal \| vertical \| bothnone镜像翻转可传数组随机化borderRadiusnumber \| [min, max]0画布圆角百分比05050 即圆形头像sizeinteger不设输出像素尺寸14096不设时 SVG 随容器缩放translateX/translateYnumber \| [min, max]0画布内水平/垂直平移画布宽/高的百分比−10001000从源码侧印证scale的取值区间定义在 OptionsDescriptor.ts 中scale: { type: range, min: 0, max: 10 }, borderRadius: { type: range, min: 0, max: 50 },range类型意味着既可以传单个固定值也可以传[min, max]二元组——此时 PRNG 在区间内采样让每次生成的头像在同一条允许范围内仍保持变化。核心实现见 Options.ts 的scale()等访问器。三个专有色组fabricA / fabricB / fabricCPatchwork 最特别的地方在于它的专有颜色组。官方预设数据 patchwork.json 显示每个预设都会设置四个键backgroundColor画布背景色fabricAColor织物 A 的颜色fabricBColor织物 B 的颜色fabricCColor织物 C 的颜色。也就是说Patchwork 的拼布画面由三种面料色 背景色构成。这三个fabric*Color属于 DiceBear 的动态颜色选项模式核心选项参考 中定义的{color}Color系列每个颜色组既可以传单个 hex也可以传 hex 数组如fabricAColor: [ff2e88, ff6a00]渲染时从数组中随机抽取。针对颜色组还衍生出一组高级选项同样对 Patchwork 生效选项类型默认值说明{color}ColorFillsolid \| linear \| radialsolid填充类型可传数组随机化{color}ColorFillStopsinteger \| [min, max]2渐变停靠点数量至少 2solid时忽略{color}ColorAnglenumber \| [min, max]0渐变角度−360360{color}ColorOrderrandom \| fixedrandom颜色按给定顺序使用fixed而非随机洗牌例如想要面料 A 走垂直渐变只需传fabricAColorFill: linear、fabricAColorAngle: 90。背景色同样有backgroundColorFill、backgroundColorFillStops、backgroundColorAngle、backgroundColorOrder四个配套选项。内置预设全解析8 套开箱配色预设数据文件 patchwork.json 完整收录了 8 个官方预设。每个预设都带id、name、summary、description和options五个字段下面把每个预设的 options 原样展开并给出解读。Sepia怀旧棕Three browns for the quilt.{ backgroundColor: [e3d2b4], fabricAColor: [8a6a48], fabricBColor: [6b4f35], fabricCColor: [a3855f] }三种面料取一条暖色阶梯背景纸色偏棕黄。官方描述说它读起来像几十年前拍摄的旧照片reads like a quilt photographed decades ago适合复古、年代感主题。Greyscale灰阶Three greys, no hue at all.{ backgroundColor: [ececee], fabricAColor: [5e5e62], fabricBColor: [343437], fabricCColor: [8c8c90] }三种灰、零色调。官方点评块几何本身足够承载画面使 Patchwork 成为少数几个灰阶化几乎不损失效果的风格——这正是它点对称排列的构图优势。Duotone同色相三阶蓝Three steps of one indigo.{ backgroundColor: [dfe3f5], fabricAColor: [9aa2d2], fabricBColor: [3d4272], fabricCColor: [6a71a8] }背景与三种面料使用同一种靛蓝色相、不同明度形成典型的 duotone 双色/单色系视觉非常适合需要克制、统一调性的产品界面。Muted哑光亚麻Dusty fabrics on unbleached cloth.{ backgroundColor: [e8e4dc], fabricAColor: [9c6b58, b98b73], fabricBColor: [6b705c, 7c9082], fabricCColor: [a5a58d, 8e9aaf] }官方说明风格默认自带浓烈的红、绿、金而 Muted 用灰哑色调替换它们把 quilt 从民间艺术推向亚麻织物质感。注意这里每个色组都是双色数组渲染时会随机二选一进一步放大变化。Electric酸性霓虹Acid fabrics on near black.{ backgroundColor: [101216], fabricAColor: [ff2e88, ff6a00], fabricBColor: [00e5ff, 7cff00], fabricCColor: [ffe600, b400ff] }与 Muted 恰好相反把色彩推到风格默认调色板之外的酸性霓虹配近黑背景让 quilt 像被点亮一样reads as lit。适合潮酷、游戏、夜店风场景。Pastel Wall粉彩墙Soft fabrics throughout.{ backgroundColor: [fdf6ec], fabricAColor: [ffc9d6, ffd9b0], fabricBColor: [bfe3d0, b8d8f0], fabricCColor: [ffeaa8, e0d4f5] }整体降至粉彩官方点名适合育婴室或引导页onboarding screen——比默认的民间配色更温和。Bold Pop大胆纯色Primary colors, no shading.{ backgroundColor: [fdf6ec], fabricAColor: [e63946], fabricBColor: [1d3557], fabricCColor: [f4a261] }三个纯原色、没有任何中间色。官方评价块几何足够强撑得起这种直白的调色板The block geometry is strong enough to carry a palette this blunt。Close Up特写缩放Scaled in on a couple of blocks.{ scale: 1.6 }唯一一个不动颜色的预设——只把scale设为1.6。官方解释两个大块在头像尺寸下比一整块小方块拼布更易读。它是用构图而非配色做文章的典型示范也验证了scale选项010默认 1的实际效果。预设机制没被钉死的选项交给 seed预设文档特别强调了一点Options a preset leaves alone keep varying with the seed——预设没有设置的选项会继续随 seed 变化。这带来两个实际含义上述预设只钉住了颜色和可选地缩放块型选择18 个块中选哪 2 个、如何作为对角线孪生排列完全留给 seed 决定因此官方预设页会在每行标注这个预设还能生成多少个不同头像distinct avatars——把 seed 可贡献的剩余变化量量化出来。具体数值由 render-presets.ts 与 sync-preset-pages.ts 等脚本在文档构建期渲染校验得出仓库内不做硬编码。从数据结构看预设就是选项子集 元信息id作为唯一标识、name用于展示、summary/description用于文档文案、options直接就是可以原样喂给Avatar或 HTTP API 的渲染选项。因此把预设搬进自己的代码本质上就是复制这几个键值对const avatar new Avatar(style, { seed: my-quilt, backgroundColor: [e3d2b4], fabricAColor: [8a6a48], fabricBColor: [6b4f35], fabricCColor: [a3855f], });版本与源码佐证引入版本根据 CHANGELOG.mdpatchwork与cutouts、line-face一同在dicebear/styles10.5.0发布中新增将风格总数从 52 提升到 55风格注册所有风格都通过dicebear/styles/{style}.json定义文件暴露JavaScript 核心的加载方式见 usageSnippets.ts编辑器同样以new Style(definition)的方式加载定义见 apps/editor/src/config/styles.ts 的createStyle辅助函数选项约束scale、rotate、borderRadius等数值选项的合法区间与range语义定义在 OptionsDescriptor.ts取值访问器在 Options.ts渲染时由核心渲染器统一处理Renderer.ts。小结Patchwork 是 DiceBear 里以几何秩序换通用性的代表风格18 个传统拼布块、两两对角配对、点对称构图让每张头像既有拼布手作的温度又保持像素级的秩序感。上手路径极短——HTTP API 一条 URL或dicebear/coredicebear/styles几行代码想快速出效果直接复用仓库中 8 个官方预设 的 options再通过scale、三个fabric*Color色组和背景选项继续微调就能在几分钟内得到一批风格统一、细节各异的拼布头像。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐OpenClaw Z.AIGLMProvider 实战指南端点自动探测、模型目录与思考层级配置OpenClaw Z.AIGLMProvider 实战指南端点自动探测、模型目录与思考层级配置 本文基于 OpenClaw 仓库中 docs/providUI组件后端Mac Mouse Fix终极指南让你的普通鼠标在macOS上超越苹果触控板体验Mac Mouse Fix终极指南让你的普通鼠标在macOS上超越苹果触控板体验 你是否曾经在macOS上使用第三方鼠标时感到挫败卡顿的滚动体验、缺失的手势UI组件后端Godot 集成指南用 DiceBear 在 Godot 中生成 SVG 头像Godot 集成指南用 DiceBear 在 Godot 中生成 SVG 头像 DiceBear 为设计师和开发者提供了一整套风格统一的头像生成方案而 GoUI组件后端上一篇当天让机箱从嘶吼变到耳语FanControl 风扇控制完整入门教程下一篇Solidity Coverage 使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考