R524809
73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import MultiplicationTableDraw from '../shared/service/multiplicationTableDraw';
|
|
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 MultiplicationTableDraw | null,
|
|
multiplicationTableData: null as {} | null,
|
|
|
|
data: {
|
|
pageTitle: '九九乘法表',
|
|
functionId: '',
|
|
hasContent: false,
|
|
showShareDialog: false,
|
|
} as CanvasDataState,
|
|
|
|
onLoad(options: { id?: string }) {
|
|
const functionId = options.id || 'multiplication-table';
|
|
this.setData({
|
|
pageTitle: '九九乘法表',
|
|
});
|
|
this.initPageInfo(functionId, '九九乘法表');
|
|
},
|
|
|
|
onReady() {
|
|
this.initCanvas({
|
|
createDrawService: (
|
|
canvas: Canvas,
|
|
ctx: RenderingContext,
|
|
options?: Record<string, any>,
|
|
) => {
|
|
return new MultiplicationTableDraw(canvas, ctx, options);
|
|
},
|
|
drawServiceOptions: {
|
|
title: '九九乘法表',
|
|
},
|
|
onCanvasReady: () => {
|
|
// 初始绘制
|
|
this.drawCanvas();
|
|
},
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 绘制Canvas内容
|
|
*/
|
|
async drawCanvas() {
|
|
if (!this.ctx || !this.drawService) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await this.drawService.draw({});
|
|
this.setData({ hasContent: true });
|
|
} catch (error) {
|
|
console.error('绘制失败:', error);
|
|
this.setData({ hasContent: false });
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 随机生成（重新绘制，颜色会随机变化）
|
|
*/
|
|
onRandom() {
|
|
this.drawCanvas();
|
|
},
|
|
});
|