feat:添加按数字涂颜色
This commit is contained in:
R524809
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// /* ActionSheet 自定义样式 */
|
||||
// .custom-action-sheet {
|
||||
// border-radius: 16rpx 16rpx 0 0 !important;
|
||||
// }
|
||||
|
||||
/* 底部按钮区域 */
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,292 @@
|
||||
import { PAPER_SIZE } from '../../constants/colors';
|
||||
import { checkAndSaveImage } from '../../utils/saveImage';
|
||||
import { shouldShowShareGuide } from '../../utils/shareGuide';
|
||||
import CountMatchDraw from '../service/countMatchDraw';
|
||||
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 CountMatchDraw | NumberColorDraw | null,
|
||||
matchData: null as {
|
||||
leftNumbers: number[];
|
||||
rightNumbers: number[];
|
||||
} | null,
|
||||
colorData: null as {
|
||||
numbers: number[];
|
||||
} | null,
|
||||
|
||||
data: {
|
||||
pageTitle: '数一数，连一连',
|
||||
functionId: '',
|
||||
hasContent: false,
|
||||
showShareDialog: false,
|
||||
showTypeSelector: false,
|
||||
currentType: 'twelve-animals', // 'twelve-animals' 或 'fruits' 或 'circle' 或 'caterpillar'
|
||||
currentTypeName: '十二生肖',
|
||||
typeActions: [
|
||||
{ name: '十二生肖', value: 'twelve-animals' },
|
||||
{ name: '水果', value: 'fruits' },
|
||||
],
|
||||
},
|
||||
|
||||
onLoad(options: { id?: string }) {
|
||||
const functionId = options.id || 'counting-matching';
|
||||
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 === 'number-coloring') {
|
||||
this.setData({
|
||||
currentType: 'caterpillar',
|
||||
currentTypeName: '毛毛虫',
|
||||
typeActions: [
|
||||
{ name: '毛毛虫', value: 'caterpillar' },
|
||||
{ name: '圆圈', value: 'circle' },
|
||||
],
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
|
||||
// 根据 functionId 创建不同的绘制服务
|
||||
if (this.data.functionId === 'number-coloring') {
|
||||
this.drawService = new NumberColorDraw(
|
||||
canvasNode,
|
||||
ctx,
|
||||
{
|
||||
title: this.data.pageTitle,
|
||||
subTitle:
|
||||
'根据数字给相应的圆圈涂色，巩固数字与数量的认知',
|
||||
},
|
||||
);
|
||||
} else {
|
||||
this.drawService = new CountMatchDraw(
|
||||
canvasNode,
|
||||
ctx,
|
||||
{
|
||||
title: this.data.pageTitle,
|
||||
subTitle:
|
||||
'通过连线配对数字和对应的数量图形',
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// 初始随机生成
|
||||
this.onRandom();
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
|
||||
/**
|
||||
* 绘制Canvas内容
|
||||
*/
|
||||
async drawCanvas() {
|
||||
if (!this.ctx || !this.drawService) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (this.data.functionId === 'number-coloring') {
|
||||
if (!this.colorData) {
|
||||
return;
|
||||
}
|
||||
await (this.drawService as NumberColorDraw).draw(
|
||||
this.colorData,
|
||||
this.data.currentType,
|
||||
);
|
||||
} else {
|
||||
if (!this.matchData) {
|
||||
return;
|
||||
}
|
||||
await (this.drawService as CountMatchDraw).draw(
|
||||
this.matchData,
|
||||
this.data.currentType,
|
||||
);
|
||||
}
|
||||
this.setData({ hasContent: true });
|
||||
} catch (error) {
|
||||
console.error('绘制失败:', error);
|
||||
this.setData({ hasContent: false });
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 随机生成
|
||||
*/
|
||||
onRandom() {
|
||||
if (this.data.functionId === 'number-coloring') {
|
||||
// 按数字涂颜色模式：生成6个随机数字（1-10）
|
||||
const availableNumbers = Array.from(
|
||||
{ length: 10 },
|
||||
(_, i) => i + 1,
|
||||
);
|
||||
const numbers: number[] = [];
|
||||
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const randomIndex = Math.floor(
|
||||
Math.random() * availableNumbers.length,
|
||||
);
|
||||
const number = availableNumbers.splice(randomIndex, 1)[0];
|
||||
numbers.push(number);
|
||||
}
|
||||
|
||||
this.colorData = { numbers };
|
||||
} else {
|
||||
// 数一数连一连模式：生成5个不同的数字（1-10）
|
||||
const availableNumbers = Array.from(
|
||||
{ length: 10 },
|
||||
(_, i) => i + 1,
|
||||
);
|
||||
const leftNumbers: number[] = [];
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const randomIndex = Math.floor(
|
||||
Math.random() * availableNumbers.length,
|
||||
);
|
||||
const number = availableNumbers.splice(randomIndex, 1)[0];
|
||||
leftNumbers.push(number);
|
||||
}
|
||||
|
||||
// 复制数字数组并打乱顺序，作为右侧显示的数字
|
||||
const rightNumbers = [...leftNumbers];
|
||||
for (let i = rightNumbers.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[rightNumbers[i], rightNumbers[j]] = [
|
||||
rightNumbers[j],
|
||||
rightNumbers[i],
|
||||
];
|
||||
}
|
||||
|
||||
this.matchData = { leftNumbers, rightNumbers };
|
||||
}
|
||||
|
||||
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/countMatch/countMatch?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() {
|
||||
console.log('onCloseTypeSelector');
|
||||
this.setData({ showTypeSelector: false });
|
||||
},
|
||||
|
||||
/** 选择类型 */
|
||||
onSelectType(event: any) {
|
||||
const { name, value } = event.detail;
|
||||
this.setData({
|
||||
currentType: value,
|
||||
currentTypeName: name,
|
||||
showTypeSelector: false,
|
||||
});
|
||||
// 重新生成数据
|
||||
this.onRandom();
|
||||
},
|
||||
});
|
||||
@@ -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" />
|
||||
Reference in New Issue
Block a user