feat:2.5.6 广告组件优化
This commit is contained in:
R524809
@@ -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';
|
||||
Reference in New Issue
Block a user