UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载Gaze 是 DiceBear 中最极简的头像风格之一——一个彩色几何形身体上只有一双眼睛。本文以仓库文档中的 Gaze 预设画廊apps/docs/pages/styles/gaze/presets/index.md为线索逐一拆解它提供的 12 个现成预设配色、背景、几何形态、动效与缩放并深入源码讲解预设的本质、校验机制、变化数量计算方式以及背后用到的渲染参数。读完本文你可以直接复制任意预设到自己的代码中或通过 Playground、HTTP API、CLI 快速落地也能自己动手调出一套新的 Gaze 风格。什么是 DiceBear 预设官方文档对预设的定义非常朴素A preset is an ordinary set of render options.——预设不过是一组普通的渲染选项render options而已。选中一个预设读取它的代码或是在 Playground 里打开它继续微调预设没有改动的那些选项仍然会随着 seed 不断变化因此画廊里每一行都会列出该预设还剩下多少种不同的头像。这个预设即普通选项集的设计有一个关键优势预设不需要被任何核心库感知。正如 apps/docs/.vitepress/theme/config/presets.ts 中的注释所说明的A preset is nothing but a bag of regular render options, so it works in every library and as HTTP-API query parameters without the definition format or any of the seven cores knowing that presets exist.也就是说同一份预设数据可以直接用于 JavaScript、PHP、Python、Rust、Go、Dart、C# 七种官方核心库也能直接作为 HTTP API 的查询参数无需任何转换。Gaze 的预设数据保存在 apps/docs/.vitepress/theme/presets/gaze.json共 12 条每条由四个字段组成字段含义id稳定的 kebab-case 标识用于 Playground 的?preset深链name预设名称summary一行摘要显示在头像旁description展开卡片后展示的详细设计说明options实际生效的渲染选项集在文档页面侧预设画廊由SitePresetsPage组件渲染SitePresetsPage.vue页面标题会根据预设数量动态生成例如 Twelve Gaze starting points。每一行预设使用同一组 seedGaze 使用预览种子表Dries / Ida / Curtis / …见 apps/docs/.vitepress/theme/config/previewRowSeeds.ts方便横向对比不同预设在同一 seed 下的效果行内还提供Code与Playground两个入口按钮见 SitePresetRow.vue。Gaze 风格速览在深入预设之前先了解 Gaze 风格本身。其风格主页apps/docs/pages/styles/gaze/index.md的描述是A pair of eyes on a colored body and nothing else: eleven silhouettes and eleven eye pairs. With the animation on, the eyes wander and blink while the body hops.即一个彩色身体上放一双眼睛仅此而已。风格内置11 种剪影silhouettes与11 组眼睛eye pairs开启动画后眼睛会转动、眨眼身体会上下跳动。Gaze 默认输出透明背景不声明自己的背景色这一点在后面讲背景预设时还会提到。12 个 Gaze 预设全览以下完整列出 gaze.json 中的全部预设及其选项并按主题分组展开。所有颜色值均为不带#的 6 位十六进制。配色基调类1. Sepia暖棕身体 奶油底色{ backgroundColor: [efe3d2], bodyColor: [d5b28c, c49a70, e0c6a8, b3835c] }暖棕色的身体立在奶油色底上。预设说明提到眼睛并不单独上色而是自动选用两种墨色中能与身体形成对比的那一种——身体换成棕色系后眼睛会自行跟随调整。2. Greyscale去色灰阶{ backgroundColor: [ececee], bodyColor: [c9c9cd, aeaeb4, dcdce0, 94949a] }同一组身体造型只是去掉色相。Gaze 的内容本身只有剪影和一双眼睛因此失去颜色几乎不损失信息量。官方注释指出它适合打印样式表或颜色另有含义的图表场景。3. Duotone单一薄荷绿身体{ backgroundColor: [e2f5ef], bodyColor: [7ad0b4] }整个系列共用一种身体颜色。此时区分两个头像的只剩下剪影、眼睛以及它们之间的距离。4. Muted哑光低饱和{ backgroundColor: [e8e4dc], bodyColor: [a5a58d, b98b73, 8e9aaf, 9c8a94, 8fa38f, b0a58c] }Gaze 官方默认调色板是 6 种明亮的粉彩pastel色这里换成同样造型但更沉稳的 6 种低饱和色适合侧边栏中一次出现十几个头像的场合。5. Electric霓虹撞色{ backgroundColor: [0f0f12], bodyColor: [ff2e88, 00e5ff, 7cff00, ffe600, ff6a00, b400ff] }与 Muted 相反近黑色背景上铺 6 种霓虹色身体。因为霓虹色在每次配对中都是较亮的一方墨色眼睛会自动翻转到较深的那个选择上。背景处理类6. Pastel Wall粉彩浅底{ backgroundColor: [ffe3ea, e3edff, e2f5e9, fdf1d4, efe6ff] }Gaze 本身不声明背景、渲染为透明给一个浅色地面能让剪影获得立得住的边缘且不触碰主体画面。7. Bold Pop高饱和彩底{ backgroundColor: [ff5d8f, ffb703, 43aa8b, 4d96ff, b57bff] }比 Pastel Wall 更张扬。身体保持浅色因此在高饱和底上仍然轮廓清晰。8. Night Shift深色模式专用{ backgroundColor: [16161a] }为深色界面准备近黑背景身体沿用默认粉彩色。因为出厂身体本来就是 pastel 色系无需改动其他任何选项剪影依然可见。9. Sunrise暖色渐变背景{ backgroundColor: [ffd9b0, ffa8bf], backgroundColorFill: linear, backgroundColorAngle: 135 }这个预设演示的是渐变背景选项两个颜色、线性填充linear、固定角度 135°。seed 仍然决定哪个颜色落在渐变的上方。形态与构图类10. Geometric只保留几何直边剪影{ shapeVariant: [circle, square, triangle, pentagon, hexagon, octagon, diamond] }11 种身体剪影中7 种是标准多边形另外 4 种是手绘形状。只保留多边形会让整套头像的边缘处理一致更像一套图标系统而非一群生物。11. Close Up拉近特写{ scale: 1.3 }不用颜色而是用scale构图放大到身体溢出画布边缘只剩下一双眼睛和少量轮廓。在评论区那样的小尺寸头像场景下可读性更好。动效类12. Animated开启内置动画{ animation: true }动画默认关闭animation: true将其打开眼睛转动、眨眼身体跳动。预设说明还提到hopAnimation: true可只播放跳动这一个动画animationSpeed控制节奏并且动画尊重prefers-reduced-motion。从源码结构看hopAnimation对应 src/js/core/src/OptionsDescriptor.ts 中每个动画名各有一个开关的设计——当风格声明了声明式动画时核心库会为每个动画名生成${name}Animation、${name}AnimationSpeed、${name}AnimationDelay三个选项见该文件第 171–185 行hopAnimation正是名为hop的动画轨道对应的开关。在代码中使用预设每个预设本质都是选项对象因此使用方式与手写选项完全一致。以 Sepia 预设为例在 JavaScript 库中dicebear/core 风格定义import { createAvatar } from dicebear/core; import { style } from dicebear/styles/gaze; const avatar createAvatar(style, { seed: Dries, backgroundColor: [efe3d2], bodyColor: [d5b28c, c49a70, e0c6a8, b3835c], }); const svg avatar.toString();文档画廊里的Code按钮会弹出 StylePresetDialog.vue其中内嵌的 StyleOptionsCodePanel.vue 会为同一套选项同时生成 9 种形态的代码HTTP API、JavaScript、PHP、Python、Rust、Go、Dart、C# 与 CLI生成逻辑见 apps/docs/.vitepress/theme/utils/code-examples.ts。这意味着一套预设数据可以无差别地用在七种官方核心库中。对应到 CLI命令形态见 apps/docs/.vitepress/theme/utils/avatar/api.ts 的getAvatarApiCommanddicebear create gaze \ --backgroundColor efe3d2 \ --bodyColor d5b28c c49a70 e0c6a8 b3835c对应到 HTTP API则表现为查询参数数组用逗号连接见同一文件getAvatarApiUrl/11.x/gaze/svg?backgroundColorefe3d2bodyColord5b28c,c49a70,e0c6a8,b3835c此外画廊每一行的Playground按钮会生成深链/playground/?stylegazepresetid见 SitePresetRow.vue 的playgroundUrl在浏览器里打开即可继续调参。每个预设还剩多少种变化画廊每一行都会展示类似2 options · N distinct avatars的信息预设设定了几个选项以及在这个设定下仍然能产生多少种不同的头像。这个数字不是写死的而是由 apps/docs/.vitepress/theme/utils/avatar/combinationCount.ts 的computeCount实时计算的先用 narrowDefinition.ts 把用户设置的选项收缩到风格定义上——固定*Color会收窄调色板固定*Variant会收窄变体池再统计收缩后的定义还能产生多少种不同的渲染结果。narrowDefinition的注释还明确了一点画布级变换flip、rotate、scale、borderRadius、translateX/Y和表现类选项fontFamily、*Fill、*FillStops、*Angle、seed、size不会改变基数因此不计入变化数量。这也解释了为什么 Sunrise 预设使用了渐变填充和角度画廊里显示的变化数量依然只与它固定的背景/身体颜色有关。预设未触及的选项仍随 seed 变化正是计数成立的前提例如 Sepia 只固定了背景色与身体色而剪影、眼睛、旋转等仍由 seed 驱动所以它保留的变化数远大于 Duotone只留 1 种身体色 1 种背景色。预设的底层实现与校验机制数据加载presets.ts 定义了StylePreset类型并用import.meta.glob惰性加载../presets/*.json下的所有文件。采用惰性加载是为了让 Vite 为每个风格单独生成 chunk避免所有 55 个风格文件被打包进一个 214 KB 的公共 chunk 拖慢页面。校验脚本apps/docs/scripts/validate-presets.ts 是预设质量的守门人。它针对每个预设执行以下检查id必须是非空的 kebab-case且全文件内不重复name、summary、description必须是非空字符串options必须是非空对象且每个键都必须被该风格接受用OptionsDescriptor比对未知键直接报错枚举类选项的值必须存在于风格定义中防止组件被重命名后预设静默失效用 6 个探测种子Felix / Aneka / Milo / Luna / Dara / Erik真实渲染每个预设任何种子渲染失败都会报错渲染结果为空输出中不含use元素也会报错对 HTTP API 不支持的选项*ColorOrder、idRandomization、fontFamily、fontWeight、title给出警告。该脚本由文档构建流程调用apps/docs/package.json中build前置validate:presets确保预设不会随风格定义演化而腐烂。页面同步与渲染工具apps/docs/scripts/sync-preset-pages.ts 负责把有预设的风格自动接入文档在风格主页插入 Presets 栏目、生成presets/index.md画廊页并提供--check模式用于 CI 校验。它被设计为幂等可随时重跑。apps/docs/scripts/render-presets.ts 则是一个面向开发者的可视化工具把某个风格的全部预设渲染成一张联系人表contact sheet——每个预设一行使用同一组 seed 横向并排方便肉眼挑选。它的注释提醒预设的失败模式往往是验证器看不见的视觉问题深色预设吞掉线条、颜色冲突、裁切切掉耳朵这张表就是用眼睛检查的工具。用法node scripts/render-presets.ts gaze [out.png] [--seeds6]预设用到的渲染参数详解以上预设共涉及 7 个渲染参数它们在 src/js/core/src/OptionsDescriptor.ts 中都有对应的字段定义底层行为可在 src/js/core/src/Renderer.ts 中找到实现。backgroundColor/bodyColor颜色组颜色选项接受单个值或值数组。数组语义是从这些颜色中随机抽取单值则是固定为这一种。例如 Duotone 的bodyColor: [7ad0b4]会让所有头像共用一个身体色。背景色的渲染在Renderer.ts的#renderBackground第 248–256 行当该风格没有配置任何背景色时返回空字符串Gaze 因此默认透明配置了背景色时则输出一个铺满画布的rect。Gaze 风格自身不声明background颜色组所以只有显式设置backgroundColor才会出现底色。backgroundColorFill/backgroundColorAngle渐变填充*ColorFill是枚举solid | linear | radial*ColorAngle是范围-360 ~ 360的角度。当填充不是solid且颜色多于一个时#resolveColorReference第 560–574 行会调用#buildGradientDef第 580 行起生成linearGradient或radialGradient并把角度写入gradientTransformrotate(...)。Sunrise 预设正是这一机制的演示。shapeVariant变体选择*Variant类选项由 src/js/core/src/Options.ts 的componentVariant归一化为带权重的映射权重支持2:name这样的Prng.weightedPick语法。Geometric 预设通过把shapeVariant收窄为 7 个多边形来统一边缘风格。scale画布缩放scale是范围0 ~ 10的画布级变换见OptionsDescriptor.ts第 95 行Close Up 预设用它把身体放大到溢出画布。animation/animationSpeed/hopAnimation动效动效参数只在风格声明了声明式动画时才被广告出来OptionsDescriptor.ts第 171–185 行。animation是总开关animationSpeed范围0.1 ~ 10按动画名生成的hopAnimation可单独控制名为hop的轨道。渲染端把动画编译为keyframes CSS classRenderer.ts第 829 行起并将所有动画 CSS 包进media (prefers-reduced-motion: no-preference)媒体查询中第 968–985 行——这正是预设说明中动画尊重 prefers-reduced-motion的源码依据系统开启减少动态效果的用户会拿到静态头像。相关资源入口Gaze 风格主页apps/docs/pages/styles/gaze/index.mdGaze 预设数据本文全部选项的权威来源apps/docs/.vitepress/theme/presets/gaze.json预设类型与加载器apps/docs/.vitepress/theme/config/presets.ts预设校验脚本apps/docs/scripts/validate-presets.ts画廊页面组件SitePresetsPage.vue、SitePresetRow.vue变化数量计算combinationCount.ts 与 narrowDefinition.ts代码示例生成code-examples.ts 与 api.ts渲染参数定义与实现OptionsDescriptor.ts、Options.ts、Renderer.ts风格在编辑器中注册apps/editor/src/config/styles.ts相关玩法Playgroundapps/docs/pages/playground/index.md、HTTP API 集成apps/docs/pages/integrations/http-api/index.md如果你想要的配色不在这 12 个预设里也可以直接拿任意预设的 JSON 作为起点——它本质上就是一份普通的Avatar选项对象改几个十六进制值就能得到你自己的 Gaze 风格。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐DiceBear Cutouts 风格预设Presets指南12 套纸拼贴头像现成渲染方案DiceBear Cutouts 风格预设Presets指南12 套纸拼贴头像现成渲染方案 Cutouts 是 DiceBear 中一款撕纸拼贴风格的UI组件后端DiceBear Voxel Art 头像风格实战全身体素角色、12 个官方预设与风格选项详解DiceBear Voxel Art 头像风格实战全身体素角色、12 个官方预设与风格选项详解 本篇围绕 DiceBear 的 Voxel Art体素艺术UI组件后端DiceBear Personas 风格预置Presets详解12 套开箱即用的渲染选项组合DiceBear Personas 风格预置Presets详解12 套开箱即用的渲染选项组合 Personas 是 DiceBear 提供的扁平化半身人像UI组件后端上一篇前端 XSS 漏洞扫描实战基于 frontend-mobile-security 插件的 xss-scan 命令全解析下一篇MongoDB 命令分发机制Command Dispatch深度解析从网络请求到数据库执行创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
DiceBear Gaze 风格预设全攻略：12 个现成方案与渲染参数深度解析
UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载Gaze 是 DiceBear 中最极简的头像风格之一——一个彩色几何形身体上只有一双眼睛。本文以仓库文档中的 Gaze 预设画廊apps/docs/pages/styles/gaze/presets/index.md为线索逐一拆解它提供的 12 个现成预设配色、背景、几何形态、动效与缩放并深入源码讲解预设的本质、校验机制、变化数量计算方式以及背后用到的渲染参数。读完本文你可以直接复制任意预设到自己的代码中或通过 Playground、HTTP API、CLI 快速落地也能自己动手调出一套新的 Gaze 风格。什么是 DiceBear 预设官方文档对预设的定义非常朴素A preset is an ordinary set of render options.——预设不过是一组普通的渲染选项render options而已。选中一个预设读取它的代码或是在 Playground 里打开它继续微调预设没有改动的那些选项仍然会随着 seed 不断变化因此画廊里每一行都会列出该预设还剩下多少种不同的头像。这个预设即普通选项集的设计有一个关键优势预设不需要被任何核心库感知。正如 apps/docs/.vitepress/theme/config/presets.ts 中的注释所说明的A preset is nothing but a bag of regular render options, so it works in every library and as HTTP-API query parameters without the definition format or any of the seven cores knowing that presets exist.也就是说同一份预设数据可以直接用于 JavaScript、PHP、Python、Rust、Go、Dart、C# 七种官方核心库也能直接作为 HTTP API 的查询参数无需任何转换。Gaze 的预设数据保存在 apps/docs/.vitepress/theme/presets/gaze.json共 12 条每条由四个字段组成字段含义id稳定的 kebab-case 标识用于 Playground 的?preset深链name预设名称summary一行摘要显示在头像旁description展开卡片后展示的详细设计说明options实际生效的渲染选项集在文档页面侧预设画廊由SitePresetsPage组件渲染SitePresetsPage.vue页面标题会根据预设数量动态生成例如 Twelve Gaze starting points。每一行预设使用同一组 seedGaze 使用预览种子表Dries / Ida / Curtis / …见 apps/docs/.vitepress/theme/config/previewRowSeeds.ts方便横向对比不同预设在同一 seed 下的效果行内还提供Code与Playground两个入口按钮见 SitePresetRow.vue。Gaze 风格速览在深入预设之前先了解 Gaze 风格本身。其风格主页apps/docs/pages/styles/gaze/index.md的描述是A pair of eyes on a colored body and nothing else: eleven silhouettes and eleven eye pairs. With the animation on, the eyes wander and blink while the body hops.即一个彩色身体上放一双眼睛仅此而已。风格内置11 种剪影silhouettes与11 组眼睛eye pairs开启动画后眼睛会转动、眨眼身体会上下跳动。Gaze 默认输出透明背景不声明自己的背景色这一点在后面讲背景预设时还会提到。12 个 Gaze 预设全览以下完整列出 gaze.json 中的全部预设及其选项并按主题分组展开。所有颜色值均为不带#的 6 位十六进制。配色基调类1. Sepia暖棕身体 奶油底色{ backgroundColor: [efe3d2], bodyColor: [d5b28c, c49a70, e0c6a8, b3835c] }暖棕色的身体立在奶油色底上。预设说明提到眼睛并不单独上色而是自动选用两种墨色中能与身体形成对比的那一种——身体换成棕色系后眼睛会自行跟随调整。2. Greyscale去色灰阶{ backgroundColor: [ececee], bodyColor: [c9c9cd, aeaeb4, dcdce0, 94949a] }同一组身体造型只是去掉色相。Gaze 的内容本身只有剪影和一双眼睛因此失去颜色几乎不损失信息量。官方注释指出它适合打印样式表或颜色另有含义的图表场景。3. Duotone单一薄荷绿身体{ backgroundColor: [e2f5ef], bodyColor: [7ad0b4] }整个系列共用一种身体颜色。此时区分两个头像的只剩下剪影、眼睛以及它们之间的距离。4. Muted哑光低饱和{ backgroundColor: [e8e4dc], bodyColor: [a5a58d, b98b73, 8e9aaf, 9c8a94, 8fa38f, b0a58c] }Gaze 官方默认调色板是 6 种明亮的粉彩pastel色这里换成同样造型但更沉稳的 6 种低饱和色适合侧边栏中一次出现十几个头像的场合。5. Electric霓虹撞色{ backgroundColor: [0f0f12], bodyColor: [ff2e88, 00e5ff, 7cff00, ffe600, ff6a00, b400ff] }与 Muted 相反近黑色背景上铺 6 种霓虹色身体。因为霓虹色在每次配对中都是较亮的一方墨色眼睛会自动翻转到较深的那个选择上。背景处理类6. Pastel Wall粉彩浅底{ backgroundColor: [ffe3ea, e3edff, e2f5e9, fdf1d4, efe6ff] }Gaze 本身不声明背景、渲染为透明给一个浅色地面能让剪影获得立得住的边缘且不触碰主体画面。7. Bold Pop高饱和彩底{ backgroundColor: [ff5d8f, ffb703, 43aa8b, 4d96ff, b57bff] }比 Pastel Wall 更张扬。身体保持浅色因此在高饱和底上仍然轮廓清晰。8. Night Shift深色模式专用{ backgroundColor: [16161a] }为深色界面准备近黑背景身体沿用默认粉彩色。因为出厂身体本来就是 pastel 色系无需改动其他任何选项剪影依然可见。9. Sunrise暖色渐变背景{ backgroundColor: [ffd9b0, ffa8bf], backgroundColorFill: linear, backgroundColorAngle: 135 }这个预设演示的是渐变背景选项两个颜色、线性填充linear、固定角度 135°。seed 仍然决定哪个颜色落在渐变的上方。形态与构图类10. Geometric只保留几何直边剪影{ shapeVariant: [circle, square, triangle, pentagon, hexagon, octagon, diamond] }11 种身体剪影中7 种是标准多边形另外 4 种是手绘形状。只保留多边形会让整套头像的边缘处理一致更像一套图标系统而非一群生物。11. Close Up拉近特写{ scale: 1.3 }不用颜色而是用scale构图放大到身体溢出画布边缘只剩下一双眼睛和少量轮廓。在评论区那样的小尺寸头像场景下可读性更好。动效类12. Animated开启内置动画{ animation: true }动画默认关闭animation: true将其打开眼睛转动、眨眼身体跳动。预设说明还提到hopAnimation: true可只播放跳动这一个动画animationSpeed控制节奏并且动画尊重prefers-reduced-motion。从源码结构看hopAnimation对应 src/js/core/src/OptionsDescriptor.ts 中每个动画名各有一个开关的设计——当风格声明了声明式动画时核心库会为每个动画名生成${name}Animation、${name}AnimationSpeed、${name}AnimationDelay三个选项见该文件第 171–185 行hopAnimation正是名为hop的动画轨道对应的开关。在代码中使用预设每个预设本质都是选项对象因此使用方式与手写选项完全一致。以 Sepia 预设为例在 JavaScript 库中dicebear/core 风格定义import { createAvatar } from dicebear/core; import { style } from dicebear/styles/gaze; const avatar createAvatar(style, { seed: Dries, backgroundColor: [efe3d2], bodyColor: [d5b28c, c49a70, e0c6a8, b3835c], }); const svg avatar.toString();文档画廊里的Code按钮会弹出 StylePresetDialog.vue其中内嵌的 StyleOptionsCodePanel.vue 会为同一套选项同时生成 9 种形态的代码HTTP API、JavaScript、PHP、Python、Rust、Go、Dart、C# 与 CLI生成逻辑见 apps/docs/.vitepress/theme/utils/code-examples.ts。这意味着一套预设数据可以无差别地用在七种官方核心库中。对应到 CLI命令形态见 apps/docs/.vitepress/theme/utils/avatar/api.ts 的getAvatarApiCommanddicebear create gaze \ --backgroundColor efe3d2 \ --bodyColor d5b28c c49a70 e0c6a8 b3835c对应到 HTTP API则表现为查询参数数组用逗号连接见同一文件getAvatarApiUrl/11.x/gaze/svg?backgroundColorefe3d2bodyColord5b28c,c49a70,e0c6a8,b3835c此外画廊每一行的Playground按钮会生成深链/playground/?stylegazepresetid见 SitePresetRow.vue 的playgroundUrl在浏览器里打开即可继续调参。每个预设还剩多少种变化画廊每一行都会展示类似2 options · N distinct avatars的信息预设设定了几个选项以及在这个设定下仍然能产生多少种不同的头像。这个数字不是写死的而是由 apps/docs/.vitepress/theme/utils/avatar/combinationCount.ts 的computeCount实时计算的先用 narrowDefinition.ts 把用户设置的选项收缩到风格定义上——固定*Color会收窄调色板固定*Variant会收窄变体池再统计收缩后的定义还能产生多少种不同的渲染结果。narrowDefinition的注释还明确了一点画布级变换flip、rotate、scale、borderRadius、translateX/Y和表现类选项fontFamily、*Fill、*FillStops、*Angle、seed、size不会改变基数因此不计入变化数量。这也解释了为什么 Sunrise 预设使用了渐变填充和角度画廊里显示的变化数量依然只与它固定的背景/身体颜色有关。预设未触及的选项仍随 seed 变化正是计数成立的前提例如 Sepia 只固定了背景色与身体色而剪影、眼睛、旋转等仍由 seed 驱动所以它保留的变化数远大于 Duotone只留 1 种身体色 1 种背景色。预设的底层实现与校验机制数据加载presets.ts 定义了StylePreset类型并用import.meta.glob惰性加载../presets/*.json下的所有文件。采用惰性加载是为了让 Vite 为每个风格单独生成 chunk避免所有 55 个风格文件被打包进一个 214 KB 的公共 chunk 拖慢页面。校验脚本apps/docs/scripts/validate-presets.ts 是预设质量的守门人。它针对每个预设执行以下检查id必须是非空的 kebab-case且全文件内不重复name、summary、description必须是非空字符串options必须是非空对象且每个键都必须被该风格接受用OptionsDescriptor比对未知键直接报错枚举类选项的值必须存在于风格定义中防止组件被重命名后预设静默失效用 6 个探测种子Felix / Aneka / Milo / Luna / Dara / Erik真实渲染每个预设任何种子渲染失败都会报错渲染结果为空输出中不含use元素也会报错对 HTTP API 不支持的选项*ColorOrder、idRandomization、fontFamily、fontWeight、title给出警告。该脚本由文档构建流程调用apps/docs/package.json中build前置validate:presets确保预设不会随风格定义演化而腐烂。页面同步与渲染工具apps/docs/scripts/sync-preset-pages.ts 负责把有预设的风格自动接入文档在风格主页插入 Presets 栏目、生成presets/index.md画廊页并提供--check模式用于 CI 校验。它被设计为幂等可随时重跑。apps/docs/scripts/render-presets.ts 则是一个面向开发者的可视化工具把某个风格的全部预设渲染成一张联系人表contact sheet——每个预设一行使用同一组 seed 横向并排方便肉眼挑选。它的注释提醒预设的失败模式往往是验证器看不见的视觉问题深色预设吞掉线条、颜色冲突、裁切切掉耳朵这张表就是用眼睛检查的工具。用法node scripts/render-presets.ts gaze [out.png] [--seeds6]预设用到的渲染参数详解以上预设共涉及 7 个渲染参数它们在 src/js/core/src/OptionsDescriptor.ts 中都有对应的字段定义底层行为可在 src/js/core/src/Renderer.ts 中找到实现。backgroundColor/bodyColor颜色组颜色选项接受单个值或值数组。数组语义是从这些颜色中随机抽取单值则是固定为这一种。例如 Duotone 的bodyColor: [7ad0b4]会让所有头像共用一个身体色。背景色的渲染在Renderer.ts的#renderBackground第 248–256 行当该风格没有配置任何背景色时返回空字符串Gaze 因此默认透明配置了背景色时则输出一个铺满画布的rect。Gaze 风格自身不声明background颜色组所以只有显式设置backgroundColor才会出现底色。backgroundColorFill/backgroundColorAngle渐变填充*ColorFill是枚举solid | linear | radial*ColorAngle是范围-360 ~ 360的角度。当填充不是solid且颜色多于一个时#resolveColorReference第 560–574 行会调用#buildGradientDef第 580 行起生成linearGradient或radialGradient并把角度写入gradientTransformrotate(...)。Sunrise 预设正是这一机制的演示。shapeVariant变体选择*Variant类选项由 src/js/core/src/Options.ts 的componentVariant归一化为带权重的映射权重支持2:name这样的Prng.weightedPick语法。Geometric 预设通过把shapeVariant收窄为 7 个多边形来统一边缘风格。scale画布缩放scale是范围0 ~ 10的画布级变换见OptionsDescriptor.ts第 95 行Close Up 预设用它把身体放大到溢出画布。animation/animationSpeed/hopAnimation动效动效参数只在风格声明了声明式动画时才被广告出来OptionsDescriptor.ts第 171–185 行。animation是总开关animationSpeed范围0.1 ~ 10按动画名生成的hopAnimation可单独控制名为hop的轨道。渲染端把动画编译为keyframes CSS classRenderer.ts第 829 行起并将所有动画 CSS 包进media (prefers-reduced-motion: no-preference)媒体查询中第 968–985 行——这正是预设说明中动画尊重 prefers-reduced-motion的源码依据系统开启减少动态效果的用户会拿到静态头像。相关资源入口Gaze 风格主页apps/docs/pages/styles/gaze/index.mdGaze 预设数据本文全部选项的权威来源apps/docs/.vitepress/theme/presets/gaze.json预设类型与加载器apps/docs/.vitepress/theme/config/presets.ts预设校验脚本apps/docs/scripts/validate-presets.ts画廊页面组件SitePresetsPage.vue、SitePresetRow.vue变化数量计算combinationCount.ts 与 narrowDefinition.ts代码示例生成code-examples.ts 与 api.ts渲染参数定义与实现OptionsDescriptor.ts、Options.ts、Renderer.ts风格在编辑器中注册apps/editor/src/config/styles.ts相关玩法Playgroundapps/docs/pages/playground/index.md、HTTP API 集成apps/docs/pages/integrations/http-api/index.md如果你想要的配色不在这 12 个预设里也可以直接拿任意预设的 JSON 作为起点——它本质上就是一份普通的Avatar选项对象改几个十六进制值就能得到你自己的 Gaze 风格。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐DiceBear Cutouts 风格预设Presets指南12 套纸拼贴头像现成渲染方案DiceBear Cutouts 风格预设Presets指南12 套纸拼贴头像现成渲染方案 Cutouts 是 DiceBear 中一款撕纸拼贴风格的UI组件后端DiceBear Voxel Art 头像风格实战全身体素角色、12 个官方预设与风格选项详解DiceBear Voxel Art 头像风格实战全身体素角色、12 个官方预设与风格选项详解 本篇围绕 DiceBear 的 Voxel Art体素艺术UI组件后端DiceBear Personas 风格预置Presets详解12 套开箱即用的渲染选项组合DiceBear Personas 风格预置Presets详解12 套开箱即用的渲染选项组合 Personas 是 DiceBear 提供的扁平化半身人像UI组件后端上一篇前端 XSS 漏洞扫描实战基于 frontend-mobile-security 插件的 xss-scan 命令全解析下一篇MongoDB 命令分发机制Command Dispatch深度解析从网络请求到数据库执行创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考