fix(cover): 修复 Windows 上封面主副标题位置跑到底部的问题
- 当封面形象加载失败或未选择时,回退到模板固定位置,避免文字堆在画布底部 - 增加封面形象加载失败的 console.warn 日志 - 修正 FONT_FAMILY 字体名 DouyinSans -> DouyinSansBold
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user