joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:v2.4.3版本，10以内的加减计算

Browse Source
This commit is contained in:
R524809
2025-12-04 10:56:49 +08:00
parent 0da5bf1758
commit 7f8a9b1c4d
32 changed files with 1170 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/mathPages/addition/addition.json
+12
View File
@@ -0,0 +1,12 @@
{
"navigationBarTitleText": "加减法计算",
"navigationBarBackgroundColor": "#FFD719",
"homeButton": true,
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"toy-button": "../../ui/button/button",
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
"van-action-sheet": "../../miniprogram_npm/@vant/weapp/action-sheet/index"
}
}
miniprogram/mathPages/addition/addition.less
+101
View File
@@ -0,0 +1,101 @@
page {
background-color: #f6f6f6;
}
.page-container {
background-color: #f6f6f6;
padding: 0 24rpx;
box-sizing: border-box;
padding-bottom: 160rpx; // 为底部按钮预留空间
.empty {
height: 50rpx;
}
}
.wrapper {
background-color: #ffffff;
border-radius: 20rpx;
padding: 36rpx 24rpx;
box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
margin: 30rpx 0;
display: flex;
flex-direction: column;
.wrapper-title {
font-size: 32rpx;
color: #141414;
margin-bottom: 36rpx;
font-weight: bold;
text-align: center;
}
.canvas-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 400rpx;
background: #f8f9fa;
border-radius: 12rpx;
border: 2rpx dashed #dee2e6;
}
.canvas-content {
max-width: 100%;
border-radius: 8rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.random-button-area {
margin-top: 40rpx;
display: flex;
align-items: center;
gap: 20rpx;
.type-selector {
flex: 1; // 占据剩余空间
height: 80rpx;
background-color: #fff;
border: 2rpx solid #e5e5e5;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24rpx;
box-sizing: border-box;
.type-selector-text {
font-size: 28rpx;
color: #333;
}
.type-selector-arrow {
font-size: 20rpx;
color: #999;
}
}
.random-button {
flex: 2;
}
}
}
/* 底部按钮区域 */
.bottom-btn-box {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 180rpx;
display: flex;
justify-content: space-between;
background-color: #fff;
box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15);
padding: 24rpx;
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
border-radius: 16rpx 16rpx 0 0;
z-index: 2;
}
miniprogram/mathPages/addition/addition.ts
+298
View File
@@ -0,0 +1,298 @@
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();
},
});
miniprogram/mathPages/addition/addition.wxml
+69
View File
@@ -0,0 +1,69 @@
<view class="page-container">
<view class="wrapper">
<text class="wrapper-title">预览打印效果</text>
<!-- 预览打印效果 -->
<view id="canvasWrapper" class="canvas-wrapper">
<canvas
type="2d"
id="canvasContent"
class="canvas-content"
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
</view>
<!-- 随机生成按钮 -->
<view class="random-button-area">
<view class="type-selector" bind:tap="onShowTypeSelector">
<text class="type-selector-text">{{currentTypeName}}</text>
<text class="type-selector-arrow">▼</text>
</view>
<toy-button
class="random-button"
type="primary"
bind:click="onRandom"
width="100%"
height="80rpx"
icon="refresh"
icon-class-prefix="toy-icon">
随机生成
</toy-button>
</view>
<van-action-sheet
show="{{showTypeSelector}}"
actions="{{typeActions}}"
bind:select="onSelectType"
bind:cancel="onCloseTypeSelector"
bind:close="onCloseTypeSelector"
cancel-text="取消"
custom-class="custom-action-sheet" />
</view>
<view class="empty"></view>
</view>
<view class="bottom-btn-box">
<toy-button
openType="share"
type="green"
flat="{{true}}"
bind:click="onShareAppMessage"
width="220rpx"
height="80rpx"
icon="wechat"
icon-class-prefix="toy-icon">
分享
</toy-button>
<toy-button
type="primary"
flat="{{true}}"
bind:click="exportToPrint"
width="420rpx"
height="80rpx"
disabled="{{!hasContent}}"
icon="download"
icon-class-prefix="toy-icon">
下载打印
</toy-button>
</view>
<share-guide-popup
show="{{showShareDialog}}"
bind:onClose="onCloseShareDialog"
bind:onShareSuccess="onShareSuccess" />