R524809
133 lines
3.7 KiB
TypeScript
133 lines
3.7 KiB
TypeScript
import CompareDraw from '../service/compareDraw';
|
||
import {
|
||
getMathPageCommonMethods,
|
||
CanvasDataState,
|
||
} from '../common/mathPageMixin';
|
||
|
||
// 获取公共方法
|
||
const commonMethods = getMathPageCommonMethods({
|
||
pagePath: 'compare/compare',
|
||
});
|
||
|
||
Page({
|
||
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, ctx, options) => {
|
||
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 };
|
||
},
|
||
|
||
// ========== 使用公共方法 ==========
|
||
initCanvas: commonMethods.initCanvas,
|
||
exportToPrint: commonMethods.exportToPrint,
|
||
onShareAppMessage: commonMethods.onShareAppMessage,
|
||
onShareTimeline: commonMethods.onShareTimeline,
|
||
onCloseShareDialog: commonMethods.onCloseShareDialog,
|
||
onShareSuccess: commonMethods.onShareSuccess,
|
||
initPageInfo: commonMethods.initPageInfo,
|
||
});
|