R524809
127 lines
3.2 KiB
TypeScript
127 lines
3.2 KiB
TypeScript
import { getMiniCodeImage, getImage } from '../utils/index';
|
|
|
|
/**
|
|
* 绘制页眉的参数接口
|
|
*/
|
|
interface DrawHeaderParams {
|
|
canvas: WechatMiniprogram.Canvas;
|
|
ctx: RenderingContext;
|
|
headerType: PrintHeader;
|
|
options: {
|
|
appName: string;
|
|
appHint: string;
|
|
title: string;
|
|
subTitle: string;
|
|
};
|
|
onHeaderDrawn?: (currentY: number) => void; // 绘制完成后的回调，用于设置 currentY 和绘制分割线
|
|
}
|
|
|
|
/**
|
|
* 绘制完整页眉（包含 Logo、应用名称、提示、标题、副标题）
|
|
*/
|
|
export async function drawHeader({
|
|
canvas,
|
|
ctx,
|
|
headerType,
|
|
options,
|
|
onHeaderDrawn,
|
|
}: DrawHeaderParams): Promise<void> {
|
|
const { appName, appHint, title, subTitle } = options;
|
|
|
|
let titleX = 80 + 200 + 48; // currentX + logoWidth + spacing
|
|
const titleY = 80;
|
|
|
|
const logoX = 80;
|
|
const logoY = 60;
|
|
const logoWidth = 200;
|
|
const logoHeight = 200;
|
|
|
|
// 根据 headerType 绘制 Logo 或调整标题位置
|
|
switch (headerType) {
|
|
case 'LogoImage': {
|
|
const image = await getImage(
|
|
canvas,
|
|
'/assets/imgs/doodle-logo.png',
|
|
);
|
|
ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
|
|
break;
|
|
}
|
|
case 'noLogoImage': {
|
|
titleX = 120;
|
|
break;
|
|
}
|
|
case 'minimal': {
|
|
titleX = 120;
|
|
break;
|
|
}
|
|
default: {
|
|
const image = await getMiniCodeImage(canvas);
|
|
ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// 绘制应用名称
|
|
ctx.font = 'bold 64px "Microsoft Yahei"';
|
|
ctx.fillStyle = '#000';
|
|
ctx.textAlign = 'left';
|
|
ctx.textBaseline = 'top';
|
|
ctx.fillText(appName, titleX, titleY);
|
|
|
|
// 绘制应用提示
|
|
ctx.font = '48px "Microsoft Yahei"';
|
|
ctx.fillStyle = '#666';
|
|
ctx.fillText(appHint, titleX, 186);
|
|
|
|
// 绘制标题
|
|
ctx.font = 'bold 64px "Microsoft Yahei"';
|
|
ctx.fillStyle = '#000';
|
|
ctx.fillText(title, 1015, titleY);
|
|
|
|
// 绘制副标题
|
|
ctx.font = '48px "Microsoft Yahei"';
|
|
ctx.fillStyle = '#666';
|
|
ctx.fillText(subTitle, 1015, 186);
|
|
|
|
// 调用回调函数，让调用者设置 currentY 并绘制分割线
|
|
if (onHeaderDrawn) {
|
|
onHeaderDrawn(304);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 绘制迷你页眉的参数接口
|
|
*/
|
|
interface DrawMiniHeaderParams {
|
|
canvas: WechatMiniprogram.Canvas;
|
|
ctx: RenderingContext;
|
|
options: {
|
|
appName: string;
|
|
title: string;
|
|
};
|
|
onHeaderDrawn?: (currentY: number) => void; // 绘制完成后的回调，用于设置 currentY 和绘制分割线
|
|
}
|
|
|
|
/**
|
|
* 绘制迷你页眉（仅包含应用名称和标题，居中显示）
|
|
*/
|
|
export function drawMiniHeader({
|
|
canvas,
|
|
ctx,
|
|
options,
|
|
onHeaderDrawn,
|
|
}: DrawMiniHeaderParams): void {
|
|
const { appName, title } = options;
|
|
const titleY = 120;
|
|
|
|
ctx.font = 'bold 64px "Microsoft Yahei"';
|
|
ctx.fillStyle = '#000';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(appName + ' ' + title, canvas.width / 2, titleY);
|
|
|
|
// 调用回调函数，让调用者设置 currentY 并绘制分割线
|
|
if (onHeaderDrawn) {
|
|
onHeaderDrawn(200);
|
|
}
|
|
}
|