Shared 函数库

Appearance

generatePlaceholderImage ​

根据宽高比和宽度生成可配置的占位图，支持多种图案、配色与外观参数。

预览 （512×512）

生成中...
画布
配色
图案参数
位置与变换

前置依赖 ​

依赖参数 ​

参数名类型说明
deps.createCanvas(width: number, height: number) => CanvasLike创建指定大小的 Canvas 对象（浏览器可用 document.createElement('canvas') 实现）

环境要求 ​

  • 浏览器环境: 使用 document.createElement('canvas') 创建 Canvas
  • Node.js 环境: 需要使用 canvas 库或类似的 Canvas 实现

函数签名 ​

typescript
function generatePlaceholderImage(
  options: GeneratePlaceholderImageOptions,
  deps: GeneratePlaceholderImageDeps
): GeneratePlaceholderImageResult

interface GeneratePlaceholderImageOptions {
  width: number
  aspectRatio: number
  patternType?: PlaceholderPatternType
  simpleShape?: SimpleShapeType
  centerMark?: CenterMarkType
  initial?: string
  paletteIndex?: number
  colors?: GeneratePlaceholderImageColors
  polygonSides?: number
  starSpikes?: number
  appearance?: PatternAppearance
  showDimensions?: boolean
}

interface GeneratePlaceholderImageDeps {
  createCanvas: (width: number, height: number) => CanvasLike
}

interface GeneratePlaceholderImageResult {
  canvas: CanvasLike
  toDataURL?: (type?: string, quality?: number) => string
}

参数 ​

参数名类型必填默认值说明
options.widthnumber是-宽度（像素）
options.aspectRationumber是-宽高比（width/height），例如 16/9 或从 "16:9" 解析得到
options.patternTypePlaceholderPatternType否badge图案类型（含圆角徽章、字母标记、双圆交叠等）
options.paletteIndexnumber否0预设配色索引
options.colorsGeneratePlaceholderImageColors否-自定义配色（覆盖预设）
options.centerMarkCenterMarkType否chevron徽章中心符号（badge）
options.initialstring否A字母（monogram）
options.appearancePatternAppearance否-缩放、旋转、偏移、不透明度等（patternScale 整体缩放图案，不单独控制各层）
options.showDimensionsboolean否false是否显示尺寸文字
depsGeneratePlaceholderImageDeps是-环境依赖，提供 createCanvas 方法

返回值 ​

类型说明
GeneratePlaceholderImageResult包含 Canvas 对象和可选的 toDataURL 方法

工作原理 ​

  1. 根据提供的 width 和 aspectRatio 计算高度：height = width / aspectRatio
  2. 通过 deps.createCanvas 创建指定尺寸的 Canvas
  3. 按 paletteIndex 与 colors 确定配色（背景、主色、辅色、强调色）
  4. 按 patternType 绘制图案：
    • badge / monogram / overlap / arc / layers / orbit：徽章类图案
    • simple：简单几何形状
    • card-back / mandala / geometric / ornamental：装饰类图案
  5. 通过 appearance 调整缩放、旋转、偏移、不透明度及图案专属参数

patternScale（0.2–1，默认 0.72）通过 withPatternTransform 统一缩放整个图案组：底板、符号、环、轨道等子元素使用同一 drawSize，随滑块同比例变大变小。card-back 的边框与四角装饰固定在画布上，仅中心纹样受 patternScale 影响；geometric 的平铺单元尺寸也会随 patternScale 变化。

相同配置每次生成结果一致，图案会自动居中显示。

Copyright © 2023-present