feat:2.5.6 广告组件优化
This commit is contained in:
@@ -32,7 +32,8 @@
|
|||||||
"colorPattern/colorPattern",
|
"colorPattern/colorPattern",
|
||||||
"matchConnect/matchConnect",
|
"matchConnect/matchConnect",
|
||||||
"lineRecognition/lineRecognition",
|
"lineRecognition/lineRecognition",
|
||||||
"gridReasoning/gridReasoning"
|
"gridReasoning/gridReasoning",
|
||||||
|
"codeConnect/codeConnect"
|
||||||
],
|
],
|
||||||
"independent": false
|
"independent": false
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
Component({
|
||||||
|
properties: {
|
||||||
|
/** 广告类型:focusDraw 或 mathDraw */
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
value: 'focusDraw',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<view class="draw-ad-container" wx:if="{{type === 'focusDraw'}}">
|
||||||
|
<ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
|
||||||
|
</view>
|
||||||
|
<view class="draw-ad-container" wx:if="{{type === 'mathDraw'}}">
|
||||||
|
<ad-custom unit-id="adunit-c9055fd69f1b8d13"></ad-custom>
|
||||||
|
</view>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
.draw-ad-container {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
@@ -64,6 +64,14 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
|
|||||||
desc: '仔细观察,推理出合并方格并连线',
|
desc: '仔细观察,推理出合并方格并连线',
|
||||||
icon: '🧩',
|
icon: '🧩',
|
||||||
},
|
},
|
||||||
|
// 译码连线
|
||||||
|
{
|
||||||
|
id: 'code-connect',
|
||||||
|
page: 'codeConnect',
|
||||||
|
title: '译码连线',
|
||||||
|
desc: '按照数字顺序,将数字对应的颜色连起来',
|
||||||
|
icon: '🔢',
|
||||||
|
},
|
||||||
// 格子仿画
|
// 格子仿画
|
||||||
{
|
{
|
||||||
id: 'grid-drawing-3x3',
|
id: 'grid-drawing-3x3',
|
||||||
|
|||||||
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"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",
|
||||||
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,150 @@
|
|||||||
|
import CodeConnectDraw from '../shared/service/codeConnectDraw';
|
||||||
|
import { createFocusPage } from '../shared/common/focusPageMixin';
|
||||||
|
import { CodeConnectData } from '../shared/service/codeConnectDraw';
|
||||||
|
import { WATER_COLORS } from '../../constants/colors';
|
||||||
|
|
||||||
|
createFocusPage({
|
||||||
|
canvas: null as Canvas | null,
|
||||||
|
ctx: null as RenderingContext | null,
|
||||||
|
boxHeight: 0,
|
||||||
|
boxWidth: 0,
|
||||||
|
drawService: null as CodeConnectDraw | null,
|
||||||
|
codeData: null as CodeConnectData | null,
|
||||||
|
|
||||||
|
data: {
|
||||||
|
pageTitle: '译码连线',
|
||||||
|
functionId: '',
|
||||||
|
hasContent: false,
|
||||||
|
showShareDialog: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad(options: { id?: string }) {
|
||||||
|
const functionId = options.id || 'code-connect';
|
||||||
|
this.setData({
|
||||||
|
functionId,
|
||||||
|
});
|
||||||
|
this.initPageInfo(functionId, '译码连线');
|
||||||
|
},
|
||||||
|
|
||||||
|
onReady() {
|
||||||
|
this.initCanvas({
|
||||||
|
createDrawService: (
|
||||||
|
canvas: Canvas,
|
||||||
|
ctx: RenderingContext,
|
||||||
|
options?: Record<string, any>,
|
||||||
|
) => {
|
||||||
|
return new CodeConnectDraw(canvas, ctx, options);
|
||||||
|
},
|
||||||
|
drawServiceOptions: {
|
||||||
|
title: this.data.pageTitle,
|
||||||
|
subTitle: '按照数字顺序,将数字对应的颜色连起来',
|
||||||
|
functionId: this.data.functionId,
|
||||||
|
},
|
||||||
|
onCanvasReady: () => {
|
||||||
|
// 初始随机生成
|
||||||
|
this.onRandom();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 绘制Canvas内容
|
||||||
|
*/
|
||||||
|
async drawCanvas() {
|
||||||
|
if (!this.ctx || !this.drawService || !this.codeData) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.drawService.draw(this.codeData);
|
||||||
|
this.setData({ hasContent: true });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('绘制失败:', error);
|
||||||
|
this.setData({ hasContent: false });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 随机生成
|
||||||
|
*/
|
||||||
|
onRandom() {
|
||||||
|
// 随机选择起始数字:1、2或3
|
||||||
|
const startNumberOptions = [1, 2, 3];
|
||||||
|
const startNumber =
|
||||||
|
startNumberOptions[
|
||||||
|
Math.floor(Math.random() * startNumberOptions.length)
|
||||||
|
];
|
||||||
|
|
||||||
|
// 生成8个连续的数字(1-8、2-9或3-10)
|
||||||
|
const numbers: number[] = [];
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
numbers.push(startNumber + i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从WATER_COLORS.extended24中随机选择8种不重复的颜色
|
||||||
|
const colorIndices = Array.from(
|
||||||
|
{ length: WATER_COLORS.extended24.length },
|
||||||
|
(_, i) => i,
|
||||||
|
);
|
||||||
|
const shuffledIndices = [...colorIndices].sort(
|
||||||
|
() => Math.random() - 0.5,
|
||||||
|
);
|
||||||
|
const selectedIndices = shuffledIndices.slice(0, 8);
|
||||||
|
|
||||||
|
// 创建颜色映射
|
||||||
|
const colorMap = numbers.map((number, index) => ({
|
||||||
|
number,
|
||||||
|
color: WATER_COLORS.extended24[selectedIndices[index]].hex,
|
||||||
|
}));
|
||||||
|
|
||||||
|
// 生成4个组的题目
|
||||||
|
const groups: Array<{
|
||||||
|
sequence: number[];
|
||||||
|
dots: Array<{
|
||||||
|
number: number;
|
||||||
|
color: string;
|
||||||
|
angle: number;
|
||||||
|
}>;
|
||||||
|
}> = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < 4; i++) {
|
||||||
|
// 从当前数字范围中随机选择6个数字(不重复)
|
||||||
|
const shuffledNumbers = [...numbers].sort(
|
||||||
|
() => Math.random() - 0.5,
|
||||||
|
);
|
||||||
|
const sequence = shuffledNumbers.slice(0, 5);
|
||||||
|
|
||||||
|
// 生成8个圆点的位置(圆形分布)
|
||||||
|
const dots: Array<{
|
||||||
|
number: number;
|
||||||
|
color: string;
|
||||||
|
angle: number;
|
||||||
|
}> = [];
|
||||||
|
|
||||||
|
// 8个圆点均匀分布在圆周上
|
||||||
|
for (let j = 0; j < 8; j++) {
|
||||||
|
const angle = (j / 8) * Math.PI * 2 - Math.PI / 2; // 从顶部开始,逆时针
|
||||||
|
const number = numbers[j];
|
||||||
|
const colorInfo = colorMap.find((m) => m.number === number);
|
||||||
|
dots.push({
|
||||||
|
number,
|
||||||
|
color: colorInfo?.color || '#000',
|
||||||
|
angle,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
groups.push({
|
||||||
|
sequence,
|
||||||
|
dots,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.codeData = {
|
||||||
|
colorMap,
|
||||||
|
startNumber,
|
||||||
|
groups,
|
||||||
|
};
|
||||||
|
|
||||||
|
this.drawCanvas();
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<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">
|
||||||
|
<toy-button
|
||||||
|
class="random-button"
|
||||||
|
type="primary"
|
||||||
|
bind:click="onRandom"
|
||||||
|
width="100%"
|
||||||
|
height="80rpx"
|
||||||
|
icon="refresh"
|
||||||
|
icon-class-prefix="toy-icon">
|
||||||
|
随机生成
|
||||||
|
</toy-button>
|
||||||
|
</view>
|
||||||
|
<draw-ad type="focusDraw"></draw-ad>
|
||||||
|
</view>
|
||||||
|
<view class="empty"></view>
|
||||||
|
</view>
|
||||||
|
<math-bottom-buttons
|
||||||
|
disabled="{{!hasContent}}"
|
||||||
|
bind:share="onShareAppMessage"
|
||||||
|
bind:export="exportToPrint" />
|
||||||
|
<share-guide-popup
|
||||||
|
show="{{showShareDialog}}"
|
||||||
|
bind:onClose="onCloseShareDialog"
|
||||||
|
bind:onShareSuccess="onShareSuccess" />
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
@import '../../base/baseDrawPage.wxss';
|
||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"toy-button": "../../ui/button/button",
|
"toy-button": "../../ui/button/button",
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
随机生成
|
随机生成
|
||||||
</toy-button>
|
</toy-button>
|
||||||
</view>
|
</view>
|
||||||
<ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
|
<draw-ad type="focusDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-type-selector": "../../components/math-type-selector/math-type-selector",
|
"math-type-selector": "../../components/math-type-selector/math-type-selector",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
type-actions="{{typeActions}}"
|
type-actions="{{typeActions}}"
|
||||||
bind:select="onSelectType"
|
bind:select="onSelectType"
|
||||||
bind:random="onRandom" />
|
bind:random="onRandom" />
|
||||||
<ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
|
<draw-ad type="focusDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
"math-type-selector": "../../components/math-type-selector/math-type-selector"
|
"math-type-selector": "../../components/math-type-selector/math-type-selector",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
type-actions="{{operatorTypeActions}}"
|
type-actions="{{operatorTypeActions}}"
|
||||||
bind:select="onSelectType"
|
bind:select="onSelectType"
|
||||||
bind:random="onRandom" />
|
bind:random="onRandom" />
|
||||||
<ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
|
<draw-ad type="focusDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"toy-button": "../../ui/button/button",
|
"toy-button": "../../ui/button/button",
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
随机生成
|
随机生成
|
||||||
</toy-button>
|
</toy-button>
|
||||||
</view>
|
</view>
|
||||||
<ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
|
<draw-ad type="focusDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"toy-button": "../../ui/button/button",
|
"toy-button": "../../ui/button/button",
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
随机生成
|
随机生成
|
||||||
</toy-button>
|
</toy-button>
|
||||||
</view>
|
</view>
|
||||||
<ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
|
<draw-ad type="focusDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"toy-button": "../../ui/button/button",
|
"toy-button": "../../ui/button/button",
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
随机生成
|
随机生成
|
||||||
</toy-button>
|
</toy-button>
|
||||||
</view>
|
</view>
|
||||||
<ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
|
<draw-ad type="focusDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -13,6 +13,7 @@
|
|||||||
"shape-card": "../../components/shape-card/shape-card",
|
"shape-card": "../../components/shape-card/shape-card",
|
||||||
"shape-picker": "../../components/shape-picker/shape-picker",
|
"shape-picker": "../../components/shape-picker/shape-picker",
|
||||||
"color-picker": "../../components/color-picker/color-picker",
|
"color-picker": "../../components/color-picker/color-picker",
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup"
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -64,7 +64,7 @@
|
|||||||
class="canvas-content"
|
class="canvas-content"
|
||||||
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
|
style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
|
||||||
</view>
|
</view>
|
||||||
<ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
|
<draw-ad type="focusDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"toy-button": "../../ui/button/button",
|
"toy-button": "../../ui/button/button",
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
随机生成
|
随机生成
|
||||||
</toy-button>
|
</toy-button>
|
||||||
</view>
|
</view>
|
||||||
<ad-custom unit-id="adunit-89cff2de998f1146"></ad-custom>
|
<draw-ad type="focusDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -0,0 +1,221 @@
|
|||||||
|
/**
|
||||||
|
* 译码连线绘制服务
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { BaseDrawService } from '../../../service/baseDraw';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 译码连线数据
|
||||||
|
*/
|
||||||
|
export interface CodeConnectData {
|
||||||
|
/** 参考区域:数字到颜色的映射(8个数字,可能是1-8、2-9、3-10) */
|
||||||
|
colorMap: Array<{
|
||||||
|
number: number; // 数字(可能是1-8、2-9、3-10)
|
||||||
|
color: string;
|
||||||
|
}>;
|
||||||
|
/** 起始数字(1、2或3) */
|
||||||
|
startNumber: number;
|
||||||
|
/** 内容区域:4个组的题目 */
|
||||||
|
groups: Array<{
|
||||||
|
/** 数字序列(6个数字,用-连接) */
|
||||||
|
sequence: number[];
|
||||||
|
/** 圆环内圆点的位置和颜色(8个圆点,圆形分布) */
|
||||||
|
dots: Array<{
|
||||||
|
number: number; // 对应的数字
|
||||||
|
color: string; // 对应的颜色
|
||||||
|
angle: number; // 角度(弧度)
|
||||||
|
}>;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 译码连线绘制服务
|
||||||
|
*/
|
||||||
|
class CodeConnectDraw extends BaseDrawService {
|
||||||
|
codeData: CodeConnectData | null = null;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
canvas: Canvas,
|
||||||
|
ctx: RenderingContext,
|
||||||
|
options?: Record<string, any>,
|
||||||
|
) {
|
||||||
|
super(canvas, ctx, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 绘制译码连线内容
|
||||||
|
*/
|
||||||
|
async draw(codeData: CodeConnectData) {
|
||||||
|
if (!codeData || !codeData.colorMap || !codeData.groups) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setPrintConfig();
|
||||||
|
this.codeData = codeData;
|
||||||
|
this.clear();
|
||||||
|
this.setPaper();
|
||||||
|
|
||||||
|
// 绘制Header
|
||||||
|
if (this.headerType !== 'minimal') {
|
||||||
|
await this.drawHeader();
|
||||||
|
} else {
|
||||||
|
this.drawMiniHeader();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绘制内容区域
|
||||||
|
this.drawDivider();
|
||||||
|
await this.drawContent({
|
||||||
|
canvas: this.canvas,
|
||||||
|
ctx: this.ctx,
|
||||||
|
codeData: this.codeData,
|
||||||
|
canvasWidth: this.canvasWidth,
|
||||||
|
startY: this.currentY,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 绘制内容区域
|
||||||
|
*/
|
||||||
|
private async drawContent(params: {
|
||||||
|
canvas: WechatMiniprogram.Canvas;
|
||||||
|
ctx: RenderingContext;
|
||||||
|
codeData: CodeConnectData;
|
||||||
|
canvasWidth: number;
|
||||||
|
startY: number;
|
||||||
|
}): Promise<void> {
|
||||||
|
const { ctx, codeData, canvasWidth } = params;
|
||||||
|
let { startY } = params;
|
||||||
|
|
||||||
|
startY = startY + 25;
|
||||||
|
|
||||||
|
const margin = 40; // 左右边距
|
||||||
|
|
||||||
|
// ========== 上部参考区域 ==========
|
||||||
|
const referenceStartY = startY;
|
||||||
|
const referenceCellSize = 50; // 每个方格的大小
|
||||||
|
const referenceGridWidth = referenceCellSize * 8; // 网格总宽度(8列)
|
||||||
|
|
||||||
|
// 计算参考区域的起始X坐标(居中)
|
||||||
|
const referenceStartX =
|
||||||
|
margin + (canvasWidth - margin * 2 - referenceGridWidth) / 2;
|
||||||
|
|
||||||
|
// 使用drawGridLines绘制网格(2行8列,格子之间没有间距)
|
||||||
|
this.drawGridLines(
|
||||||
|
referenceStartX,
|
||||||
|
referenceStartY,
|
||||||
|
referenceCellSize,
|
||||||
|
referenceCellSize,
|
||||||
|
8,
|
||||||
|
2,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 绘制第一行:数字
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
const cellX = referenceStartX + i * referenceCellSize;
|
||||||
|
const cellY = referenceStartY;
|
||||||
|
|
||||||
|
// 绘制数字
|
||||||
|
const number = codeData.colorMap[i].number;
|
||||||
|
ctx.fillStyle = '#000';
|
||||||
|
ctx.font = 'bold 24px Arial';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.textBaseline = 'middle';
|
||||||
|
ctx.fillText(
|
||||||
|
number.toString(),
|
||||||
|
cellX + referenceCellSize / 2,
|
||||||
|
cellY + referenceCellSize / 2,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绘制第二行:圆点
|
||||||
|
const dotRowY = referenceStartY + referenceCellSize;
|
||||||
|
const dotRadius = 15; // 圆点半径
|
||||||
|
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
const cellX = referenceStartX + i * referenceCellSize;
|
||||||
|
const cellY = dotRowY;
|
||||||
|
|
||||||
|
// 绘制圆点(有边框)
|
||||||
|
const dotX = cellX + referenceCellSize / 2;
|
||||||
|
const dotY = cellY + referenceCellSize / 2;
|
||||||
|
const color = codeData.colorMap[i].color;
|
||||||
|
this.drawDot(ctx, dotX, dotY, dotRadius, color, '#000');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 虚线分割 ==========
|
||||||
|
const dividerY = dotRowY + referenceCellSize + 30;
|
||||||
|
this.drawDashedDivider(dividerY, margin);
|
||||||
|
|
||||||
|
// ========== 下部内容区域 ==========
|
||||||
|
const contentStartY = dividerY + 40;
|
||||||
|
const groupSpacingX = 80; // 一行中两组之间的间距
|
||||||
|
const groupSpacingY = 45; // 行之间的间距
|
||||||
|
const textCircleSpacing = 15; // 数字文本与圆环的间距
|
||||||
|
const circleRadius = 90; // 大圆环半径
|
||||||
|
const dotPadding = 10; // 圆点距离圆环边线的间距
|
||||||
|
const innerRadius = circleRadius - dotPadding - dotRadius; // 圆点分布圆的半径
|
||||||
|
const textHeight = 25; // 数字文本的高度
|
||||||
|
|
||||||
|
// 计算每组的总宽度(包括圆环)
|
||||||
|
const groupWidth = circleRadius * 2;
|
||||||
|
const totalGroupsWidth = 2 * groupWidth + groupSpacingX;
|
||||||
|
const groupsStartX =
|
||||||
|
margin + (canvasWidth - margin * 2 - totalGroupsWidth) / 2;
|
||||||
|
|
||||||
|
// 绘制4个组(两行两列)
|
||||||
|
for (let row = 0; row < 2; row++) {
|
||||||
|
for (let col = 0; col < 2; col++) {
|
||||||
|
const groupIndex = row * 2 + col;
|
||||||
|
const group = codeData.groups[groupIndex];
|
||||||
|
if (!group) continue;
|
||||||
|
|
||||||
|
const groupX =
|
||||||
|
groupsStartX + col * (groupWidth + groupSpacingX);
|
||||||
|
const groupY =
|
||||||
|
contentStartY +
|
||||||
|
row *
|
||||||
|
(circleRadius * 2 +
|
||||||
|
textHeight +
|
||||||
|
groupSpacingY +
|
||||||
|
textCircleSpacing);
|
||||||
|
|
||||||
|
// 绘制大圆环
|
||||||
|
const circleCenterX = groupX + groupWidth / 2;
|
||||||
|
const circleCenterY =
|
||||||
|
groupY + textHeight + circleRadius + textCircleSpacing;
|
||||||
|
ctx.strokeStyle = '#888';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(
|
||||||
|
circleCenterX,
|
||||||
|
circleCenterY,
|
||||||
|
circleRadius,
|
||||||
|
0,
|
||||||
|
Math.PI * 2,
|
||||||
|
);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// 绘制数字序列(在圆环正上方)
|
||||||
|
const sequenceText = group.sequence.join('-');
|
||||||
|
ctx.fillStyle = '#000';
|
||||||
|
ctx.font = 'bold 20px Arial';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.textBaseline = 'bottom';
|
||||||
|
ctx.fillText(sequenceText, circleCenterX, groupY + textHeight);
|
||||||
|
|
||||||
|
// 绘制圆环内的8个圆点(圆形分布)
|
||||||
|
for (const dot of group.dots) {
|
||||||
|
const dotX =
|
||||||
|
circleCenterX + Math.cos(dot.angle) * innerRadius;
|
||||||
|
const dotY =
|
||||||
|
circleCenterY + Math.sin(dot.angle) * innerRadius;
|
||||||
|
|
||||||
|
// 绘制圆点(有边框)
|
||||||
|
this.drawDot(ctx, dotX, dotY, dotRadius, dot.color, '#000');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CodeConnectDraw;
|
||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-type-selector": "../../components/math-type-selector/math-type-selector",
|
"math-type-selector": "../../components/math-type-selector/math-type-selector",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
bind:select="onSelectType"
|
bind:select="onSelectType"
|
||||||
bind:random="onRandom" />
|
bind:random="onRandom" />
|
||||||
|
|
||||||
<ad-custom unit-id="adunit-c9055fd69f1b8d13"></ad-custom>
|
<draw-ad type="mathDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"toy-button": "../../ui/button/button",
|
"toy-button": "../../ui/button/button",
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
随机生成
|
随机生成
|
||||||
</toy-button>
|
</toy-button>
|
||||||
</view>
|
</view>
|
||||||
<ad-custom unit-id="adunit-c9055fd69f1b8d13"></ad-custom>
|
<draw-ad type="mathDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-type-selector": "../../components/math-type-selector/math-type-selector",
|
"math-type-selector": "../../components/math-type-selector/math-type-selector",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
type-actions="{{typeActions}}"
|
type-actions="{{typeActions}}"
|
||||||
bind:select="onSelectType"
|
bind:select="onSelectType"
|
||||||
bind:random="onRandom" />
|
bind:random="onRandom" />
|
||||||
<ad-custom unit-id="adunit-c9055fd69f1b8d13"></ad-custom>
|
<draw-ad type="mathDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"toy-button": "../../ui/button/button",
|
"toy-button": "../../ui/button/button",
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
随机生成
|
随机生成
|
||||||
</toy-button>
|
</toy-button>
|
||||||
</view>
|
</view>
|
||||||
<ad-custom unit-id="adunit-c9055fd69f1b8d13"></ad-custom>
|
<draw-ad type="mathDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-type-selector": "../../components/math-type-selector/math-type-selector",
|
"math-type-selector": "../../components/math-type-selector/math-type-selector",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
type-actions="{{typeActions}}"
|
type-actions="{{typeActions}}"
|
||||||
bind:select="onSelectType"
|
bind:select="onSelectType"
|
||||||
bind:random="onRandom" />
|
bind:random="onRandom" />
|
||||||
<ad-custom unit-id="adunit-c9055fd69f1b8d13"></ad-custom>
|
<draw-ad type="mathDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
"math-type-selector": "../../components/math-type-selector/math-type-selector"
|
"math-type-selector": "../../components/math-type-selector/math-type-selector",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
type-actions="{{typeActions}}"
|
type-actions="{{typeActions}}"
|
||||||
bind:select="onSelectType"
|
bind:select="onSelectType"
|
||||||
bind:random="onRandom" />
|
bind:random="onRandom" />
|
||||||
<ad-custom unit-id="adunit-c9055fd69f1b8d13"></ad-custom>
|
<draw-ad type="mathDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
"usingComponents": {
|
"usingComponents": {
|
||||||
"toy-button": "../../ui/button/button",
|
"toy-button": "../../ui/button/button",
|
||||||
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
"share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
|
||||||
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
|
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons",
|
||||||
|
"draw-ad": "../../components/draw-ad/draw-ad"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -68,7 +68,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<ad-custom unit-id="adunit-c9055fd69f1b8d13"></ad-custom>
|
<draw-ad type="mathDraw"></draw-ad>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty"></view>
|
<view class="empty"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -368,6 +368,12 @@ export class BaseDrawService {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* 绘制圆点
|
* 绘制圆点
|
||||||
|
* @param ctx 绘制上下文
|
||||||
|
* @param x 圆点中心X坐标
|
||||||
|
* @param y 圆点中心Y坐标
|
||||||
|
* @param radius 圆点半径
|
||||||
|
* @param fillColor 填充颜色,默认为 '#93D333'
|
||||||
|
* @param strokeColor 边线颜色,如果传入则绘制边线,宽度为1,默认不绘制
|
||||||
*/
|
*/
|
||||||
drawDot(
|
drawDot(
|
||||||
ctx: RenderingContext,
|
ctx: RenderingContext,
|
||||||
@@ -375,10 +381,20 @@ export class BaseDrawService {
|
|||||||
y: number,
|
y: number,
|
||||||
radius: number,
|
radius: number,
|
||||||
fillColor?: string,
|
fillColor?: string,
|
||||||
|
strokeColor?: string,
|
||||||
) {
|
) {
|
||||||
ctx.fillStyle = fillColor ?? '#93D333';
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
||||||
|
|
||||||
|
// 绘制填充
|
||||||
|
ctx.fillStyle = fillColor ?? '#93D333';
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
|
|
||||||
|
// 绘制边线(如果提供了边线颜色)
|
||||||
|
if (strokeColor) {
|
||||||
|
ctx.strokeStyle = strokeColor;
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -23,12 +23,19 @@
|
|||||||
"condition": {
|
"condition": {
|
||||||
"miniprogram": {
|
"miniprogram": {
|
||||||
"list": [
|
"list": [
|
||||||
|
{
|
||||||
|
"name": "focusPages/codeConnect/codeConnect",
|
||||||
|
"pathName": "focusPages/codeConnect/codeConnect",
|
||||||
|
"query": "id=code-connect",
|
||||||
|
"scene": null,
|
||||||
|
"launchMode": "default"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "focusPages/gridReasoning/gridReasoning",
|
"name": "focusPages/gridReasoning/gridReasoning",
|
||||||
"pathName": "focusPages/gridReasoning/gridReasoning",
|
"pathName": "focusPages/gridReasoning/gridReasoning",
|
||||||
"query": "id=grid-reasoning",
|
"query": "id=grid-reasoning",
|
||||||
"scene": null,
|
"launchMode": "default",
|
||||||
"launchMode": "default"
|
"scene": null
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "focusPages/lineRecognition/lineRecognition",
|
"name": "focusPages/lineRecognition/lineRecognition",
|
||||||
|
|||||||
Reference in New Issue
Block a user