R524809
606 lines
18 KiB
TypeScript
606 lines
18 KiB
TypeScript
/**
|
||
* 田字格练字服务
|
||
* 根据汉字列表绘制到Canvas
|
||
*
|
||
* 支持的汉字类型：
|
||
* - character：汉字
|
||
* - number：数字
|
||
* - letter：字母
|
||
* - symbol：符号
|
||
*/
|
||
import { BaseDrawService } from '../core/draw/baseDraw';
|
||
import { CharacterItem } from '../types/characterType';
|
||
|
||
/**
|
||
* cnchar-data 坐标系配置
|
||
* 参考 hanzi-writer 的实现逻辑
|
||
* 字符数据的边界框：左上角 (0, -124)，右下角 (1024, 900)
|
||
*/
|
||
const CHAR_BOUNDS = {
|
||
minX: 0,
|
||
minY: -124,
|
||
maxX: 1024,
|
||
maxY: 900,
|
||
};
|
||
const CHAR_WIDTH = CHAR_BOUNDS.maxX - CHAR_BOUNDS.minX; // 1024
|
||
const CHAR_HEIGHT = CHAR_BOUNDS.maxY - CHAR_BOUNDS.minY; // 1024
|
||
|
||
/**
|
||
* 计算缩放变换参数（模仿 cnchar.draw 的 getScalingTransform 函数）
|
||
* 用于将 1024x1024 坐标系的字符数据变换到目标画布尺寸
|
||
*/
|
||
interface ScalingTransform {
|
||
xOffset: number;
|
||
yOffset: number;
|
||
scale: number;
|
||
}
|
||
|
||
function getScalingTransform(
|
||
width: number,
|
||
height: number,
|
||
padding: number,
|
||
): ScalingTransform {
|
||
// 计算可用空间
|
||
const availableWidth = width - 2 * padding;
|
||
const availableHeight = height - 2 * padding;
|
||
|
||
// 计算缩放比例（取较小的比例以确保字符完整显示）
|
||
const scaleX = availableWidth / CHAR_WIDTH;
|
||
const scaleY = availableHeight / CHAR_HEIGHT;
|
||
const scale = Math.min(scaleX, scaleY);
|
||
|
||
// 计算偏移量（居中显示）
|
||
const scaledWidth = CHAR_WIDTH * scale;
|
||
const scaledHeight = CHAR_HEIGHT * scale;
|
||
const centerX = padding + (availableWidth - scaledWidth) / 2;
|
||
const centerY = padding + (availableHeight - scaledHeight) / 2;
|
||
|
||
// 计算 xOffset 和 yOffset（考虑字符边界框的偏移）
|
||
const xOffset = -CHAR_BOUNDS.minX * scale + centerX;
|
||
const yOffset = -CHAR_BOUNDS.minY * scale + centerY;
|
||
|
||
return { xOffset, yOffset, scale };
|
||
}
|
||
|
||
/**
|
||
* SVG 路径解析与绘制（支持 M/L/Q/Z 命令）
|
||
* 参考 cnchar.draw 的实现，使用 Canvas transform 进行坐标变换
|
||
*/
|
||
interface DrawSvgPathParams {
|
||
ctx: RenderingContext;
|
||
pathD: string;
|
||
}
|
||
|
||
function drawSvgPath({ ctx, pathD }: DrawSvgPathParams) {
|
||
// 使用正则表达式匹配 SVG 路径命令
|
||
// 支持 M（moveTo）、L（lineTo）、Q（二次贝塞尔曲线）、Z（closePath）
|
||
const commandRegex = /([MLQZ])([^MLQZ]*?)(?=[MLQZ]|$)/gi;
|
||
const commands: Array<{ cmd: string; coords: string }> = [];
|
||
|
||
let match;
|
||
while ((match = commandRegex.exec(pathD)) !== null) {
|
||
const cmd = match[1].toUpperCase();
|
||
const coords = match[2].trim();
|
||
commands.push({ cmd, coords });
|
||
}
|
||
|
||
// 解析坐标的辅助函数
|
||
const parseCoords = (coords: string): number[] => {
|
||
return coords
|
||
.split(/[\s,]+/)
|
||
.filter((part) => part.trim() !== '')
|
||
.map((part) => parseFloat(part));
|
||
};
|
||
|
||
for (const { cmd, coords } of commands) {
|
||
const coordValues = parseCoords(coords);
|
||
|
||
switch (cmd) {
|
||
case 'M':
|
||
if (coordValues.length >= 2) {
|
||
ctx.moveTo(coordValues[0], coordValues[1]);
|
||
}
|
||
break;
|
||
case 'L':
|
||
if (coordValues.length >= 2) {
|
||
ctx.lineTo(coordValues[0], coordValues[1]);
|
||
}
|
||
break;
|
||
case 'Q':
|
||
// 二次贝塞尔曲线：Q cpx cpy x y
|
||
if (coordValues.length >= 4) {
|
||
ctx.quadraticCurveTo(
|
||
coordValues[0],
|
||
coordValues[1],
|
||
coordValues[2],
|
||
coordValues[3],
|
||
);
|
||
}
|
||
break;
|
||
case 'Z':
|
||
ctx.closePath();
|
||
break;
|
||
default:
|
||
console.warn(`未知的 SVG 路径命令: ${cmd}`);
|
||
}
|
||
}
|
||
}
|
||
|
||
interface DrawStrokesParams {
|
||
ctx: RenderingContext;
|
||
strokes: string[];
|
||
offsetX: number;
|
||
offsetY: number;
|
||
size: number;
|
||
uptoInclusive: number;
|
||
fillStyle: string;
|
||
strokeStyle: string;
|
||
lineWidth: number;
|
||
}
|
||
|
||
/**
|
||
* 绘制笔画（参考 cnchar.draw 的实现方式）
|
||
* 使用 Canvas transform 进行坐标变换，支持 1024x1024 坐标系
|
||
*/
|
||
function drawStrokes({
|
||
ctx,
|
||
strokes,
|
||
offsetX,
|
||
offsetY,
|
||
size,
|
||
uptoInclusive,
|
||
fillStyle,
|
||
strokeStyle: _strokeStyle, // 保留接口兼容性，cnchar 模式只使用 fill
|
||
lineWidth: _lineWidth, // 保留接口兼容性，cnchar 模式只使用 fill
|
||
}: DrawStrokesParams) {
|
||
// 抑制未使用变量警告
|
||
void _strokeStyle;
|
||
void _lineWidth;
|
||
// 设置 Canvas 绘制质量
|
||
ctx.imageSmoothingEnabled = true;
|
||
ctx.imageSmoothingQuality = 'high';
|
||
|
||
// 设置路径绘制属性
|
||
ctx.lineCap = 'round';
|
||
ctx.lineJoin = 'round';
|
||
ctx.miterLimit = 10;
|
||
|
||
// 添加内边距：在田字格四周预留空间，避免笔画贴边
|
||
const padding = size * 0.1;
|
||
|
||
// 计算缩放变换参数（参考 cnchar.draw 的 getScalingTransform）
|
||
const transform = getScalingTransform(size, size, padding);
|
||
|
||
for (let s = 0; s <= uptoInclusive && s < strokes.length; s++) {
|
||
ctx.save();
|
||
|
||
// 应用变换矩阵（参考 cnchar.draw 的方式）
|
||
// 1. 先平移到目标位置
|
||
// 2. 再应用 Y 轴翻转和缩放
|
||
// transform: translate(xOffset, height - yOffset) scale(scale, -scale)
|
||
ctx.translate(
|
||
offsetX + transform.xOffset,
|
||
offsetY + size - transform.yOffset,
|
||
);
|
||
ctx.scale(transform.scale, -transform.scale);
|
||
|
||
// 绘制路径
|
||
ctx.beginPath();
|
||
drawSvgPath({ ctx, pathD: strokes[s] });
|
||
|
||
// 使用 fill 绘制（cnchar 只使用 fill）
|
||
ctx.fillStyle = fillStyle;
|
||
ctx.fill();
|
||
|
||
ctx.restore();
|
||
}
|
||
}
|
||
|
||
interface DrawTianZiGridParams {
|
||
ctx: RenderingContext;
|
||
x: number;
|
||
y: number;
|
||
size: number;
|
||
lineColor?: string;
|
||
boldColor?: string;
|
||
}
|
||
|
||
function drawTianZiGrid({
|
||
ctx,
|
||
x,
|
||
y,
|
||
size,
|
||
lineColor = '#a8d5a8', // 浅绿色（中线）
|
||
boldColor = '#7fb069', // 中等绿色（外框）
|
||
}: DrawTianZiGridParams) {
|
||
// 外框（逻辑像素）- 使用中等绿色，清晰可见
|
||
ctx.strokeStyle = boldColor;
|
||
ctx.lineWidth = 1; // 2/3≈1，逻辑像素
|
||
ctx.strokeRect(x - size / 2, y - size / 2, size, size);
|
||
|
||
// 中线（逻辑像素）- 使用浅绿色，柔和护眼
|
||
ctx.strokeStyle = lineColor;
|
||
ctx.lineWidth = 1; // 逻辑像素
|
||
ctx.beginPath();
|
||
// 竖线
|
||
ctx.moveTo(x, y - size / 2);
|
||
ctx.lineTo(x, y + size / 2);
|
||
// 横线
|
||
ctx.moveTo(x - size / 2, y);
|
||
ctx.lineTo(x + size / 2, y);
|
||
ctx.stroke();
|
||
ctx.closePath();
|
||
|
||
// 对角线（淡绿色，逻辑像素）- 使用很淡的绿色，提供辅助参考线
|
||
ctx.strokeStyle = '#d4f0d4'; // 很淡的绿色
|
||
ctx.lineWidth = 1;
|
||
ctx.beginPath();
|
||
ctx.moveTo(x - size / 2, y - size / 2);
|
||
ctx.lineTo(x + size / 2, y + size / 2);
|
||
ctx.moveTo(x + size / 2, y - size / 2);
|
||
ctx.lineTo(x - size / 2, y + size / 2);
|
||
ctx.stroke();
|
||
ctx.closePath();
|
||
}
|
||
|
||
class WordDrawService extends BaseDrawService {
|
||
constructor(
|
||
canvas: Canvas,
|
||
ctx: RenderingContext,
|
||
options?: Record<string, any>,
|
||
) {
|
||
options = options || {};
|
||
super(canvas, ctx, {
|
||
title: '田字格 练 字 贴',
|
||
subTitle: '按笔画临摹练习',
|
||
...options,
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 绘制页眉和基础布局
|
||
*/
|
||
async drawLayout() {
|
||
this.setPrintConfig();
|
||
this.clear();
|
||
this.setPaper();
|
||
|
||
await this.drawHeader();
|
||
this.drawDivider();
|
||
await this.drawContentEmpty();
|
||
}
|
||
|
||
async drawContentEmpty() {
|
||
this.clearContentArea();
|
||
this.drawContent(null);
|
||
await this.drawPrintFooter();
|
||
}
|
||
|
||
/**
|
||
* 绘制田字格和练字内容
|
||
* @param wordsMap 形如 { "其": ["M.. L.. Z", ...], ... }，不超过 10 个汉字
|
||
*/
|
||
async drawPracticeContent(characters: CharacterItem[]) {
|
||
// 清空内容区域（页眉以下的部分）
|
||
this.clearContentArea();
|
||
|
||
// 绘制田字格和练字内容
|
||
this.drawContent(characters);
|
||
await this.drawPrintFooter();
|
||
}
|
||
|
||
/**
|
||
* 清空内容区域（页眉以下的部分）
|
||
*/
|
||
private clearContentArea() {
|
||
const { ctx } = this;
|
||
const contentStartY = this.currentY;
|
||
|
||
// 清空页眉以下的所有内容（使用逻辑像素）
|
||
ctx.fillStyle = '#fff';
|
||
ctx.fillRect(
|
||
0,
|
||
contentStartY,
|
||
this.canvasWidth,
|
||
this.canvasHeight - contentStartY,
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 绘制正文内容：两阶段绘制 - 先绘制空田字格，再绘制练字内容
|
||
*/
|
||
/**
|
||
* 绘制正文内容：包括田字格的排布和内容
|
||
*
|
||
* minGap 作用解释：
|
||
* minGap（最小列间距）用于田字格水平方向（每一行格子之间的间距）的初始最小值。它保证多个田字格在一行内不会紧贴排布、而是有一个最小的间隔，整体看起来不会拥挤。后续还会结合画布实际剩余空间动态调整为更合适的实际间距 actualColGap。
|
||
*
|
||
* rowGap 作用解释：
|
||
* rowGap（行间距）用于田字格竖直方向（每一行田字格之间的间隔）的初始最小值。它防止行与行的田字格上下贴得太紧，增加一定的可视呼吸空间。之后同样会结合剩余空间动态调整为实际间距 actualRowGap。
|
||
*/
|
||
drawContent(characterData: CharacterItem[] | null) {
|
||
const { ctx } = this;
|
||
|
||
// 布局参数（逻辑像素，原始尺寸除以3）
|
||
const topGap = 17; // 50/3≈17
|
||
const leftMargin = 40; // 120/3=40
|
||
const rightMargin = 40; // 120/3=40
|
||
const bottomMargin = 40; // 120/3=40
|
||
const contentTop = this.currentY + topGap;
|
||
const contentWidth = this.canvasWidth - leftMargin - rightMargin;
|
||
const contentHeight = this.canvasHeight - contentTop - bottomMargin;
|
||
|
||
const cellSize = 47; // 140/3≈47
|
||
// 统一通过 getMaxGridLayout 获取最大行列数
|
||
const { maxRow, maxCol } = this.getMaxGridLayout();
|
||
|
||
// 动态调整间距以充分利用空间（在允许的最小间距基础上弹性扩展以适配画布）
|
||
const actualRowGap =
|
||
maxRow > 1 ? (contentHeight - maxRow * cellSize) / (maxRow - 1) : 0;
|
||
const actualColGap =
|
||
maxCol > 1 ? (contentWidth - maxCol * cellSize) / (maxCol - 1) : 0;
|
||
|
||
// console.log(`布局信息: 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
|
||
|
||
// 第一阶段：绘制所有空田字格
|
||
this.drawEmptyGrids({
|
||
ctx,
|
||
startX: leftMargin,
|
||
startY: contentTop,
|
||
cellSize,
|
||
colGap: actualColGap,
|
||
rowGap: actualRowGap,
|
||
maxRow,
|
||
maxCol,
|
||
});
|
||
|
||
if (characterData && characterData.length > 0) {
|
||
// 第二阶段：绘制练字内容
|
||
this.drawPracticeContentInternal({
|
||
ctx,
|
||
characterData,
|
||
startX: leftMargin,
|
||
startY: contentTop,
|
||
cellSize,
|
||
colGap: actualColGap,
|
||
rowGap: actualRowGap,
|
||
maxCol,
|
||
maxRow,
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取当前页面可绘制田字格的最大行数与列数（与绘制使用同一套计算规则）
|
||
*/
|
||
getMaxGridLayout(): { maxRow: number; maxCol: number } {
|
||
// 布局参数需与 drawContent 保持一致（逻辑像素）
|
||
const topGap = 17; // 50/3≈17
|
||
const leftMargin = 40; // 120/3=40
|
||
const rightMargin = 40; // 120/3=40
|
||
const bottomMargin = 40; // 120/3=40
|
||
const contentTop = this.currentY + topGap;
|
||
const contentWidth = this.canvasWidth - leftMargin - rightMargin;
|
||
const contentHeight = this.canvasHeight - contentTop - bottomMargin;
|
||
|
||
const cellSize = 47; // 140/3≈47
|
||
const minGap = 8; // 24/3=8
|
||
const rowGap = 12; // 36/3=12
|
||
|
||
const maxCol = Math.max(
|
||
1,
|
||
Math.floor((contentWidth + minGap) / (cellSize + minGap)),
|
||
);
|
||
const maxRow = Math.max(
|
||
1,
|
||
Math.floor((contentHeight + rowGap) / (cellSize + rowGap)),
|
||
);
|
||
|
||
return { maxRow, maxCol };
|
||
}
|
||
|
||
/**
|
||
* 绘制空田字格网格
|
||
*/
|
||
drawEmptyGrids({
|
||
ctx,
|
||
startX,
|
||
startY,
|
||
cellSize,
|
||
colGap,
|
||
rowGap,
|
||
maxRow,
|
||
maxCol,
|
||
}: {
|
||
ctx: RenderingContext;
|
||
startX: number;
|
||
startY: number;
|
||
cellSize: number;
|
||
colGap: number;
|
||
rowGap: number;
|
||
maxRow: number; // 行数
|
||
maxCol: number; // 列数
|
||
}) {
|
||
for (let row = 0; row < maxRow; row++) {
|
||
for (let col = 0; col < maxCol; col++) {
|
||
const x = startX + col * (cellSize + colGap) + cellSize / 2;
|
||
const y = startY + row * (cellSize + rowGap) + cellSize / 2;
|
||
drawTianZiGrid({ ctx, x, y, size: cellSize });
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 绘制练字内容（参考 template.html 的实现）
|
||
*/
|
||
drawPracticeContentInternal({
|
||
ctx,
|
||
characterData,
|
||
startX,
|
||
startY,
|
||
cellSize,
|
||
colGap,
|
||
rowGap,
|
||
maxCol,
|
||
maxRow,
|
||
}: {
|
||
ctx: RenderingContext;
|
||
characterData: CharacterItem[];
|
||
startX: number;
|
||
startY: number;
|
||
cellSize: number;
|
||
colGap: number;
|
||
rowGap: number;
|
||
maxCol: number;
|
||
maxRow: number;
|
||
}) {
|
||
let rowIndex = 0;
|
||
|
||
for (let i = 0; i < characterData.length; i++) {
|
||
const item = characterData[i];
|
||
const strokes = item.strokes;
|
||
const strokeCount = strokes.length;
|
||
|
||
const totalCells = 1 + strokeCount; // 预览 + 练习
|
||
const totalRows = Math.ceil(totalCells / maxCol);
|
||
|
||
if (rowIndex + totalRows > maxRow) {
|
||
break; // 放不下，停止绘制
|
||
}
|
||
|
||
for (let cellIdx = 0; cellIdx < totalCells; cellIdx++) {
|
||
const localRowOffset = Math.floor(cellIdx / maxCol);
|
||
const localColIndex = cellIdx % maxCol;
|
||
const globalRow = rowIndex + localRowOffset;
|
||
if (globalRow >= maxRow) {
|
||
break;
|
||
}
|
||
if (cellIdx === 0) {
|
||
this.drawPreviewCell({
|
||
ctx,
|
||
strokes,
|
||
startX,
|
||
startY,
|
||
cellSize,
|
||
colGap,
|
||
rowGap,
|
||
rowIndex: globalRow,
|
||
});
|
||
} else {
|
||
const strokeIndex = cellIdx - 1;
|
||
this.drawPracticeCell({
|
||
ctx,
|
||
strokes,
|
||
strokeIndex,
|
||
startX,
|
||
startY,
|
||
cellSize,
|
||
colGap,
|
||
rowGap,
|
||
rowIndex: globalRow,
|
||
columnIndex: localColIndex,
|
||
});
|
||
}
|
||
}
|
||
|
||
rowIndex = rowIndex + totalRows;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 绘制预览格（完整汉字）
|
||
*/
|
||
drawPreviewCell({
|
||
ctx,
|
||
strokes,
|
||
startX,
|
||
startY,
|
||
cellSize,
|
||
colGap,
|
||
rowGap,
|
||
rowIndex,
|
||
}: {
|
||
ctx: RenderingContext;
|
||
strokes: string[];
|
||
startX: number;
|
||
startY: number;
|
||
cellSize: number;
|
||
colGap: number;
|
||
rowGap: number;
|
||
rowIndex: number;
|
||
}) {
|
||
const columnIndex = 0;
|
||
const x = startX + columnIndex * (cellSize + colGap);
|
||
const y = startY + rowIndex * (cellSize + rowGap);
|
||
|
||
// console.log(`预览格 [${rowIndex}, ${columnIndex}] 坐标: (${x}, ${y}), 笔画数: ${strokes.length}`);
|
||
|
||
// 绘制完整汉字（深灰色，Fill + Stroke模式）
|
||
// 参考一般练字贴：预览字使用深灰色，不是纯黑色，更柔和护眼
|
||
drawStrokes({
|
||
ctx,
|
||
strokes,
|
||
offsetX: x,
|
||
offsetY: y,
|
||
size: cellSize,
|
||
uptoInclusive: strokes.length - 1,
|
||
fillStyle: 'rgb(85,85,85)', // 深灰色填充（#555555），比#666666更深一点
|
||
strokeStyle: 'rgb(85,85,85)', // 深灰色描边
|
||
lineWidth: 1.2, // Fill + Stroke 模式，线条宽度调小一点（逻辑像素）
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 绘制练习格（逐笔画）
|
||
*/
|
||
drawPracticeCell({
|
||
ctx,
|
||
strokes,
|
||
strokeIndex,
|
||
startX,
|
||
startY,
|
||
cellSize,
|
||
colGap,
|
||
rowGap,
|
||
rowIndex,
|
||
columnIndex,
|
||
}: {
|
||
ctx: RenderingContext;
|
||
strokes: string[];
|
||
strokeIndex: number;
|
||
startX: number;
|
||
startY: number;
|
||
cellSize: number;
|
||
colGap: number;
|
||
rowGap: number;
|
||
rowIndex: number;
|
||
columnIndex: number;
|
||
}) {
|
||
const x = startX + columnIndex * (cellSize + colGap);
|
||
const y = startY + rowIndex * (cellSize + rowGap);
|
||
|
||
// console.log(`练习格 [${rowIndex}, ${columnIndex}] 坐标: (${x}, ${y}), 笔画: ${strokeIndex + 1}/${strokes.length}`);
|
||
|
||
// 绘制到指定笔画的汉字（浅灰色，Fill + Stroke模式）
|
||
// 参考一般练字贴：练习字使用浅灰色，便于临摹
|
||
drawStrokes({
|
||
ctx,
|
||
strokes,
|
||
offsetX: x,
|
||
offsetY: y,
|
||
size: cellSize,
|
||
uptoInclusive: strokeIndex,
|
||
fillStyle: 'rgb(170,170,170)', // 浅灰色填充（#aaaaaa），参考练字贴颜色
|
||
strokeStyle: 'rgb(170,170,170)', // 浅灰色描边
|
||
lineWidth: 1.2, // Fill + Stroke 模式，线条宽度调小一点（逻辑像素）
|
||
});
|
||
}
|
||
|
||
// drawDivider 已在基类中实现，此方法保留以保持兼容
|
||
drawDivider() {
|
||
super.drawDivider();
|
||
}
|
||
}
|
||
|
||
export default WordDrawService;
|