R524809
100 lines
3.9 KiB
TypeScript
100 lines
3.9 KiB
TypeScript
/**
|
|
* 绘制书写行内容区域的参数接口
|
|
*/
|
|
interface DrawNumberWriteContentParams {
|
|
ctx: RenderingContext;
|
|
selectedNumber: number;
|
|
canvasWidth: number; // 逻辑像素宽度
|
|
startY: number; // 起始Y坐标
|
|
}
|
|
|
|
/**
|
|
* 绘制数字书写内容区域服务
|
|
* 绘制三条书写行，每条行有三条线（上下实线，中间虚线）
|
|
* 第一行和第二行有数字（第一个黑色实线，后续灰色虚线），第三行空白
|
|
*/
|
|
export function drawNumberWriteContent({
|
|
ctx,
|
|
selectedNumber,
|
|
canvasWidth,
|
|
startY,
|
|
}: DrawNumberWriteContentParams): void {
|
|
const lineSpacing = 30; // 行间距（三条线之间的间距）
|
|
const rowHeight = lineSpacing * 2; // 每行的高度（两条实线之间的距离）
|
|
const rowMargin = 24; // 行与行之间的间距
|
|
const leftMargin = 24; // 左边距
|
|
const rightMargin = 24; // 右边距
|
|
const numberIndent = selectedNumber === 10 ? 12 : 24; // 数字缩进（避免贴边）
|
|
const numberSpacing = 90; // 数字之间的间距
|
|
const numberCount = 6; // 每行数字的数量（第一个实线 + 6个虚线）
|
|
const fontSize = 76; // 数字字体大小（调整为行高的83%，避免超出上下边线）
|
|
|
|
// 计算每行的起始Y坐标
|
|
const rowStartY = startY + 20; // 顶部间距
|
|
|
|
// 绘制三条书写行
|
|
for (let rowIndex = 0; rowIndex < 5; rowIndex++) {
|
|
const rowY = rowStartY + rowIndex * (rowHeight + rowMargin);
|
|
const topLineY = rowY;
|
|
const middleLineY = rowY + lineSpacing;
|
|
const bottomLineY = rowY + rowHeight;
|
|
|
|
// 绘制上实线（蓝色）
|
|
ctx.strokeStyle = '#4A90E2'; // 蓝色
|
|
ctx.lineWidth = 1;
|
|
ctx.setLineDash([]); // 实线
|
|
ctx.beginPath();
|
|
ctx.moveTo(leftMargin, topLineY);
|
|
ctx.lineTo(canvasWidth - rightMargin, topLineY);
|
|
ctx.stroke();
|
|
|
|
// 绘制中间虚线（橙色）
|
|
ctx.strokeStyle = '#FF8C42'; // 橙色
|
|
ctx.lineWidth = 1;
|
|
ctx.setLineDash([12, 12]); // 虚线模式
|
|
ctx.beginPath();
|
|
ctx.moveTo(leftMargin, middleLineY);
|
|
ctx.lineTo(canvasWidth - rightMargin, middleLineY);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]); // 恢复实线模式
|
|
|
|
// 绘制下实线（蓝色）
|
|
ctx.strokeStyle = '#4A90E2'; // 蓝色
|
|
ctx.lineWidth = 1;
|
|
ctx.setLineDash([]); // 实线
|
|
ctx.beginPath();
|
|
ctx.moveTo(leftMargin, bottomLineY);
|
|
ctx.lineTo(canvasWidth - rightMargin, bottomLineY);
|
|
ctx.stroke();
|
|
|
|
// 第一行和第二行绘制数字
|
|
if (rowIndex < 3) {
|
|
const centerY = rowY + lineSpacing; // 数字中心Y坐标（中间虚线位置）
|
|
|
|
for (let i = 0; i < numberCount; i++) {
|
|
const numberX = leftMargin + numberIndent + i * numberSpacing;
|
|
|
|
if (i === 0) {
|
|
// 第一个数字：黑色实线
|
|
ctx.fillStyle = '#000000';
|
|
ctx.font = `bold ${fontSize}px "Microsoft Yahei"`;
|
|
ctx.textBaseline = 'middle';
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText(String(selectedNumber), numberX, centerY);
|
|
} else {
|
|
// 后续数字：灰色虚线（使用灰色填充配合透明度模拟虚线效果）
|
|
const savedAlpha = ctx.globalAlpha;
|
|
ctx.globalAlpha = 0.6; // 设置透明度模拟虚线效果
|
|
ctx.fillStyle = '#999999'; // 灰色
|
|
ctx.font = `${fontSize}px "Microsoft Yahei"`;
|
|
ctx.textBaseline = 'middle';
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText(String(selectedNumber), numberX, centerY);
|
|
ctx.globalAlpha = savedAlpha; // 恢复透明度
|
|
}
|
|
}
|
|
}
|
|
// 第三行不绘制数字（空白行）
|
|
}
|
|
}
|