R524809
571 lines
17 KiB
TypeScript
571 lines
17 KiB
TypeScript
import { PAPER_SIZE } from '../../constants/colors';
|
||
import { getImage } from '../../utils/index';
|
||
import drawHeader from './drawHeader';
|
||
|
||
/**
|
||
* 基础绘制服务
|
||
* 包含Paper设置和Header绘制功能，可被所有绘制服务复用
|
||
*
|
||
* 提供功能：
|
||
* - Canvas 初始化和配置
|
||
* - Paper 尺寸设置（支持 A4 等标准尺寸）
|
||
* - Header 绘制（统一打印纸页眉）
|
||
* - 分割线绘制
|
||
* - 打印配置管理
|
||
*/
|
||
const LINE_COLOR = '#BCBAB2'; // 打印友好的深灰线色，避免渐变色
|
||
const LINE_WIDTH = 3;
|
||
|
||
export class BaseDrawService {
|
||
canvas: WechatMiniprogram.Canvas;
|
||
ctx: RenderingContext;
|
||
options: Record<string, any>;
|
||
paperSize: PaperSize;
|
||
currentX: number;
|
||
currentY: number;
|
||
canvasWidth: number; // 逻辑像素宽度
|
||
canvasHeight: number; // 逻辑像素高度
|
||
/** 紧跟在 drawHeader 之后的第一次 drawDivider 不画线（页眉已含底部分割线） */
|
||
private _suppressNextDividerLine = false;
|
||
|
||
constructor(
|
||
canvas: Canvas,
|
||
ctx: RenderingContext,
|
||
options?: Record<string, any>,
|
||
) {
|
||
options = options || {};
|
||
const { appName, appHint } = getApp().getPrintConfig();
|
||
this.canvas = canvas;
|
||
this.ctx = ctx;
|
||
this.paperSize = 'A4';
|
||
this.options = {
|
||
appName,
|
||
appHint,
|
||
title: '看数字，涂一涂',
|
||
...options,
|
||
};
|
||
this.currentX = 0;
|
||
this.currentY = 0;
|
||
this.canvasWidth = 0;
|
||
this.canvasHeight = 0;
|
||
this._suppressNextDividerLine = false;
|
||
this.setPrintConfig();
|
||
}
|
||
|
||
setPrintConfig() {
|
||
const printConfig = getApp().getPrintConfig();
|
||
this.options.appName = printConfig.appName;
|
||
}
|
||
|
||
/**
|
||
* 设置Paper（逻辑像素，尺寸除以3）
|
||
*/
|
||
setPaper() {
|
||
const { ctx, canvas } = this;
|
||
const { pixelRatio: dpr } = wx.getWindowInfo();
|
||
let { width, height } = PAPER_SIZE[this.paperSize];
|
||
|
||
this.canvasWidth = width;
|
||
this.canvasHeight = height;
|
||
|
||
// 设置 canvas 为物理像素尺寸（用于高分辨率显示）
|
||
const physicalWidth = width * dpr;
|
||
const physicalHeight = height * dpr;
|
||
canvas.width = physicalWidth;
|
||
canvas.height = physicalHeight;
|
||
|
||
// 重置 transform 并 scale 到逻辑像素
|
||
ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置 transform
|
||
ctx.scale(dpr, dpr); // scale 到逻辑像素，后续绘制都使用逻辑像素
|
||
|
||
this.clear();
|
||
ctx.fillStyle = '#fff';
|
||
// 使用逻辑像素尺寸填充
|
||
ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
|
||
}
|
||
|
||
/**
|
||
* 清除画布
|
||
*/
|
||
clear() {
|
||
const canvas = this.canvas;
|
||
this.ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
}
|
||
|
||
/**
|
||
* 绘制Header（逻辑像素，尺寸除以3）
|
||
*/
|
||
async drawHeader() {
|
||
this.currentX = 24;
|
||
this.currentY = 14;
|
||
await drawHeader({
|
||
canvas: this.canvas,
|
||
ctx: this.ctx,
|
||
canvasWidth: this.canvasWidth,
|
||
options: {
|
||
title: this.options.title || '看数字，涂一涂',
|
||
},
|
||
onHeaderDrawn: (currentY: number) => {
|
||
this.currentY = currentY;
|
||
this._suppressNextDividerLine = true;
|
||
},
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 页脚：顶部分割线 + 居中 `doodle-footer.png`（小鸭与「涂鸦丫」品牌图）。
|
||
* 图片底边与纸张底边留白对齐，便于「探头」视觉。请在整页正文绘制完成后调用，避免被内容覆盖。
|
||
*/
|
||
async drawPrintFooter(): Promise<void> {
|
||
const { ctx, canvasWidth, canvasHeight } = this;
|
||
const margin = 24;
|
||
const bottomMargin = 2;
|
||
const lineGapAboveImg = 10;
|
||
const maxImgW = canvasWidth - margin * 2;
|
||
const maxImgH = 40;
|
||
|
||
let dw = maxImgW;
|
||
let dh = maxImgH;
|
||
|
||
try {
|
||
const image = (await getImage(
|
||
this.canvas,
|
||
'/assets/imgs/doodle-footer.png',
|
||
)) as WechatMiniprogram.Image;
|
||
const nw = image.width || 2;
|
||
const nh = image.height || 1;
|
||
const aspect = nw / nh;
|
||
dh = Math.min(maxImgH, maxImgW / aspect);
|
||
dw = dh * aspect;
|
||
if (dw > maxImgW) {
|
||
dw = maxImgW;
|
||
dh = dw / aspect;
|
||
}
|
||
|
||
const imgX = (canvasWidth - dw) / 2;
|
||
const imgY = canvasHeight - bottomMargin - dh;
|
||
const lineY = imgY - lineGapAboveImg;
|
||
|
||
ctx.save();
|
||
ctx.strokeStyle = LINE_COLOR;
|
||
ctx.lineWidth = LINE_WIDTH;
|
||
ctx.lineCap = 'round';
|
||
ctx.beginPath();
|
||
ctx.moveTo(margin, lineY);
|
||
ctx.lineTo(canvasWidth - margin, lineY);
|
||
ctx.stroke();
|
||
ctx.restore();
|
||
|
||
ctx.drawImage(image, imgX, imgY, dw, dh);
|
||
} catch {
|
||
const lineY =
|
||
canvasHeight - bottomMargin - maxImgH - lineGapAboveImg;
|
||
ctx.save();
|
||
ctx.strokeStyle = LINE_COLOR;
|
||
ctx.lineWidth = LINE_WIDTH;
|
||
ctx.lineCap = 'round';
|
||
ctx.beginPath();
|
||
ctx.moveTo(margin, lineY);
|
||
ctx.lineTo(canvasWidth - margin, lineY);
|
||
ctx.stroke();
|
||
ctx.restore();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 绘制分割线（逻辑像素，尺寸除以3）
|
||
*/
|
||
drawDivider() {
|
||
if (this._suppressNextDividerLine) {
|
||
this._suppressNextDividerLine = false;
|
||
return;
|
||
}
|
||
|
||
const { ctx, canvasWidth } = this;
|
||
const dividerY = this.currentY;
|
||
|
||
ctx.strokeStyle = LINE_COLOR;
|
||
ctx.lineWidth = 1;
|
||
ctx.beginPath();
|
||
ctx.moveTo(24, dividerY);
|
||
ctx.lineTo(canvasWidth - 24, dividerY);
|
||
ctx.stroke();
|
||
|
||
this.currentY = dividerY + 10; // 分割线下方10px间距
|
||
}
|
||
|
||
/**
|
||
* 绘制虚线分割线（逻辑像素，尺寸除以3）
|
||
* @param y 分割线的Y坐标
|
||
* @param margin 左右边距，默认为40
|
||
* @param color 线条颜色，默认为'#999'
|
||
* @param lineWidth 线条宽度，默认为1
|
||
*/
|
||
drawDashedDivider(
|
||
y: number,
|
||
margin: number = 40,
|
||
color: string = '#999',
|
||
lineWidth: number = 1,
|
||
) {
|
||
const { ctx, canvasWidth } = this;
|
||
|
||
ctx.strokeStyle = color;
|
||
ctx.lineWidth = lineWidth;
|
||
ctx.setLineDash([4, 4]); // 虚线
|
||
ctx.beginPath();
|
||
ctx.moveTo(margin, y);
|
||
ctx.lineTo(canvasWidth - margin, y);
|
||
ctx.stroke();
|
||
ctx.setLineDash([]); // 重置为实线
|
||
}
|
||
|
||
/**
|
||
* 绘制线条（逻辑像素，尺寸除以3）
|
||
* @param x1 起点X坐标
|
||
* @param y1 起点Y坐标
|
||
* @param x2 终点X坐标
|
||
* @param y2 终点Y坐标
|
||
* @param options 可选参数
|
||
* @param options.isDashed 是否为虚线，默认为true（虚线）
|
||
* @param options.dashPattern 虚线模式，默认为[4, 4]
|
||
* @param options.color 线条颜色，默认为'#999'
|
||
* @param options.lineWidth 线条宽度，默认为1
|
||
*/
|
||
drawLine(
|
||
x1: number,
|
||
y1: number,
|
||
x2: number,
|
||
y2: number,
|
||
options?: {
|
||
isDashed?: boolean;
|
||
dashPattern?: number[];
|
||
color?: string;
|
||
lineWidth?: number;
|
||
},
|
||
): void {
|
||
const { ctx } = this;
|
||
const {
|
||
isDashed = true,
|
||
dashPattern = [4, 4],
|
||
color = '#999',
|
||
lineWidth = 1,
|
||
} = options || {};
|
||
|
||
ctx.strokeStyle = color;
|
||
ctx.lineWidth = lineWidth;
|
||
|
||
// 设置虚线或实线
|
||
if (isDashed) {
|
||
ctx.setLineDash(dashPattern);
|
||
} else {
|
||
ctx.setLineDash([]);
|
||
}
|
||
|
||
// 绘制线条
|
||
ctx.beginPath();
|
||
ctx.moveTo(x1, y1);
|
||
ctx.lineTo(x2, y2);
|
||
ctx.stroke();
|
||
|
||
// 重置为实线（避免影响后续绘制）
|
||
ctx.setLineDash([]);
|
||
}
|
||
|
||
/**
|
||
* 绘制网格线（逻辑像素，尺寸除以3）
|
||
* @param gridStartX 网格起始X坐标
|
||
* @param gridStartY 网格起始Y坐标
|
||
* @param cellWidth 每个格子的宽度
|
||
* @param cellHeight 每个格子的高度
|
||
* @param cols 列数
|
||
* @param rows 行数
|
||
*/
|
||
drawGridLines(
|
||
gridStartX: number,
|
||
gridStartY: number,
|
||
cellWidth: number,
|
||
cellHeight: number,
|
||
cols: number,
|
||
rows: number,
|
||
): void {
|
||
const { ctx } = this;
|
||
|
||
// 在函数内部计算网格总宽度和高度
|
||
const gridWidth = cellWidth * cols;
|
||
const gridHeight = cellHeight * rows;
|
||
|
||
ctx.strokeStyle = '#000';
|
||
ctx.lineWidth = 1;
|
||
ctx.setLineDash([]); // 实线
|
||
|
||
// 绘制垂直线
|
||
for (let i = 0; i <= cols; i++) {
|
||
const x = gridStartX + i * cellWidth;
|
||
ctx.beginPath();
|
||
ctx.moveTo(x, gridStartY);
|
||
ctx.lineTo(x, gridStartY + gridHeight);
|
||
ctx.stroke();
|
||
}
|
||
|
||
// 绘制水平线
|
||
for (let i = 0; i <= rows; i++) {
|
||
const y = gridStartY + i * cellHeight;
|
||
ctx.beginPath();
|
||
ctx.moveTo(gridStartX, y);
|
||
ctx.lineTo(gridStartX + gridWidth, y);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 绘制圆角矩形框（逻辑像素，尺寸除以3）
|
||
* @param x 框的X坐标
|
||
* @param y 框的Y坐标
|
||
* @param width 框的宽度
|
||
* @param height 框的高度
|
||
* @param options 可选参数
|
||
* @param options.isDashed 是否为虚线，默认为false（实线）
|
||
* @param options.radius 圆角半径，默认为10
|
||
* @param options.color 线条颜色，默认为'#000'
|
||
* @param options.lineWidth 线条宽度，默认为1
|
||
*/
|
||
drawRoundedRect(
|
||
x: number,
|
||
y: number,
|
||
width: number,
|
||
height: number,
|
||
options?: {
|
||
isDashed?: boolean;
|
||
radius?: number;
|
||
color?: string;
|
||
lineWidth?: number;
|
||
},
|
||
): void {
|
||
const { ctx } = this;
|
||
const {
|
||
isDashed = false,
|
||
radius = 10,
|
||
color = '#000',
|
||
lineWidth = 1,
|
||
} = options || {};
|
||
|
||
ctx.strokeStyle = color;
|
||
ctx.lineWidth = lineWidth;
|
||
|
||
// 设置虚线或实线
|
||
if (isDashed) {
|
||
ctx.setLineDash([4, 4]); // 虚线
|
||
} else {
|
||
ctx.setLineDash([]); // 实线
|
||
}
|
||
|
||
// 绘制圆角矩形
|
||
ctx.beginPath();
|
||
ctx.moveTo(x + radius, y);
|
||
ctx.lineTo(x + width - radius, y);
|
||
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
||
ctx.lineTo(x + width, y + height - radius);
|
||
ctx.quadraticCurveTo(
|
||
x + width,
|
||
y + height,
|
||
x + width - radius,
|
||
y + height,
|
||
);
|
||
ctx.lineTo(x + radius, y + height);
|
||
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
||
ctx.lineTo(x, y + radius);
|
||
ctx.quadraticCurveTo(x, y, x + radius, y);
|
||
ctx.closePath();
|
||
ctx.stroke();
|
||
|
||
// 重置为实线（避免影响后续绘制）
|
||
ctx.setLineDash([]);
|
||
}
|
||
|
||
/**
|
||
* 绘制符号（使用路径绘制）
|
||
* @param x 符号中心X坐标
|
||
* @param y 符号中心Y坐标
|
||
* @param symbol 符号类型：'+', '-', '=', '×', '✓'
|
||
* @param size 符号大小
|
||
*/
|
||
drawSymbol(x: number, y: number, symbol: string, size: number): void {
|
||
const { ctx } = this;
|
||
ctx.save();
|
||
ctx.translate(x, y);
|
||
|
||
const lineWidth = size * 0.15; // 线条宽度
|
||
const halfSize = size / 2;
|
||
const strokeLength = halfSize * 0.7; // 线条长度
|
||
|
||
ctx.strokeStyle = '#000';
|
||
ctx.lineWidth = lineWidth;
|
||
ctx.lineCap = 'round';
|
||
ctx.lineJoin = 'round';
|
||
|
||
switch (symbol) {
|
||
case '+':
|
||
// 加号：横线和竖线
|
||
ctx.beginPath();
|
||
// 横线
|
||
ctx.moveTo(-strokeLength, 0);
|
||
ctx.lineTo(strokeLength, 0);
|
||
// 竖线
|
||
ctx.moveTo(0, -strokeLength);
|
||
ctx.lineTo(0, strokeLength);
|
||
ctx.stroke();
|
||
break;
|
||
|
||
case '-':
|
||
// 减号：横线
|
||
ctx.beginPath();
|
||
ctx.moveTo(-strokeLength, 0);
|
||
ctx.lineTo(strokeLength, 0);
|
||
ctx.stroke();
|
||
break;
|
||
|
||
case '=':
|
||
// 等号：两条横线
|
||
const equalsSpacing = size * 0.15; // 两条线之间的间距
|
||
ctx.beginPath();
|
||
// 上横线
|
||
ctx.moveTo(-strokeLength, -equalsSpacing);
|
||
ctx.lineTo(strokeLength, -equalsSpacing);
|
||
// 下横线
|
||
ctx.moveTo(-strokeLength, equalsSpacing);
|
||
ctx.lineTo(strokeLength, equalsSpacing);
|
||
ctx.stroke();
|
||
break;
|
||
|
||
case '×':
|
||
// 乘号：两条斜线
|
||
ctx.beginPath();
|
||
// 左上到右下
|
||
ctx.moveTo(-strokeLength * 0.7, -strokeLength * 0.7);
|
||
ctx.lineTo(strokeLength * 0.7, strokeLength * 0.7);
|
||
// 右上到左下
|
||
ctx.moveTo(strokeLength * 0.7, -strokeLength * 0.7);
|
||
ctx.lineTo(-strokeLength * 0.7, strokeLength * 0.7);
|
||
ctx.stroke();
|
||
break;
|
||
|
||
case '✓':
|
||
// 对号：勾，整体更大，右侧的线更长
|
||
const checkScale = 1.2; // 对号整体放大1.2倍
|
||
ctx.beginPath();
|
||
const checkStartX = -strokeLength * 0.5 * checkScale;
|
||
const checkStartY = -strokeLength * 0.2 * checkScale;
|
||
const checkMidX = -strokeLength * 0.1 * checkScale;
|
||
const checkMidY = strokeLength * 0.3 * checkScale;
|
||
const checkEndX = strokeLength * 1.0 * checkScale; // 增加右侧长度
|
||
const checkEndY = -strokeLength * 0.4 * checkScale; // 稍微向上调整
|
||
ctx.moveTo(checkStartX, checkStartY);
|
||
ctx.lineTo(checkMidX, checkMidY);
|
||
ctx.lineTo(checkEndX, checkEndY);
|
||
ctx.stroke();
|
||
break;
|
||
|
||
default:
|
||
// 默认绘制加号
|
||
ctx.beginPath();
|
||
ctx.moveTo(-strokeLength, 0);
|
||
ctx.lineTo(strokeLength, 0);
|
||
ctx.moveTo(0, -strokeLength);
|
||
ctx.lineTo(0, strokeLength);
|
||
ctx.stroke();
|
||
}
|
||
|
||
ctx.restore();
|
||
}
|
||
|
||
/**
|
||
* 绘制圆点
|
||
* @param ctx 绘制上下文
|
||
* @param x 圆点中心X坐标
|
||
* @param y 圆点中心Y坐标
|
||
* @param radius 圆点半径
|
||
* @param fillColor 填充颜色，默认为 '#93D333'
|
||
* @param strokeColor 边线颜色，如果传入则绘制边线，宽度为1，默认不绘制
|
||
*/
|
||
drawDot(
|
||
ctx: RenderingContext,
|
||
x: number,
|
||
y: number,
|
||
radius: number,
|
||
fillColor?: string,
|
||
strokeColor?: string,
|
||
) {
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
||
|
||
// 绘制填充
|
||
ctx.fillStyle = fillColor ?? '#93D333';
|
||
ctx.fill();
|
||
|
||
// 绘制边线（如果提供了边线颜色）
|
||
if (strokeColor) {
|
||
ctx.strokeStyle = strokeColor;
|
||
ctx.lineWidth = 1;
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 准备绘制（公共初始化逻辑）
|
||
* 执行：setPrintConfig -> clear -> setPaper
|
||
* 子类可以在调用此方法前后执行自定义逻辑（如数据验证、异步资源加载等）
|
||
*/
|
||
prepareDraw() {
|
||
this.setPrintConfig();
|
||
this.clear();
|
||
this.setPaper();
|
||
}
|
||
|
||
/**
|
||
* 绘制统一页眉；紧随其后的 drawDivider 会跳过首条分割线（页眉已含底部灰线）。
|
||
*/
|
||
async drawHeaderAndDivider() {
|
||
await this.drawHeader();
|
||
this.drawDivider();
|
||
}
|
||
|
||
/**
|
||
* 绘制空白方框（边框1px，#999，无填充，不显示数字）
|
||
*/
|
||
drawBox(
|
||
ctx: RenderingContext,
|
||
x: number,
|
||
y: number,
|
||
width: number,
|
||
height: number,
|
||
color: string = '#999',
|
||
lineWidth: number = 1,
|
||
) {
|
||
// 绘制方框边框（1px，#999，无填充）
|
||
ctx.strokeStyle = color;
|
||
ctx.lineWidth = lineWidth;
|
||
ctx.setLineDash([]);
|
||
ctx.strokeRect(x, y, width, height);
|
||
}
|
||
|
||
/**
|
||
* 绘制正方形方框（调用drawBox，减少参数）
|
||
* @param ctx 渲染上下文
|
||
* @param x 方框左上角x
|
||
* @param y 方框左上角y
|
||
* @param size 方框边长
|
||
* @param color 边框颜色（可选，默认为#999）
|
||
* @param lineWidth 线宽（可选，默认为1）
|
||
*/
|
||
drawSquareBox(
|
||
ctx: RenderingContext,
|
||
x: number,
|
||
y: number,
|
||
size: number,
|
||
color: string = '#999',
|
||
lineWidth: number = 1,
|
||
) {
|
||
this.drawBox(ctx, x, y, size, size, color, lineWidth);
|
||
}
|
||
}
|