feat:数字学习卡
This commit is contained in:
R524809
@@ -47,22 +47,6 @@ page {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// .canvas-wrapper {
|
||||
// width: 100%;
|
||||
// margin-bottom: 40rpx;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// background: #f8f8f8;
|
||||
// border-radius: 12rpx;
|
||||
// padding: 20rpx;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
|
||||
// .canvas-content {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
}
|
||||
|
||||
/* 数字选择区域 */
|
||||
@@ -70,17 +54,18 @@ page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.number-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 60rpx;
|
||||
gap: 40rpx;
|
||||
width: 100%;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.number-item {
|
||||
height: 90rpx;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #e8e8e8;
|
||||
border-radius: 16rpx;
|
||||
@@ -90,26 +75,43 @@ page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08), 0 2rpx 4rpx rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1), 0 1rpx 2rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #93d333;
|
||||
box-shadow: 0 0 0 4rpx rgba(147, 211, 51, 0.2);
|
||||
box-shadow: 0 4rpx 16rpx rgba(147, 211, 51, 0.25), 0 0 0 4rpx rgba(147, 211, 51, 0.15);
|
||||
}
|
||||
|
||||
.number-text {
|
||||
font-size: 28rpx;
|
||||
color: #141414;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #141414;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.number-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 40rpx;
|
||||
|
||||
.number-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.random-button {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
/* 随机按钮样式 */
|
||||
&.random-button {
|
||||
@@ -134,7 +136,7 @@ page {
|
||||
}
|
||||
|
||||
.number-text {
|
||||
// flex: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@@ -154,13 +156,12 @@ page {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
height: 180rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15);
|
||||
padding: 0 24rpx;
|
||||
padding: 24rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
|
||||
@@ -1,12 +1,18 @@
|
||||
import { PAPER_SIZE } from '../../constants/colors';
|
||||
import { checkAndSaveImage } from '../../utils/saveImage';
|
||||
import { shouldShowShareGuide } from '../../utils/shareGuide';
|
||||
import NumberColorDraw from '../service/numberColorDraw';
|
||||
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 NumberColorDraw | null,
|
||||
|
||||
data: {
|
||||
pageTitle: '看数字，涂一涂', // 默认标题
|
||||
@@ -18,26 +24,17 @@ Page({
|
||||
|
||||
onLoad(options: { id?: string }) {
|
||||
// 根据id参数判断页面标题
|
||||
const functionId = options.id || 'number-find-color';
|
||||
const functionId = options.id || 'number-find';
|
||||
this.setData({
|
||||
functionId,
|
||||
});
|
||||
|
||||
// 根据functionId设置页面标题
|
||||
const titleMap: Record<string, string> = {
|
||||
'number-find-color': '看数字，涂一涂',
|
||||
'number-coloring': '数字涂色卡',
|
||||
'counting-matching': '数一数，连一连',
|
||||
'missing-number': '填上缺少的数字',
|
||||
compare: '数一数，比大小',
|
||||
'counting-select': '数一数，选一选',
|
||||
'counting-fill': '数一数，填一填',
|
||||
'addition-5': '5以内加法',
|
||||
'addition-10': '10以内加法',
|
||||
'addition-subtraction-10': '10以内加减法',
|
||||
};
|
||||
const functionItem = MATH_FUNCTION_TYPES.find(
|
||||
(item: MathFunctionType) => item.id === functionId,
|
||||
);
|
||||
|
||||
const pageTitle = titleMap[functionId] || '看数字，涂一涂';
|
||||
const pageTitle = functionItem?.title || '看数字，涂一涂';
|
||||
this.setData({
|
||||
pageTitle,
|
||||
});
|
||||
@@ -91,6 +88,26 @@ Page({
|
||||
this.canvas = canvasNode;
|
||||
this.ctx = ctx;
|
||||
|
||||
// 初始化绘制服务
|
||||
this.drawService = new NumberColorDraw(
|
||||
canvasNode,
|
||||
ctx,
|
||||
{
|
||||
title: this.data.pageTitle,
|
||||
subTitle: '找一找下面相同的数字，涂上颜色',
|
||||
functionId: this.data.functionId,
|
||||
},
|
||||
);
|
||||
|
||||
// 如果还没有选中数字，随机选择一个
|
||||
if (this.data.selectedNumber === 0) {
|
||||
const randomNumber =
|
||||
Math.floor(Math.random() * 10) + 1;
|
||||
this.setData({
|
||||
selectedNumber: randomNumber,
|
||||
});
|
||||
}
|
||||
|
||||
// 绘制初始内容
|
||||
this.drawCanvas();
|
||||
}
|
||||
@@ -103,34 +120,17 @@ Page({
|
||||
/**
|
||||
* 绘制Canvas内容
|
||||
*/
|
||||
drawCanvas() {
|
||||
if (!this.ctx) {
|
||||
async drawCanvas() {
|
||||
if (!this.ctx || !this.drawService) {
|
||||
return;
|
||||
}
|
||||
|
||||
const ctx = this.ctx;
|
||||
const width = this.boxWidth;
|
||||
const height = this.boxHeight;
|
||||
|
||||
// 清空画布
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// 设置背景色
|
||||
ctx.fillStyle = '#FFFFFF';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
// TODO: 根据选中的数字绘制内容
|
||||
if (this.data.selectedNumber > 0) {
|
||||
// 绘制示例：显示选中的数字
|
||||
ctx.fillStyle = '#141414';
|
||||
ctx.font = 'bold 120px sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(
|
||||
String(this.data.selectedNumber),
|
||||
width / 2,
|
||||
height / 2,
|
||||
);
|
||||
try {
|
||||
await this.drawService.draw(this.data.selectedNumber);
|
||||
} catch (error) {
|
||||
console.error('绘制失败:', error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -43,21 +43,28 @@
|
||||
|
||||
<!-- 第三行：9、10和随机按钮 -->
|
||||
<view class="number-row">
|
||||
<view
|
||||
wx:for="{{numberList}}"
|
||||
wx:key="index"
|
||||
wx:for-item="number"
|
||||
wx:if="{{index >= 8}}"
|
||||
class="number-item {{selectedNumber === number ? 'active' : ''}}"
|
||||
data-number="{{number}}"
|
||||
bind:tap="onSelectNumber">
|
||||
<view class="number-text">{{number}}</view>
|
||||
</view>
|
||||
<view class="number-item random-button" bind:tap="onRandom">
|
||||
<view class="random-icon">
|
||||
<text class="toy-icon toy-icon-refresh"></text>
|
||||
<view class="number-column">
|
||||
<view
|
||||
wx:for="{{numberList}}"
|
||||
wx:key="index"
|
||||
wx:for-item="number"
|
||||
wx:if="{{index >= 8}}"
|
||||
class="number-item {{selectedNumber === number ? 'active' : ''}}"
|
||||
data-number="{{number}}"
|
||||
bind:tap="onSelectNumber">
|
||||
<view class="number-text">{{number}}</view>
|
||||
</view>
|
||||
<view class="number-text">随机</view>
|
||||
</view>
|
||||
<view class="number-column">
|
||||
<toy-button
|
||||
style="width: 100%"
|
||||
type="primary"
|
||||
bind:click="onRandom"
|
||||
width="100%"
|
||||
icon="refresh"
|
||||
icon-class-prefix="toy-icon">
|
||||
随机
|
||||
</toy-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user