/avatar-gen

一个随机头像生成器的纯前端实现

Primary LanguageVueMIT LicenseMIT

简体中文 | English

头像生成器

简介

一个纯前端实现的头像生成器,并且支持导出与批量下载的功能;

在线演示: https://avatar.waveapp.cn

预览:

运行项目

该项目基于 vue@2.x 构建, 运行前,请确保您已安装了 node 环境

  1. 克隆项目
git clone https://github.com/wave-charts/avatar-gen.git
cd chart-gen
  1. 运行项目

通过 Yarn 运行项目

yarn
yarn serve

通过 npm 运行项目

npm install
npm run serve

更新说明

版本 1.0.0 对头像生成的逻辑进行了重构,现在,头像的生成通过直接拼接 SVG 代码实现, 为 SVG 导出提供了支持, 此外还支持

  • 每个图层素材支持 性别 的配置
  • 每个图层素材支持 权重 的配置
  • DarkMode 的支持
  • 稀有物品 的定义,触发时播放庆祝礼花 🎉

定制

项目的头像相关素材来自 Figma 社区:https://www.figma.com/community/file/829741575478342595/Avatar-Illustration-System

图层管理

图层指 Base(头部)Hair(头发) ... 等; 头像由不同的图层构成,图层定义于 src/views/AvatarCreator/config/refs.tslayerList 变量,是一个 图层数组,定义如下:

declare layerList: Array<LayerListItem>;

interface LayerListItem {
  id: LAYER_ID;  // 图层的唯一标识
  dir: string; // 对应素材文件夹所在目录
  zIndex: number; // 层级
  layers: Array<LayerItemConfig>; // 该图层的素材列表,请查看下方 **素材管理**
  description?: string; // 描述
}

素材管理

素材定义于 src/views/AvatarCreator/config/layerItemConfigs 目录下, 按图层分类命名文件,每个文件内配置了该图层可用的素材列表,以及每个素材的配置,定义如下:

export interface LayerItemConfig {
  // 性别
  genderType: GenderType;

  // 图层权重
  weight: number;

  // 文件名
  filename?: string;

  // 是否为空
  empty?: boolean;

  // 可用的颜色组
  avaiableColorGroups?: ColorGroup[];

  // 配置之后,不会使用随机色,会使用和指定 layer 一样的颜色组
  colorSameAs?: LAYER_ID;

  // 指定当前图层存在时,需要删除的图层类型
  removeLayers?: LAYER_ID[];

  // 颜色不能和指定的相同
  colorNotSameAs?: LAYER_ID[];

  // 是否播放 庆祝礼花 🎉
  congratulate?: boolean;
}

素材原始文件位于 src/views/AvatarCreator/resource 目录下,以图层命名分类到各自的文件夹,素材原始文件以 .svg 的形式存储,在图层配置中,会 存储 filename 字段,从而将配置与素材进行关联。

原始文件中,需要预先将 SVG 中需要使用变量的颜色替换,使用 {{}} 标记插值 如:

<path d="..." fill="{{color[0]}}" stroke="black" />

类型定义位于 src/views/AvatarCreator/interface 目录中