R524809
299 lines
10 KiB
TypeScript
299 lines
10 KiB
TypeScript
import { PAPER_SIZE } from '../../constants/colors';
|
|
import { checkAndSaveImage } from '../../utils/saveImage';
|
|
import { shouldShowShareGuide } from '../../utils/shareGuide';
|
|
import AdditionDraw from '../service/additionDraw';
|
|
import {
|
|
MATH_FUNCTION_TYPES,
|
|
MathFunctionType,
|
|
} from '../../constants/mathFunctions';
|
|
|
|
Page({
|
|
canvas: null as Canvas | null,
|
|
ctx: null as RenderingContext | null,
|
|
boxHeight: 0,
|
|
boxWidth: 0,
|
|
drawService: null as AdditionDraw | null,
|
|
calculationData: null as {
|
|
problems: Array<{
|
|
type: 'addition' | 'subtraction';
|
|
left: number;
|
|
right: number;
|
|
result: number;
|
|
}>;
|
|
} | null,
|
|
|
|
data: {
|
|
pageTitle: '加减法计算',
|
|
functionId: '',
|
|
hasContent: false,
|
|
showShareDialog: false,
|
|
showTypeSelector: false,
|
|
currentType: 'addition-5', // 'addition-5', 'addition-10', 'subtraction-10', 'addition-subtraction-10'
|
|
currentTypeName: '5以内加法',
|
|
typeActions: [
|
|
{ name: '5以内加法', value: 'addition-5' },
|
|
{ name: '10以内加法', value: 'addition-10' },
|
|
{ name: '10以内减法', value: 'subtraction-10' },
|
|
{ name: '10以内加减法', value: 'addition-subtraction-10' },
|
|
],
|
|
imageType: 'twelve-animals', // 图片类型：twelve-animals 或 fruits
|
|
},
|
|
|
|
onLoad(options: { id?: string }) {
|
|
const functionId = options.id || 'addition-5';
|
|
this.setData({ functionId });
|
|
|
|
const functionItem = MATH_FUNCTION_TYPES.find(
|
|
(item: MathFunctionType) => item.id === functionId,
|
|
);
|
|
|
|
const pageTitle = functionItem?.title || '加减法计算';
|
|
this.setData({ pageTitle });
|
|
wx.setNavigationBarTitle({ title: pageTitle });
|
|
|
|
// 根据 functionId 设置默认类型
|
|
if (functionId === 'addition-5') {
|
|
this.setData({
|
|
currentType: 'addition-5',
|
|
currentTypeName: '5以内加法',
|
|
});
|
|
} else if (functionId === 'addition-10') {
|
|
this.setData({
|
|
currentType: 'addition-10',
|
|
currentTypeName: '10以内加法',
|
|
});
|
|
} else if (functionId === 'subtraction-10') {
|
|
this.setData({
|
|
currentType: 'subtraction-10',
|
|
currentTypeName: '10以内减法',
|
|
});
|
|
} else if (functionId === 'addition-subtraction-10') {
|
|
this.setData({
|
|
currentType: 'addition-subtraction-10',
|
|
currentTypeName: '10以内加减法',
|
|
});
|
|
}
|
|
},
|
|
|
|
onReady() {
|
|
this.initCanvas();
|
|
},
|
|
|
|
/**
|
|
* 初始化Canvas
|
|
*/
|
|
initCanvas() {
|
|
const query = wx.createSelectorQuery();
|
|
query
|
|
.select('#canvasWrapper')
|
|
.boundingClientRect((rect) => {
|
|
if (rect) {
|
|
const { width, height } = PAPER_SIZE['A4'];
|
|
const boxWidth = rect.width;
|
|
const boxHeight = boxWidth / (width / height);
|
|
|
|
this.boxHeight = boxHeight;
|
|
this.boxWidth = boxWidth;
|
|
|
|
this.setData({ boxWidth, boxHeight });
|
|
|
|
const canvas = wx
|
|
.createSelectorQuery()
|
|
.select('#canvasContent');
|
|
canvas.fields({ node: true, size: true }).exec((res) => {
|
|
if (res[0]) {
|
|
const canvasNode = res[0].node;
|
|
const ctx = canvasNode.getContext('2d');
|
|
const dpr = wx.getSystemInfoSync().pixelRatio;
|
|
|
|
canvasNode.width = boxWidth * dpr;
|
|
canvasNode.height = boxHeight * dpr;
|
|
ctx.scale(dpr, dpr);
|
|
|
|
this.canvas = canvasNode;
|
|
this.ctx = ctx;
|
|
|
|
this.drawService = new AdditionDraw(
|
|
canvasNode,
|
|
ctx,
|
|
{
|
|
title: this.data.currentTypeName,
|
|
subTitle: '通过图形化方式学习加减法运算',
|
|
},
|
|
);
|
|
|
|
// 初始随机生成
|
|
this.onRandom();
|
|
}
|
|
});
|
|
}
|
|
})
|
|
.exec();
|
|
},
|
|
|
|
/**
|
|
* 绘制Canvas内容
|
|
*/
|
|
async drawCanvas() {
|
|
if (!this.ctx || !this.drawService || !this.calculationData) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 更新 Header 的 Title
|
|
if (this.drawService) {
|
|
this.drawService.options.title = this.data.currentTypeName;
|
|
}
|
|
|
|
await this.drawService.draw(
|
|
this.calculationData,
|
|
this.data.currentType,
|
|
);
|
|
this.setData({ hasContent: true });
|
|
} catch (error) {
|
|
console.error('绘制失败:', error);
|
|
this.setData({ hasContent: false });
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 随机生成
|
|
*/
|
|
onRandom() {
|
|
const problems: Array<{
|
|
type: 'addition' | 'subtraction';
|
|
left: number;
|
|
right: number;
|
|
result: number;
|
|
}> = [];
|
|
|
|
const type = this.data.currentType;
|
|
|
|
// 生成6道题目
|
|
for (let i = 0; i < 5; i++) {
|
|
if (type === 'addition-5') {
|
|
// 5以内加法：和 ≤ 5
|
|
// left >= 1, right >= 1, left + right <= 5
|
|
const maxSum = 5;
|
|
const left = Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 4
|
|
const maxRight = maxSum - left; // 确保 left + right <= 5
|
|
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
|
const result = left + right;
|
|
problems.push({ type: 'addition', left, right, result });
|
|
} else if (type === 'addition-10') {
|
|
// 10以内加法：和 ≤ 10
|
|
// left >= 1, right >= 1, left + right <= 10
|
|
const maxSum = 10;
|
|
const left = Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 9
|
|
const maxRight = maxSum - left; // 确保 left + right <= 10
|
|
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
|
const result = left + right;
|
|
problems.push({ type: 'addition', left, right, result });
|
|
} else if (type === 'subtraction-10') {
|
|
// 10以内减法：被减数 ≤ 10
|
|
// left <= 10, left - right = result, result >= 1
|
|
const maxLeft = 10;
|
|
const left = Math.floor(Math.random() * maxLeft) + 1; // 1 到 10
|
|
const maxRight = left - 1; // 确保 result >= 1
|
|
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
|
const result = left - right;
|
|
problems.push({ type: 'subtraction', left, right, result });
|
|
} else if (type === 'addition-subtraction-10') {
|
|
// 加减法混合
|
|
if (Math.random() < 0.5) {
|
|
// 加法：和 ≤ 10
|
|
const maxSum = 10;
|
|
const left = Math.floor(Math.random() * (maxSum - 1)) + 1; // 1 到 9
|
|
const maxRight = maxSum - left; // 确保 left + right <= 10
|
|
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
|
const result = left + right;
|
|
problems.push({ type: 'addition', left, right, result });
|
|
} else {
|
|
// 减法：被减数 ≤ 10
|
|
const maxLeft = 10;
|
|
const left = Math.floor(Math.random() * maxLeft) + 1; // 1 到 10
|
|
const maxRight = left - 1; // 确保 result >= 1
|
|
const right = Math.floor(Math.random() * maxRight) + 1; // 1 到 maxRight
|
|
const result = left - right;
|
|
problems.push({ type: 'subtraction', left, right, result });
|
|
}
|
|
}
|
|
}
|
|
|
|
this.calculationData = { problems };
|
|
this.drawCanvas();
|
|
},
|
|
|
|
/**
|
|
* 导出打印
|
|
*/
|
|
exportToPrint() {
|
|
if (!this.canvas || !this.data.hasContent) {
|
|
return;
|
|
}
|
|
|
|
if (shouldShowShareGuide()) {
|
|
this.setData({ showShareDialog: true });
|
|
return;
|
|
}
|
|
|
|
checkAndSaveImage(this.canvas);
|
|
},
|
|
|
|
/**
|
|
* 分享小程序
|
|
*/
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '涂鸦丫-数学学习涂鸦卡',
|
|
path: `/mathPages/addition/addition?id=${this.data.functionId}`,
|
|
imageUrl:
|
|
'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
|
};
|
|
},
|
|
|
|
onShareTimeline() {
|
|
return {
|
|
title: '涂鸦丫-数学学习涂鸦卡',
|
|
query: `id=${this.data.functionId}`,
|
|
imageUrl:
|
|
'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
|
};
|
|
},
|
|
|
|
/** 关闭分享引导弹窗 */
|
|
onCloseShareDialog() {
|
|
this.setData({ showShareDialog: false });
|
|
},
|
|
|
|
/** 分享成功回调 */
|
|
onShareSuccess() {
|
|
this.setData({ showShareDialog: false });
|
|
if (this.canvas) {
|
|
checkAndSaveImage(this.canvas);
|
|
}
|
|
},
|
|
|
|
/** 显示类型选择器 */
|
|
onShowTypeSelector() {
|
|
this.setData({ showTypeSelector: true });
|
|
},
|
|
|
|
/** 关闭类型选择器 */
|
|
onCloseTypeSelector() {
|
|
this.setData({ showTypeSelector: false });
|
|
},
|
|
|
|
/** 选择类型 */
|
|
onSelectType(event: any) {
|
|
const { name, value } = event.detail;
|
|
this.setData({
|
|
currentType: value,
|
|
currentTypeName: name,
|
|
showTypeSelector: false,
|
|
});
|
|
// 重新生成数据
|
|
this.onRandom();
|
|
},
|
|
});
|