R524809
420 lines
13 KiB
TypeScript
420 lines
13 KiB
TypeScript
/**
|
|
* 线条识别绘制服务
|
|
*/
|
|
|
|
import { BaseDrawService } from '../../../core/draw/baseDraw';
|
|
import { getImage } from '../../../utils/index';
|
|
|
|
/**
|
|
* 线条类型
|
|
*/
|
|
export type LineType = 'straight' | 'dashed' | 'wavy' | 'zigzag' | 'spiral';
|
|
|
|
/**
|
|
* 线条类型配置
|
|
*/
|
|
export interface LineTypeConfig {
|
|
type: LineType;
|
|
name: string;
|
|
color: string;
|
|
}
|
|
|
|
/**
|
|
* 线条识别数据
|
|
*/
|
|
export interface LineRecognitionData {
|
|
/** 预览区域的5个线条配置（随机排列） */
|
|
referenceLines: LineTypeConfig[];
|
|
/** 练习区域的16个色块（2列×8行） */
|
|
practiceBlocks: Array<{
|
|
color: string;
|
|
lineType: LineType;
|
|
x: number; // 相对于列的X偏移（错落感）
|
|
y: number; // 相对于行的Y偏移（错落感）
|
|
}>;
|
|
}
|
|
|
|
/**
|
|
* 线条识别绘制服务
|
|
*/
|
|
class LineRecognitionDraw extends BaseDrawService {
|
|
lineData: LineRecognitionData | null = null;
|
|
lineStrokeStyle: string = '#222'; // 线条颜色
|
|
lineWidth: number = 2; // 线条宽度
|
|
spiralLineImage: any = null; // 电话线图片对象
|
|
private spiralLineImagePromise: Promise<any> | null = null; // 图片加载Promise
|
|
|
|
constructor(
|
|
canvas: Canvas,
|
|
ctx: RenderingContext,
|
|
options?: Record<string, any>,
|
|
) {
|
|
super(canvas, ctx, options);
|
|
// 在构造函数中启动图片加载
|
|
this.loadSpiralLineImage();
|
|
}
|
|
|
|
/**
|
|
* 加载电话线图片
|
|
*/
|
|
private loadSpiralLineImage() {
|
|
if (!this.spiralLineImagePromise) {
|
|
const imagePath = `/focusPages/shared/aeests/imgs/spiral-line.png`;
|
|
this.spiralLineImagePromise = getImage(this.canvas, imagePath).then(
|
|
(image) => {
|
|
this.spiralLineImage = image;
|
|
return image;
|
|
},
|
|
);
|
|
}
|
|
return this.spiralLineImagePromise;
|
|
}
|
|
|
|
/**
|
|
* 绘制线条识别内容
|
|
*/
|
|
async draw(lineData: LineRecognitionData) {
|
|
if (!lineData || !lineData.referenceLines || !lineData.practiceBlocks) {
|
|
return;
|
|
}
|
|
|
|
// 确保电话线图片已加载
|
|
if (!this.spiralLineImage) {
|
|
await this.loadSpiralLineImage();
|
|
}
|
|
|
|
this.lineData = lineData;
|
|
this.prepareDraw();
|
|
await this.drawHeaderAndDivider();
|
|
await this.drawContent({
|
|
canvas: this.canvas,
|
|
ctx: this.ctx,
|
|
lineData: this.lineData,
|
|
canvasWidth: this.canvasWidth,
|
|
startY: this.currentY,
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 绘制直线
|
|
*/
|
|
private drawStraightLine(
|
|
ctx: RenderingContext,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
) {
|
|
ctx.strokeStyle = this.lineStrokeStyle;
|
|
ctx.lineWidth = this.lineWidth;
|
|
ctx.setLineDash([]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.lineTo(x + width, y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
/**
|
|
* 绘制虚线
|
|
*/
|
|
private drawDashedLine(
|
|
ctx: RenderingContext,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
) {
|
|
ctx.strokeStyle = this.lineStrokeStyle;
|
|
ctx.lineWidth = this.lineWidth;
|
|
ctx.setLineDash([6, 4]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.lineTo(x + width, y);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
}
|
|
|
|
/**
|
|
* 绘制波浪线
|
|
*/
|
|
private drawWavyLine(
|
|
ctx: RenderingContext,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
) {
|
|
ctx.strokeStyle = this.lineStrokeStyle;
|
|
ctx.lineWidth = this.lineWidth;
|
|
ctx.setLineDash([]);
|
|
ctx.beginPath();
|
|
const radius = 8; // 波浪半径
|
|
const turns = 5; // 波浪圈数
|
|
const points = 120; // 点数
|
|
const startX = x;
|
|
const endX = x + width;
|
|
|
|
ctx.moveTo(startX, y);
|
|
for (let i = 0; i <= points; i++) {
|
|
const progress = i / points;
|
|
const currentX = startX + (endX - startX) * progress;
|
|
const angle = progress * turns * Math.PI * 2;
|
|
const currentY = y + Math.sin(angle) * radius;
|
|
ctx.lineTo(currentX, currentY);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
/**
|
|
* 绘制锯齿线
|
|
*/
|
|
private drawZigzagLine(
|
|
ctx: RenderingContext,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
) {
|
|
ctx.strokeStyle = this.lineStrokeStyle;
|
|
ctx.lineWidth = this.lineWidth;
|
|
ctx.setLineDash([]); // 实线
|
|
ctx.beginPath();
|
|
|
|
const segmentLength = 12; // 每段长度
|
|
const amplitude = 7; // 波峰/波谷高度
|
|
|
|
// 第一个点为波峰顶点
|
|
let currentX = x;
|
|
let currentY = y - amplitude;
|
|
ctx.moveTo(currentX, currentY);
|
|
|
|
// 计算一共能画多少完整段，两点之间斜线斜率为±1（45度）
|
|
const nSegments = Math.ceil(width / segmentLength);
|
|
|
|
for (let i = 0; i < nSegments; i++) {
|
|
// 下一点横坐标
|
|
let nextX = currentX + segmentLength;
|
|
// 最后一个点不能超过终点，且如正好到终点，高度需计算
|
|
if (nextX > x + width) {
|
|
nextX = x + width;
|
|
}
|
|
// 交替：偶数索引连向波谷，奇数索引连向波峰
|
|
let nextY;
|
|
if (i % 2 === 0) {
|
|
nextY = y + amplitude; // 波谷
|
|
} else {
|
|
nextY = y - amplitude; // 波峰
|
|
}
|
|
// 如果已经到最后一段，最后一个点应当总是在波谷
|
|
if (i === nSegments - 1) {
|
|
nextY = y + amplitude;
|
|
}
|
|
|
|
ctx.lineTo(nextX, nextY);
|
|
|
|
currentX = nextX;
|
|
currentY = nextY;
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
|
|
/**
|
|
* 绘制电话线（使用图片）
|
|
*/
|
|
private drawSpiralLine(
|
|
ctx: RenderingContext,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
) {
|
|
// 使用预加载的图片对象
|
|
if (!this.spiralLineImage) {
|
|
console.warn('电话线图片未加载完成');
|
|
return;
|
|
}
|
|
|
|
// 计算图片高度，保持原始宽高比，或者使用固定高度
|
|
const imageHeight = 22; // 固定高度，与线条宽度匹配
|
|
const drawY = y - imageHeight / 2; // 垂直居中
|
|
|
|
// 绘制图片
|
|
ctx.drawImage(this.spiralLineImage, x, drawY, width, imageHeight);
|
|
}
|
|
|
|
/**
|
|
* 绘制线条
|
|
*/
|
|
private drawLine(
|
|
ctx: RenderingContext,
|
|
lineType: LineType,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
) {
|
|
switch (lineType) {
|
|
case 'straight':
|
|
this.drawStraightLine(ctx, x, y, width);
|
|
break;
|
|
case 'dashed':
|
|
this.drawDashedLine(ctx, x, y, width);
|
|
break;
|
|
case 'wavy':
|
|
this.drawWavyLine(ctx, x, y, width);
|
|
break;
|
|
case 'zigzag':
|
|
this.drawZigzagLine(ctx, x, y, width);
|
|
break;
|
|
case 'spiral':
|
|
this.drawSpiralLine(ctx, x, y, width);
|
|
break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 绘制内容区域
|
|
*/
|
|
private async drawContent(params: {
|
|
canvas: WechatMiniprogram.Canvas;
|
|
ctx: RenderingContext;
|
|
lineData: LineRecognitionData;
|
|
canvasWidth: number;
|
|
startY: number;
|
|
}): Promise<void> {
|
|
const { ctx, lineData, canvasWidth } = params;
|
|
let { startY } = params;
|
|
|
|
startY = startY + 25;
|
|
|
|
const margin = 40; // 左右边距
|
|
const referenceBlockWidth = 140; // 预览区域色块宽度（加长）
|
|
const referenceBlockHeight = 35; // 预览区域色块高度（缩减）
|
|
const referenceBlockSpacing = 30; // 色块间距
|
|
const textHeight = 30; // 文字高度
|
|
const lineMargin = 15; // 线条距离色块边缘的距离
|
|
const rowSpacing = 15; // 行间距
|
|
|
|
// 绘制预览区域（两行：第一行2个，第二行3个）
|
|
const referenceStartY = startY;
|
|
|
|
// 第一行：2个色块
|
|
const firstRowWidth = 2 * referenceBlockWidth + referenceBlockSpacing;
|
|
const firstRowStartX =
|
|
margin + (canvasWidth - margin * 2 - firstRowWidth) / 2;
|
|
|
|
for (let i = 0; i < 2; i++) {
|
|
const config = lineData.referenceLines[i];
|
|
const blockX =
|
|
firstRowStartX +
|
|
i * (referenceBlockWidth + referenceBlockSpacing);
|
|
const blockY = referenceStartY;
|
|
|
|
// 绘制色块（无边框）
|
|
ctx.fillStyle = config.color;
|
|
ctx.fillRect(
|
|
blockX,
|
|
blockY,
|
|
referenceBlockWidth,
|
|
referenceBlockHeight,
|
|
);
|
|
|
|
// 绘制线条
|
|
const lineX = blockX + lineMargin;
|
|
const lineY = blockY + referenceBlockHeight / 2;
|
|
const lineWidth = referenceBlockWidth - lineMargin * 2;
|
|
this.drawLine(ctx, config.type, lineX, lineY, lineWidth);
|
|
|
|
// 绘制文字标签
|
|
ctx.fillStyle = '#000';
|
|
ctx.font = 'bold 16px "Microsoft Yahei"';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'top';
|
|
ctx.fillText(
|
|
config.name,
|
|
blockX + referenceBlockWidth / 2,
|
|
blockY + referenceBlockHeight + 5,
|
|
);
|
|
}
|
|
|
|
// 第二行：3个色块
|
|
const secondRowWidth =
|
|
3 * referenceBlockWidth + 2 * referenceBlockSpacing;
|
|
const secondRowStartX =
|
|
margin + (canvasWidth - margin * 2 - secondRowWidth) / 2;
|
|
const secondRowY =
|
|
referenceStartY + referenceBlockHeight + textHeight + rowSpacing;
|
|
|
|
for (let i = 0; i < 3; i++) {
|
|
const config = lineData.referenceLines[i + 2];
|
|
const blockX =
|
|
secondRowStartX +
|
|
i * (referenceBlockWidth + referenceBlockSpacing);
|
|
const blockY = secondRowY;
|
|
|
|
// 绘制色块（无边框）
|
|
ctx.fillStyle = config.color;
|
|
ctx.fillRect(
|
|
blockX,
|
|
blockY,
|
|
referenceBlockWidth,
|
|
referenceBlockHeight,
|
|
);
|
|
|
|
// 绘制线条
|
|
const lineX = blockX + lineMargin;
|
|
const lineY = blockY + referenceBlockHeight / 2;
|
|
const lineWidth = referenceBlockWidth - lineMargin * 2;
|
|
this.drawLine(ctx, config.type, lineX, lineY, lineWidth);
|
|
|
|
// 绘制文字标签
|
|
ctx.fillStyle = '#000';
|
|
ctx.font = 'bold 16px "Microsoft Yahei"';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'top';
|
|
ctx.fillText(
|
|
config.name,
|
|
blockX + referenceBlockWidth / 2,
|
|
blockY + referenceBlockHeight + 5,
|
|
);
|
|
}
|
|
|
|
// 绘制虚线分割线
|
|
const dividerY = secondRowY + referenceBlockHeight + textHeight + 30;
|
|
this.drawDashedDivider(dividerY, margin);
|
|
|
|
const practiceMargin = 60;
|
|
// 绘制练习区域（2列×8行）
|
|
const practiceStartY = dividerY + 30;
|
|
// 练习区域色块尺寸与预览区域一致
|
|
const practiceBlockWidth = referenceBlockWidth + 50; // 140
|
|
const practiceBlockHeight = referenceBlockHeight + 5; // 35
|
|
const practiceRowHeight = 60; // 每行高度（增加间距，确保不重叠）
|
|
const practiceColWidth = (canvasWidth - practiceMargin * 2 - 30) / 2; // 列宽度（减去列间距）
|
|
const practiceColSpacing = 30; // 列间距
|
|
|
|
for (let row = 0; row < 8; row++) {
|
|
for (let col = 0; col < 2; col++) {
|
|
const blockIndex = row * 2 + col;
|
|
const block = lineData.practiceBlocks[blockIndex];
|
|
if (!block) continue;
|
|
|
|
// 计算基础位置（考虑错落感）
|
|
const baseX =
|
|
practiceMargin +
|
|
col * (practiceColWidth + practiceColSpacing);
|
|
const baseY = practiceStartY + row * practiceRowHeight;
|
|
|
|
// 添加随机错落感（限制范围，确保不重叠）
|
|
const blockX = baseX + block.x;
|
|
const blockY = baseY + block.y;
|
|
|
|
// 绘制色块（无边框）
|
|
ctx.fillStyle = block.color;
|
|
ctx.fillRect(
|
|
blockX,
|
|
blockY,
|
|
practiceBlockWidth,
|
|
practiceBlockHeight,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export default LineRecognitionDraw;
|