R524809
147 lines
4.6 KiB
TypeScript
147 lines
4.6 KiB
TypeScript
import LineRecognitionDraw from '../shared/service/lineRecognitionDraw';
|
||
import { createFocusPage } from '../shared/common/focusPageMixin';
|
||
import {
|
||
LineRecognitionData,
|
||
LineType,
|
||
LineTypeConfig,
|
||
} from '../shared/service/lineRecognitionDraw';
|
||
import { NUMBER_COLORS } from '../../constants/colors';
|
||
|
||
/**
|
||
* 广告位ID：adunit-89cff2de998f1146
|
||
请返回广告位列表，获取广告位代码，将代码插入小程序页面中适合位置，发布后即展现对应广告位。
|
||
*/
|
||
|
||
// 线条类型配置
|
||
const LINE_TYPES: Array<{ type: LineType; name: string }> = [
|
||
{ type: 'straight', name: '直线' },
|
||
{ type: 'dashed', name: '虚线' },
|
||
{ type: 'wavy', name: '波浪线' },
|
||
{ type: 'zigzag', name: '锯齿线' },
|
||
{ type: 'spiral', name: '电话线' },
|
||
];
|
||
|
||
createFocusPage({
|
||
canvas: null as Canvas | null,
|
||
ctx: null as RenderingContext | null,
|
||
boxHeight: 0,
|
||
boxWidth: 0,
|
||
drawService: null as LineRecognitionDraw | null,
|
||
lineData: null as LineRecognitionData | null,
|
||
|
||
data: {
|
||
pageTitle: '线条识别',
|
||
functionId: '',
|
||
hasContent: false,
|
||
showShareDialog: false,
|
||
},
|
||
|
||
onLoad(options: { id?: string }) {
|
||
const functionId = options.id || 'line-recognition';
|
||
this.setData({
|
||
functionId,
|
||
});
|
||
this.initPageInfo(functionId, '线条识别');
|
||
},
|
||
|
||
onReady() {
|
||
this.initCanvas({
|
||
createDrawService: (
|
||
canvas: Canvas,
|
||
ctx: RenderingContext,
|
||
options?: Record<string, any>,
|
||
) => {
|
||
return new LineRecognitionDraw(canvas, ctx, options);
|
||
},
|
||
drawServiceOptions: {
|
||
title: this.data.pageTitle,
|
||
subTitle: '认识不同线条，画出颜色对应的线条',
|
||
functionId: this.data.functionId,
|
||
},
|
||
onCanvasReady: () => {
|
||
// 初始随机生成
|
||
this.onRandom();
|
||
},
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 绘制Canvas内容
|
||
*/
|
||
async drawCanvas() {
|
||
if (!this.ctx || !this.drawService || !this.lineData) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await this.drawService.draw(this.lineData);
|
||
this.setData({ hasContent: true });
|
||
} catch (error) {
|
||
console.error('绘制失败:', error);
|
||
this.setData({ hasContent: false });
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 随机生成
|
||
*/
|
||
onRandom() {
|
||
// 从NUMBER_COLORS中随机选择5种颜色（排除11和12：柔和棕色和柔和黑灰）
|
||
const colorKeys = Object.keys(NUMBER_COLORS)
|
||
.map(Number)
|
||
.filter((key) => key !== 11 && key !== 12); // 排除柔和棕色和柔和黑灰
|
||
const shuffledColors = [...colorKeys].sort(() => Math.random() - 0.5);
|
||
const selectedColorKeys = shuffledColors.slice(0, 5);
|
||
|
||
// 创建5个线条配置（随机排列）
|
||
const shuffledLineTypes = [...LINE_TYPES].sort(
|
||
() => Math.random() - 0.5,
|
||
);
|
||
const referenceLines: LineTypeConfig[] = shuffledLineTypes.map(
|
||
(lineType, index) => ({
|
||
type: lineType.type,
|
||
name: lineType.name,
|
||
color: NUMBER_COLORS[selectedColorKeys[index]],
|
||
}),
|
||
);
|
||
|
||
// 创建练习区域的16个色块（2列×8行）
|
||
const practiceBlocks: Array<{
|
||
color: string;
|
||
lineType: LineType;
|
||
x: number;
|
||
y: number;
|
||
}> = [];
|
||
|
||
// 为每行生成色块
|
||
for (let row = 0; row < 8; row++) {
|
||
for (let col = 0; col < 2; col++) {
|
||
// 随机选择一个线条类型和颜色
|
||
const randomLineIndex = Math.floor(
|
||
Math.random() * referenceLines.length,
|
||
);
|
||
const selectedLine = referenceLines[randomLineIndex];
|
||
|
||
// 生成随机错落感（X轴偏移：-20到20，Y轴偏移：-8到8，确保不重叠）
|
||
// 行高55，色块35，所以Y轴偏移最大8，确保不重叠
|
||
const xOffset = (Math.random() - 0.5) * 40;
|
||
const yOffset = (Math.random() - 0.5) * 16;
|
||
|
||
practiceBlocks.push({
|
||
color: selectedLine.color,
|
||
lineType: selectedLine.type,
|
||
x: xOffset,
|
||
y: yOffset,
|
||
});
|
||
}
|
||
}
|
||
|
||
this.lineData = {
|
||
referenceLines,
|
||
practiceBlocks,
|
||
};
|
||
|
||
this.drawCanvas();
|
||
},
|
||
});
|