R524809
125 lines
3.4 KiB
TypeScript
125 lines
3.4 KiB
TypeScript
import CompareDraw from '../shared/service/compareDraw';
|
||
import {
|
||
createMathPage,
|
||
CanvasDataState,
|
||
} from '../shared/common/mathPageMixin';
|
||
|
||
// 获取公共方
|
||
|
||
createMathPage({
|
||
canvas: null as Canvas | null,
|
||
ctx: null as RenderingContext | null,
|
||
boxHeight: 0,
|
||
boxWidth: 0,
|
||
drawService: null as CompareDraw | null,
|
||
compareData: null as {
|
||
problems: Array<{
|
||
leftCount: number;
|
||
rightCount: number;
|
||
leftImageIndex: number;
|
||
rightImageIndex: number;
|
||
imageType: 'fruits' | 'twelve-animals';
|
||
}>;
|
||
} | null,
|
||
|
||
data: {
|
||
pageTitle: '数一数，比大小',
|
||
subTitle: '数一数，比较数量，在⭕️中填入＞、＜、＝',
|
||
functionId: '',
|
||
hasContent: false,
|
||
showShareDialog: false,
|
||
} as CanvasDataState,
|
||
|
||
onLoad(options: { id?: string }) {
|
||
const functionId = options.id || 'compare';
|
||
this.initPageInfo(functionId, '数一数，比大小');
|
||
},
|
||
|
||
onReady() {
|
||
this.initCanvas({
|
||
createDrawService: (
|
||
canvas: Canvas,
|
||
ctx: RenderingContext,
|
||
options?: Record<string, any>,
|
||
) => {
|
||
return new CompareDraw(canvas, ctx, options);
|
||
},
|
||
drawServiceOptions: {
|
||
subTitle: this.data.subTitle,
|
||
},
|
||
onCanvasReady: () => {
|
||
// Canvas 初始化完成后，生成初始数据
|
||
this.onRandom();
|
||
},
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 绘制Canvas内容
|
||
*/
|
||
async drawCanvas() {
|
||
if (!this.ctx || !this.drawService || !this.compareData) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await this.drawService.draw(this.compareData);
|
||
this.setData({ hasContent: true });
|
||
} catch (error) {
|
||
console.error('绘制失败:', error);
|
||
this.setData({ hasContent: false });
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 随机生成
|
||
*/
|
||
onRandom() {
|
||
this.generateCompareData();
|
||
this.drawCanvas();
|
||
},
|
||
|
||
/**
|
||
* 生成比较数据
|
||
*/
|
||
generateCompareData() {
|
||
const problems: Array<{
|
||
leftCount: number;
|
||
rightCount: number;
|
||
leftImageIndex: number;
|
||
rightImageIndex: number;
|
||
imageType: 'fruits' | 'twelve-animals';
|
||
}> = [];
|
||
|
||
// 生成6道题目
|
||
for (let i = 0; i < 12; i++) {
|
||
// 随机选择图片类型
|
||
const imageType: 'fruits' | 'twelve-animals' =
|
||
Math.random() < 0.5 ? 'fruits' : 'twelve-animals';
|
||
|
||
// 根据图片类型确定最大索引
|
||
const maxImageIndex = imageType === 'fruits' ? 22 : 12;
|
||
|
||
// 生成左右两边的数量（1-10）
|
||
const leftCount = Math.floor(Math.random() * 10) + 1;
|
||
const rightCount = Math.floor(Math.random() * 10) + 1;
|
||
|
||
// 随机选择图片索引
|
||
const leftImageIndex =
|
||
Math.floor(Math.random() * maxImageIndex) + 1;
|
||
const rightImageIndex =
|
||
Math.floor(Math.random() * maxImageIndex) + 1;
|
||
|
||
problems.push({
|
||
leftCount,
|
||
rightCount,
|
||
leftImageIndex,
|
||
rightImageIndex,
|
||
imageType,
|
||
});
|
||
}
|
||
|
||
this.compareData = { problems };
|
||
},
|
||
});
|