133 lines
4.1 KiB
TypeScript
133 lines
4.1 KiB
TypeScript
import NumberSortDraw from '../shared/service/numberSortDraw';
|
|
import {
|
|
createMathPage,
|
|
CanvasDataState,
|
|
} from '../shared/common/mathPageMixin';
|
|
import { NumberSortData } from '../shared/service/numberSortDraw';
|
|
import { NUMBER_COLORS, getNumberColors } from '../../constants/colors';
|
|
|
|
createMathPage({
|
|
canvas: null as Canvas | null,
|
|
ctx: null as RenderingContext | null,
|
|
boxHeight: 0,
|
|
boxWidth: 0,
|
|
drawService: null as NumberSortDraw | null,
|
|
sortData: null as NumberSortData | null,
|
|
|
|
data: {
|
|
pageTitle: '数字排序',
|
|
functionId: '',
|
|
hasContent: false,
|
|
showShareDialog: false,
|
|
} as CanvasDataState,
|
|
|
|
onLoad(options: { id?: string }) {
|
|
const functionId = options.id || 'number-sort';
|
|
this.setData({
|
|
functionId,
|
|
});
|
|
this.initPageInfo(functionId, '数字排序');
|
|
},
|
|
|
|
onReady() {
|
|
this.initCanvas({
|
|
createDrawService: (
|
|
canvas: Canvas,
|
|
ctx: RenderingContext,
|
|
options?: Record<string, any>,
|
|
) => {
|
|
return new NumberSortDraw(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.sortData) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await this.drawService.draw(this.sortData);
|
|
this.setData({ hasContent: true });
|
|
} catch (error) {
|
|
console.error('绘制失败:', error);
|
|
this.setData({ hasContent: false });
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 随机生成
|
|
*/
|
|
onRandom() {
|
|
const groups: NumberSortData['groups'] = [];
|
|
const availableColors = getNumberColors();
|
|
|
|
// 生成6组题目
|
|
for (let i = 0; i < 6; i++) {
|
|
// 随机选择4个不同的数字（范围1-9）
|
|
const availableNumbers = Array.from({ length: 9 }, (_, i) => i + 1);
|
|
const selectedNumbers: number[] = [];
|
|
|
|
// 随机选择4个数字
|
|
for (let j = 0; j < 4; j++) {
|
|
const randomIndex = Math.floor(
|
|
Math.random() * availableNumbers.length,
|
|
);
|
|
selectedNumbers.push(
|
|
availableNumbers.splice(randomIndex, 1)[0],
|
|
);
|
|
}
|
|
|
|
// 打乱顺序
|
|
const shuffledNumbers = [...selectedNumbers];
|
|
for (let j = shuffledNumbers.length - 1; j > 0; j--) {
|
|
const k = Math.floor(Math.random() * (j + 1));
|
|
[shuffledNumbers[j], shuffledNumbers[k]] = [
|
|
shuffledNumbers[k],
|
|
shuffledNumbers[j],
|
|
];
|
|
}
|
|
|
|
// 为每个数字分配颜色和倾斜角度
|
|
const numbersWithColors = shuffledNumbers.map((number) => {
|
|
// 使用数字对应的颜色，如果数字超出范围则随机选择
|
|
const color =
|
|
NUMBER_COLORS[number as keyof typeof NUMBER_COLORS] ||
|
|
availableColors[
|
|
Math.floor(Math.random() * availableColors.length)
|
|
];
|
|
// 生成随机倾斜角度（-30度到+30度，转换为弧度）
|
|
const angleDegrees = (Math.random() - 0.5) * 60; // -30到+30度
|
|
const angle = (angleDegrees * Math.PI) / 180; // 转换为弧度
|
|
return {
|
|
number,
|
|
color,
|
|
angle,
|
|
};
|
|
});
|
|
|
|
groups.push({
|
|
numbers: numbersWithColors,
|
|
});
|
|
}
|
|
|
|
this.sortData = {
|
|
groups,
|
|
};
|
|
|
|
this.drawCanvas();
|
|
},
|
|
});
|