R524809
130 lines
3.3 KiB
TypeScript
130 lines
3.3 KiB
TypeScript
import { getMiniCodeImage, getImage } from '../../utils/index';
|
||
|
||
/**
|
||
* 绘制数学模块页眉的参数接口（尺寸除以3）
|
||
*/
|
||
interface drawBaseHeaderParams {
|
||
canvas: WechatMiniprogram.Canvas;
|
||
ctx: RenderingContext;
|
||
headerType: PrintHeader;
|
||
options: {
|
||
appName: string;
|
||
appHint: string;
|
||
title: string;
|
||
subTitle: string;
|
||
};
|
||
onHeaderDrawn?: (currentY: number) => void;
|
||
}
|
||
|
||
/**
|
||
* 绘制数学模块完整页眉（尺寸除以3）
|
||
*/
|
||
export async function drawBaseHeader({
|
||
canvas,
|
||
ctx,
|
||
headerType,
|
||
options,
|
||
onHeaderDrawn,
|
||
}: drawBaseHeaderParams): Promise<void> {
|
||
const { appName, appHint, title, subTitle } = options;
|
||
|
||
let titleX = 108; // 约109.33
|
||
const titleY = 25; // 约26.67
|
||
|
||
const logoX = 24; // 约26.67
|
||
const logoY = 20; // 20
|
||
const logoWidth = 65; // 约66.67
|
||
const logoHeight = 65; // 约66.67
|
||
|
||
// 根据 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 = 40;
|
||
break;
|
||
}
|
||
case 'minimal': {
|
||
titleX = 40;
|
||
break;
|
||
}
|
||
default: {
|
||
const image = await getMiniCodeImage(canvas);
|
||
ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 绘制应用名称（字体大小除以3）
|
||
ctx.font = 'bold 22px "Microsoft Yahei"';
|
||
ctx.fillStyle = '#000';
|
||
ctx.textAlign = 'left';
|
||
ctx.textBaseline = 'top';
|
||
ctx.fillText(appName, titleX, titleY);
|
||
|
||
// 绘制应用提示（字体大小除以3）
|
||
ctx.font = '16px "Microsoft Yahei"';
|
||
ctx.fillStyle = '#666';
|
||
ctx.fillText(appHint, titleX, 66);
|
||
|
||
// 绘制标题（字体大小除以3）
|
||
ctx.font = 'bold 22px "Microsoft Yahei"';
|
||
ctx.fillStyle = '#000';
|
||
ctx.fillText(title, 280, titleY);
|
||
|
||
// 绘制副标题（字体大小除以3）
|
||
ctx.font = '16px "Microsoft Yahei"';
|
||
ctx.fillStyle = '#666';
|
||
ctx.fillText(subTitle, 280, 66);
|
||
|
||
// 调用回调函数
|
||
if (onHeaderDrawn) {
|
||
onHeaderDrawn(104);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 绘制数学模块迷你页眉的参数接口（尺寸除以3）
|
||
*/
|
||
interface drawBaseMiniHeaderParams {
|
||
// canvas: WechatMiniprogram.Canvas;
|
||
ctx: RenderingContext;
|
||
options: {
|
||
appName: string;
|
||
title: string;
|
||
};
|
||
canvasWidth: number; // 逻辑像素宽度（已除以3）
|
||
onHeaderDrawn?: (currentY: number) => void;
|
||
}
|
||
|
||
/**
|
||
* 绘制数学模块迷你页眉（尺寸除以3）
|
||
*/
|
||
export function drawBaseMiniHeader({
|
||
ctx,
|
||
options,
|
||
canvasWidth,
|
||
onHeaderDrawn,
|
||
}: drawBaseMiniHeaderParams): void {
|
||
const { appName, title } = options;
|
||
const titleY = 46;
|
||
const centerX = canvasWidth / 2;
|
||
|
||
// 字体大小除以3
|
||
ctx.font = 'bold 24px "Microsoft Yahei"'; // 64/3
|
||
ctx.fillStyle = '#000';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText(appName + ' ' + title, centerX, titleY);
|
||
|
||
// 调用回调函数，传递除以3后的currentY
|
||
if (onHeaderDrawn) {
|
||
onHeaderDrawn(60); // 约66.67
|
||
}
|
||
}
|