gavin/font2pic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

update at 2026-02-08 23:38:19

Browse Source
This commit is contained in:
douboer
2026-02-08 23:38:19 +08:00
parent f078dd3261
commit 77a0c7b741
7 changed files with 306 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
miniprogram/pages/index/index.js
View File

@@ -8,6 +8,11 @@ const { renderSvgByApi, renderPngByApi } = require('../../utils/mp/render-api')
// const { ICON_PATHS } = require('../../config/cdn') // CDN 方案暂时注释
const COLOR_PALETTE = ['#000000', '#1d4ed8', '#047857', '#b45309', '#dc2626', '#7c3aed']
const FONT_SIZE_MIN = 20
const FONT_SIZE_MAX = 120
const PREVIEW_RENDER_FONT_SIZE = 120
const MIN_PREVIEW_IMAGE_WIDTH = 24
const MAX_PREVIEW_IMAGE_WIDTH = 2400
// 临时使用本地图标 - 根据Figma annotation配置
const LOCAL_ICON_PATHS = {
@@ -18,6 +23,7 @@ const LOCAL_ICON_PATHS = {
// 导出按钮（根据Figma annotation）
exportSvg: '/assets/icons/export-svg-s.svg', // 紫色SVG导出按钮
exportPng: '/assets/icons/export-png-s.svg', // 蓝色PNG导出按钮
download: '/assets/icons/download.svg', // 下载图标
// 输入框图标
content: '/assets/icons/content.svg', // 输入框左侧绿色图标
// 字体树图标（根据Figma annotation）
@@ -43,6 +49,12 @@ function normalizeHexColor(input) {
return fallback
}
function clampFontSize(value, fallback = PREVIEW_RENDER_FONT_SIZE) {
const parsed = Number(value)
const base = Number.isFinite(parsed) ? parsed : Number(fallback)
return Math.min(FONT_SIZE_MAX, Math.max(FONT_SIZE_MIN, Math.round(base)))
}
function extractErrorMessage(error, fallback) {
if (!error) {
return fallback
@@ -69,16 +81,75 @@ function writePngBufferToTempFile(pngBuffer, fontName) {
return filePath
}
function formatSvgNumber(value) {
const text = String(Number(value).toFixed(2))
return text.replace(/\.?0+$/, '')
}
function replaceSvgFillColor(svg, color) {
const normalizedColor = normalizeHexColor(color)
const source = String(svg || '')
if (!source) return ''
if (/<g\b[^>]*\sfill="[^"]*"/.test(source)) {
return source.replace(/(<g\b[^>]*\sfill=")[^"]*(")/, `$1${normalizedColor}$2`)
}
return source.replace(/<g\b([^>]*)>/, `<g$1 fill="${normalizedColor}">`)
}
function scaleSvgDimensions(svg, scale) {
const source = String(svg || '')
const safeScale = Number(scale)
if (!source || !Number.isFinite(safeScale) || safeScale <= 0) {
return source
}
return source
.replace(/width="([0-9]+(?:\.[0-9]+)?)"/, (match, width) => {
const scaledWidth = Number(width) * safeScale
return `width="${formatSvgNumber(scaledWidth)}"`
})
.replace(/height="([0-9]+(?:\.[0-9]+)?)"/, (match, height) => {
const scaledHeight = Number(height) * safeScale
return `height="${formatSvgNumber(scaledHeight)}"`
})
}
function applyLocalStyleToFontItem(font, fontSize, color) {
if (!font || !font.baseSvg) {
return font
}
const targetSize = clampFontSize(fontSize, PREVIEW_RENDER_FONT_SIZE)
const renderSize = Number(font.renderFontSize) > 0 ? Number(font.renderFontSize) : PREVIEW_RENDER_FONT_SIZE
const scale = targetSize / renderSize
const styledSvg = scaleSvgDimensions(replaceSvgFillColor(font.baseSvg, color), scale)
const scaledWidth = Number(font.baseWidth) > 0 ? Number(font.baseWidth) * scale : 0
const previewImageWidth = Math.max(
MIN_PREVIEW_IMAGE_WIDTH,
Math.min(MAX_PREVIEW_IMAGE_WIDTH, Math.round(scaledWidth || MIN_PREVIEW_IMAGE_WIDTH)),
)
return {
...font,
svg: styledSvg,
previewSrc: toSvgDataUri(styledSvg),
previewImageStyle: `width:${previewImageWidth}px;max-width:100%;`,
previewError: '',
}
}
Page({
data: {
inputText: '星程字体转换',
fontSize: 120,
fontSize: FONT_SIZE_MAX,
letterSpacingInput: '0',
textColor: '#000000',
colorPalette: COLOR_PALETTE,
selectedFonts: [], // 当前已选中的字体列表
fontCategories: [], // 字体分类树
favoriteCategories: [], // 已收藏字体分类树
favoriteFonts: [], // 已收藏字体平铺列表
showColorPicker: false,
favorites: [],
// 使用本地图标路径
@@ -97,6 +168,7 @@ Page({
this.fontMap = new Map()
this.generateTimer = null
this.categoryExpandedMap = {}
await this.bootstrap()
},
@@ -114,6 +186,13 @@ Page({
}
},
applyLocalPreviewStyles() {
const fontSize = clampFontSize(this.data.fontSize, PREVIEW_RENDER_FONT_SIZE)
const textColor = normalizeHexColor(this.data.textColor)
const selectedFonts = this.data.selectedFonts.map(font => applyLocalStyleToFontItem(font, fontSize, textColor))
this.setData({ selectedFonts })
},
async bootstrap() {
wx.showLoading({ title: '加载中', mask: true })
try {
@@ -127,12 +206,15 @@ Page({
this.setData({
inputText: state.inputText || this.data.inputText,
fontSize: Number(state.fontSize) > 0 ? Number(state.fontSize) : this.data.fontSize,
fontSize: clampFontSize(state.fontSize, this.data.fontSize),
letterSpacingInput:
typeof state.letterSpacing === 'number' ? String(state.letterSpacing) : this.data.letterSpacingInput,
textColor: normalizeHexColor(state.textColor || this.data.textColor),
favorites,
})
this.categoryExpandedMap = state.categoryExpandedMap && typeof state.categoryExpandedMap === 'object'
? { ...state.categoryExpandedMap }
: {}
// 构建字体树
this.updateFontTrees()
@@ -164,59 +246,72 @@ Page({
// 构建字体分类树
updateFontTrees() {
const categoryMap = new Map()
const favoriteCategoryMap = new Map()
const favorites = this.data.favorites
const keyword = (this.data.searchKeyword || '').trim().toLowerCase()
const selectedIdSet = new Set(this.data.selectedFonts.map(f => f.id))
const normalizedKeyword = (this.data.searchKeyword || '').trim().toLowerCase()
const selectedOnlyMode =
normalizedKeyword.includes('选中') ||
normalizedKeyword.includes('选择') ||
normalizedKeyword.includes('已选') ||
normalizedKeyword.includes('xuan')
const nameKeyword = selectedOnlyMode ? '' : normalizedKeyword
const isSearchMode = normalizedKeyword.length > 0
const favoriteFonts = []
this.fontMap.forEach(font => {
const category = font.category || '其他'
const isFavorite = favorites.includes(font.id)
const isSelected = selectedIdSet.has(font.id)
// “选中/选择/已选/xuan” 搜索模式：仅保留已选字体
if (selectedOnlyMode && !isSelected) {
return
}
// 应用搜索过滤
if (keyword) {
const matchesSearch = font.name.toLowerCase().includes(keyword) ||
category.toLowerCase().includes(keyword)
if (nameKeyword) {
const matchesSearch = font.name.toLowerCase().includes(nameKeyword) ||
category.toLowerCase().includes(nameKeyword)
if (!matchesSearch) return
}
// 所有字体树
if (!categoryMap.has(category)) {
const expandedFromState = this.categoryExpandedMap[category]
categoryMap.set(category, {
category,
expanded: true,
expanded: isSearchMode
? true
: (typeof expandedFromState === 'boolean' ? expandedFromState : false),
fonts: [],
})
}
const selectedIds = this.data.selectedFonts.map(f => f.id)
categoryMap.get(category).fonts.push({
...font,
selected: selectedIds.includes(font.id),
selected: isSelected,
isFavorite,
})
// 已收藏字体树
// 已收藏字体平铺列表
if (isFavorite) {
if (!favoriteCategoryMap.has(category)) {
favoriteCategoryMap.set(category, {
category,
expanded: true,
fonts: [],
})
}
favoriteCategoryMap.get(category).fonts.push({
favoriteFonts.push({
...font,
selected: selectedIds.includes(font.id),
selected: isSelected,
isFavorite: true,
})
}
})
const fontCategories = Array.from(categoryMap.values())
const favoriteCategories = Array.from(favoriteCategoryMap.values())
const fontCategories = Array.from(categoryMap.values()).sort((a, b) => a.category.localeCompare(b.category))
favoriteFonts.sort((a, b) => {
const categoryCompare = String(a.category || '').localeCompare(String(b.category || ''))
if (categoryCompare !== 0) return categoryCompare
return String(a.name || '').localeCompare(String(b.name || ''))
})
this.setData({
fontCategories,
favoriteCategories,
favoriteFonts,
})
},
@@ -307,20 +402,15 @@ Page({
if (index >= 0) {
fontCategories[index].expanded = !fontCategories[index].expanded
this.setData({ fontCategories })
}
},
// 切换收藏分类展开/收起
onToggleFavoriteCategory(e) {
const category = e.currentTarget.dataset.category
if (!category) return
const favoriteCategories = this.data.favoriteCategories
const index = favoriteCategories.findIndex(c => c.category === category)
if (index >= 0) {
favoriteCategories[index].expanded = !favoriteCategories[index].expanded
this.setData({ favoriteCategories })
this.categoryExpandedMap[category] = fontCategories[index].expanded
saveAppState({
inputText: this.data.inputText,
selectedFontIds: this.data.selectedFonts.map(f => f.id),
fontSize: Number(this.data.fontSize),
letterSpacing: Number(this.data.letterSpacingInput || 0),
textColor: this.data.textColor,
categoryExpandedMap: this.categoryExpandedMap,
})
}
},
@@ -333,29 +423,31 @@ Page({
try {
const letterSpacing = Number(this.data.letterSpacingInput || 0)
const fillColor = normalizeHexColor(this.data.textColor)
const result = await renderSvgByApi({
fontId,
text,
fontSize: Number(this.data.fontSize),
fillColor,
// 预览固定基础字号，避免字号/颜色调整时重复请求服务端
fontSize: PREVIEW_RENDER_FONT_SIZE,
fillColor: '#000000',
letterSpacing,
maxCharsPerLine: 45,
})
const previewImageSrc = toSvgDataUri(result.svg)
// 更新对应字体的预览
const selectedFonts = this.data.selectedFonts
const index = selectedFonts.findIndex(f => f.id === fontId)
if (index >= 0) {
selectedFonts[index].previewSrc = previewImageSrc
selectedFonts[index].svg = result.svg
selectedFonts[index].width = result.width
selectedFonts[index].height = result.height
selectedFonts[index].previewError = ''
selectedFonts[index].baseSvg = result.svg
selectedFonts[index].baseWidth = result.width
selectedFonts[index].baseHeight = result.height
selectedFonts[index].renderFontSize = PREVIEW_RENDER_FONT_SIZE
selectedFonts[index] = applyLocalStyleToFontItem(
selectedFonts[index],
Number(this.data.fontSize),
this.data.textColor,
)
this.setData({ selectedFonts })
}
} catch (error) {
@@ -365,6 +457,7 @@ Page({
if (index >= 0) {
selectedFonts[index].previewSrc = ''
selectedFonts[index].svg = ''
selectedFonts[index].baseSvg = ''
selectedFonts[index].previewError = (error && error.message) ? error.message : '预览生成失败'
this.setData({ selectedFonts })
}
@@ -412,23 +505,24 @@ Page({
},
onFontSizeChanging(event) {
this.setData({ fontSize: Number(event.detail.value) || this.data.fontSize })
this.setData({ fontSize: clampFontSize(event.detail.value, this.data.fontSize) })
},
onFontSizeChange(event) {
this.setData({ fontSize: Number(event.detail.value) || this.data.fontSize })
const newSize = clampFontSize(event.detail.value, this.data.fontSize)
this.setData({ fontSize: newSize })
saveAppState({
inputText: this.data.inputText,
selectedFontIds: this.data.selectedFonts.map(f => f.id),
fontSize: Number(event.detail.value),
fontSize: newSize,
letterSpacing: Number(this.data.letterSpacingInput || 0),
textColor: this.data.textColor,
})
this.scheduleGenerate()
this.applyLocalPreviewStyles()
},
onDecreaseFontSize() {
const newSize = Math.max(24, this.data.fontSize - 10)
const newSize = Math.max(FONT_SIZE_MIN, this.data.fontSize - 10)
this.setData({ fontSize: newSize })
saveAppState({
inputText: this.data.inputText,
@@ -437,11 +531,11 @@ Page({
letterSpacing: Number(this.data.letterSpacingInput || 0),
textColor: this.data.textColor,
})
this.scheduleGenerate()
this.applyLocalPreviewStyles()
},
onIncreaseFontSize() {
const newSize = Math.min(320, this.data.fontSize + 10)
const newSize = Math.min(FONT_SIZE_MAX, this.data.fontSize + 10)
this.setData({ fontSize: newSize })
saveAppState({
inputText: this.data.inputText,
@@ -450,7 +544,7 @@ Page({
letterSpacing: Number(this.data.letterSpacingInput || 0),
textColor: this.data.textColor,
})
this.scheduleGenerate()
this.applyLocalPreviewStyles()
},
onShowColorPicker() {
@@ -467,7 +561,7 @@ Page({
onColorInput(event) {
this.setData({ textColor: event.detail.value || '' })
this.scheduleGenerate()
this.applyLocalPreviewStyles()
},
onPickColor(event) {
@@ -483,7 +577,7 @@ Page({
letterSpacing: Number(this.data.letterSpacingInput || 0),
textColor: color,
})
this.scheduleGenerate()
this.applyLocalPreviewStyles()
},
onRegenerate() {
@@ -568,7 +662,10 @@ Page({
if (selectedFonts.length === 1) {
const font = selectedFonts[0]
try {
await shareSvgFromUserTap(font.svg, font.name, this.data.inputText)
const exportSvg = font.baseSvg
? applyLocalStyleToFontItem(font, Number(this.data.fontSize), this.data.textColor).svg
: font.svg
await shareSvgFromUserTap(exportSvg, font.name, this.data.inputText)
wx.showToast({ title: 'SVG 已分享', icon: 'success' })
} catch (error) {
showExportError('导出 SVG 失败', error, '请稍后重试')
@@ -622,14 +719,17 @@ Page({
async onExportSingleSvg(e) {
const fontId = e.currentTarget.dataset.fontId
const font = this.data.selectedFonts.find(f => f.id === fontId)
if (!font || !font.svg) {
wx.showToast({ title: '请先生成预览', icon: 'none' })
return
}
try {
await shareSvgFromUserTap(font.svg, font.name, this.data.inputText)
const exportSvg = font.baseSvg
? applyLocalStyleToFontItem(font, Number(this.data.fontSize), this.data.textColor).svg
: font.svg
await shareSvgFromUserTap(exportSvg, font.name, this.data.inputText)
wx.showToast({ title: 'SVG 已分享', icon: 'success' })
} catch (error) {
showExportError('导出 SVG 失败', error, '请稍后重试')
@@ -639,7 +739,7 @@ Page({
async onExportSinglePng(e) {
const fontId = e.currentTarget.dataset.fontId
const font = this.data.selectedFonts.find(f => f.id === fontId)
if (!font || !font.svg) {
wx.showToast({ title: '请先生成预览', icon: 'none' })
return