fix(cover): 修复 Windows 上封面主副标题位置跑到底部的问题

- 当封面形象加载失败或未选择时,回退到模板固定位置,避免文字堆在画布底部
- 增加封面形象加载失败的 console.warn 日志
- 修正 FONT_FAMILY 字体名 DouyinSans -> DouyinSansBold
This commit is contained in:
小鱼开发
2026-05-26 17:59:57 +08:00
parent af734eb6ca
commit cf3ea8d619
+22 -14
View File
@@ -47,7 +47,7 @@ interface TemplateDef {
};
}
const FONT_FAMILY = '"DouyinSans", "PingFang SC", "Microsoft YaHei", sans-serif';
const FONT_FAMILY = '"DouyinSansBold", "PingFang SC", "Microsoft YaHei", sans-serif';
/**
* 加载本地图片文件为 HTMLImageElement
@@ -292,12 +292,15 @@ export function useCoverFabric() {
// 2. 封面形象(叠加在背景之上)
let avatarTop = CANVAS_HEIGHT;
let hasAvatar = false;
if (config.avatarImage) {
try {
const scaledHeight = await loadAvatarImage(canvas, config.avatarImage);
avatarTop = CANVAS_HEIGHT - scaledHeight;
} catch {
// no-op: 封面形象加载失败不影响主流程
hasAvatar = true;
} catch (err) {
// 封面形象加载失败不影响主流程,但文字位置需要回退到固定布局
console.warn('[useCoverFabric] 封面形象加载失败:', err);
}
}
@@ -316,18 +319,23 @@ export function useCoverFabric() {
const mainTitleHeight = mainTitleLines.length * mainTitleLineHeight;
const subtitleHeight = subtitleLines.length * subtitleLineHeight;
// 间距配
const gapAvatarToSub = 50; // 人物与副标题间距
const gapSubToMain = 24; // 副标题与主标题间距
// 计算文字位
let subtitleTop: number;
let mainTitleTop: number;
// 从人物头顶往上计算文字位置
// 副标题底部 = 人物顶部 - 间距
const subtitleBottom = avatarTop - gapAvatarToSub;
const subtitleTop = subtitleBottom - subtitleHeight;
// 主标题底部 = 副标题顶部 - 间距
const mainTitleBottom = subtitleTop - gapSubToMain;
const mainTitleTop = mainTitleBottom - mainTitleHeight;
if (hasAvatar) {
// 有封面形象:从人物头顶往上堆叠
const gapAvatarToSub = 50; // 人物与副标题间距
const gapSubToMain = 24; // 副标题与主标题间距
const subtitleBottom = avatarTop - gapAvatarToSub;
subtitleTop = subtitleBottom - subtitleHeight;
const mainTitleBottom = subtitleTop - gapSubToMain;
mainTitleTop = mainTitleBottom - mainTitleHeight;
} else {
// 无封面形象:使用模板固定位置(避免文字堆在画布底部)
mainTitleTop = template.mainTitle.top;
subtitleTop = template.subtitle.top;
}
// 3. 主标题(放在人物上方最外侧)
if (mainTitleLines.length > 0) {