R524809
151 lines
4.3 KiB
TypeScript
151 lines
4.3 KiB
TypeScript
import CodeConnectDraw from '../shared/service/codeConnectDraw';
|
||
import { createFocusPage } from '../shared/common/focusPageMixin';
|
||
import { CodeConnectData } from '../shared/service/codeConnectDraw';
|
||
import { WATER_COLORS } from '../../constants/colors';
|
||
|
||
createFocusPage({
|
||
canvas: null as Canvas | null,
|
||
ctx: null as RenderingContext | null,
|
||
boxHeight: 0,
|
||
boxWidth: 0,
|
||
drawService: null as CodeConnectDraw | null,
|
||
codeData: null as CodeConnectData | null,
|
||
|
||
data: {
|
||
pageTitle: '译码连线',
|
||
functionId: '',
|
||
hasContent: false,
|
||
showShareDialog: false,
|
||
},
|
||
|
||
onLoad(options: { id?: string }) {
|
||
const functionId = options.id || 'code-connect';
|
||
this.setData({
|
||
functionId,
|
||
});
|
||
this.initPageInfo(functionId, '译码连线');
|
||
},
|
||
|
||
onReady() {
|
||
this.initCanvas({
|
||
createDrawService: (
|
||
canvas: Canvas,
|
||
ctx: RenderingContext,
|
||
options?: Record<string, any>,
|
||
) => {
|
||
return new CodeConnectDraw(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.codeData) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await this.drawService.draw(this.codeData);
|
||
this.setData({ hasContent: true });
|
||
} catch (error) {
|
||
console.error('绘制失败:', error);
|
||
this.setData({ hasContent: false });
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 随机生成
|
||
*/
|
||
onRandom() {
|
||
// 随机选择起始数字：1、2或3
|
||
const startNumberOptions = [1, 2, 3];
|
||
const startNumber =
|
||
startNumberOptions[
|
||
Math.floor(Math.random() * startNumberOptions.length)
|
||
];
|
||
|
||
// 生成8个连续的数字（1-8、2-9或3-10）
|
||
const numbers: number[] = [];
|
||
for (let i = 0; i < 8; i++) {
|
||
numbers.push(startNumber + i);
|
||
}
|
||
|
||
// 从WATER_COLORS.extended24中随机选择8种不重复的颜色
|
||
const colorIndices = Array.from(
|
||
{ length: WATER_COLORS.extended24.length },
|
||
(_, i) => i,
|
||
);
|
||
const shuffledIndices = [...colorIndices].sort(
|
||
() => Math.random() - 0.5,
|
||
);
|
||
const selectedIndices = shuffledIndices.slice(0, 8);
|
||
|
||
// 创建颜色映射
|
||
const colorMap = numbers.map((number, index) => ({
|
||
number,
|
||
color: WATER_COLORS.extended24[selectedIndices[index]].hex,
|
||
}));
|
||
|
||
// 生成4个组的题目
|
||
const groups: Array<{
|
||
sequence: number[];
|
||
dots: Array<{
|
||
number: number;
|
||
color: string;
|
||
angle: number;
|
||
}>;
|
||
}> = [];
|
||
|
||
for (let i = 0; i < 4; i++) {
|
||
// 从当前数字范围中随机选择6个数字（不重复）
|
||
const shuffledNumbers = [...numbers].sort(
|
||
() => Math.random() - 0.5,
|
||
);
|
||
const sequence = shuffledNumbers.slice(0, 5);
|
||
|
||
// 生成8个圆点的位置（圆形分布）
|
||
const dots: Array<{
|
||
number: number;
|
||
color: string;
|
||
angle: number;
|
||
}> = [];
|
||
|
||
// 8个圆点均匀分布在圆周上
|
||
for (let j = 0; j < 8; j++) {
|
||
const angle = (j / 8) * Math.PI * 2 - Math.PI / 2; // 从顶部开始，逆时针
|
||
const number = numbers[j];
|
||
const colorInfo = colorMap.find((m) => m.number === number);
|
||
dots.push({
|
||
number,
|
||
color: colorInfo?.color || '#000',
|
||
angle,
|
||
});
|
||
}
|
||
|
||
groups.push({
|
||
sequence,
|
||
dots,
|
||
});
|
||
}
|
||
|
||
this.codeData = {
|
||
colorMap,
|
||
startNumber,
|
||
groups,
|
||
};
|
||
|
||
this.drawCanvas();
|
||
},
|
||
});
|