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

feat:V2.5.2 图形符号配对

Browse Source
This commit is contained in:
R524809
2025-12-17 10:43:56 +08:00
parent d1a41602a7
commit b534972355
19 changed files with 718 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/app.json
+2 -1
View File
@@ -27,7 +27,8 @@
"pages": [
"gridDrawing/gridDrawing",
"shape/shape",
"positionColoring/positionColoring"
"positionColoring/positionColoring",
"shapeSymbol/shapeSymbol"
],
"independent": false
}
miniprogram/constants/colors.ts
+42
View File
@@ -85,6 +85,48 @@ export const WATER_COLORS = {
],
};
/**
* 数字颜色映射（柔和12色）
* 用于数学页面的数字显示和涂色
*/
export const NUMBER_COLORS: Record<number, string> = {
1: '#ED6D50', // 柔和红色
2: '#F9A857', // 柔和橙色
3: '#FFE176', // 柔和黄色
4: '#B2D94B', // 柔和黄绿色
5: '#53D1B6', // 柔和绿色
6: '#6CD2EA', // 柔和青色
7: '#79A7ED', // 柔和蓝色
8: '#9C98DE', // 柔和紫色
9: '#F2A4C0', // 柔和粉色
10: '#FC9B6C', // 柔和橙红色
11: '#BC8F71', // 柔和棕色
12: '#666666', // 柔和黑灰
13: '#FF2222', // 鲜艳大红
14: '#FF9900', // 鲜艳橙色
15: '#FFD700', // 鲜艳金黄
16: '#32CD32', // 鲜艳亮绿
17: '#21C5E4', // 鲜艳青色
18: '#3777FF', // 鲜艳蓝色
19: '#9D27E3', // 鲜艳紫色
20: '#FF40A0', // 鲜艳玫粉
};
/**
* 获取所有数字颜色数组
*/
export function getNumberColors(): string[] {
return Object.values(NUMBER_COLORS);
}
/**
* 随机获取一个数字颜色
*/
export function getRandomNumberColor(): string {
const colors = getNumberColors();
return colors[Math.floor(Math.random() * colors.length)];
}
export const PAPER_SIZE = {
A4: {
// width: 2480,
miniprogram/constants/focusFunctions.ts
+8
View File
@@ -16,6 +16,14 @@ export const FOCUS_FUNCTION_TYPES: FocusFunctionType[] = [
desc: '识别形状，涂一涂',
icon: '🔍',
},
// 图形符号配对
{
id: 'shape-symbol',
page: 'shapeSymbol',
title: '图形符号配对',
desc: '根据图形画对应的符号',
icon: '🔗',
},
// 方位涂涂乐
{
id: 'position-coloring',
miniprogram/constants/mathFunctions.ts
-34
View File
@@ -110,37 +110,3 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
icon: '🔢',
},
];
/**
* 数字颜色映射（柔和12色）
* 用于数学页面的数字显示和涂色
*/
export const NUMBER_COLORS: Record<number, string> = {
1: '#ED6D50', // 柔和红色
2: '#F9A857', // 柔和橙色
3: '#FFE176', // 柔和黄色
4: '#B2D94B', // 柔和黄绿色
5: '#53D1B6', // 柔和绿色
6: '#6CD2EA', // 柔和青色
7: '#79A7ED', // 柔和蓝色
8: '#9C98DE', // 柔和紫色
9: '#F2A4C0', // 柔和粉色
10: '#FC9B6C', // 柔和橙红色
11: '#BC8F71', // 柔和棕色
12: '#666666', // 柔和黑灰
};
/**
* 获取所有数字颜色数组
*/
export function getNumberColors(): string[] {
return Object.values(NUMBER_COLORS);
}
/**
* 随机获取一个数字颜色
*/
export function getRandomNumberColor(): string {
const colors = getNumberColors();
return colors[Math.floor(Math.random() * colors.length)];
}
miniprogram/focusPages/shapeSymbol/shapeSymbol.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",
"math-bottom-buttons": "../../components/math-bottom-buttons/math-bottom-buttons"
}
}
miniprogram/focusPages/shapeSymbol/shapeSymbol.ts
+155
View File
@@ -0,0 +1,155 @@
import ShapeSymbolDraw from '../shared/service/shapeSymbolDraw';
import { createFocusPage } from '../shared/common/focusPageMixin';
import { ShapeSymbolData } from '../shared/service/shapeSymbolDraw';
import { SHAPE_SYMBOL_SHAPES } from '../shared/shapes/shapeSymbolShapes';
import { getRandomNumberColor } from '../../constants/colors';
createFocusPage({
canvas: null as Canvas | null,
ctx: null as RenderingContext | null,
boxHeight: 0,
boxWidth: 0,
drawService: null as ShapeSymbolDraw | null,
gridData: null as ShapeSymbolData | null,
data: {
pageTitle: '图形符号配对',
functionId: '',
hasContent: false,
showShareDialog: false,
},
onLoad(options: { id?: string }) {
const functionId = options.id || 'shape-symbol';
this.setData({
functionId,
});
this.initPageInfo(functionId, '图形符号配对');
},
onReady() {
this.initCanvas({
createDrawService: (
canvas: Canvas,
ctx: RenderingContext,
options?: Record<string, any>,
) => {
return new ShapeSymbolDraw(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.gridData) {
return;
}
try {
await this.drawService.draw(this.gridData);
this.setData({ hasContent: true });
} catch (error) {
console.error('绘制失败:', error);
this.setData({ hasContent: false });
}
},
/**
* 随机生成
*/
onRandom() {
// 从9种图形中随机选择4个
const shuffled = [...SHAPE_SYMBOL_SHAPES].sort(
() => Math.random() - 0.5,
);
const selectedShapes = shuffled.slice(0, 4);
// 符号类型：加号、减号、乘号、对号
const symbols = ['+', '-', '×', '✓'];
// 随机打乱符号顺序
const shuffledSymbols = [...symbols].sort(() => Math.random() - 0.5);
// 创建图形和符号的映射关系（按位置对应），并为每个图形分配不同的颜色
const shapeColorMap = new Map<string, string>(); // 存储每个图形ID对应的颜色
const usedColors = new Set<string>(); // 记录已使用的颜色，确保4个图形颜色不同
const legendMapping: Array<{
shapeId: string;
symbol: string;
color: string;
}> = [];
for (let i = 0; i < 4; i++) {
const shape = selectedShapes[i];
// 为每个图形分配颜色，确保4个图形颜色都不相同
let color: string;
if (shapeColorMap.has(shape.id)) {
// 如果这个图形已经分配过颜色，使用之前的颜色
color = shapeColorMap.get(shape.id)!;
} else {
// 生成新颜色，确保不与已使用的颜色重复
do {
color = getRandomNumberColor();
} while (usedColors.has(color));
shapeColorMap.set(shape.id, color);
usedColors.add(color);
}
legendMapping.push({
shapeId: shape.id,
symbol: shuffledSymbols[i],
color: color,
});
}
// 生成练习区域的数据（6行7列，每两行一组）
const practiceRows: Array<
Array<{ shapeId: string | null; symbol: string | null }>
> = [];
for (let groupIndex = 0; groupIndex < 4; groupIndex++) {
// 每组第一行：随机展示图形
const shapeRow: Array<{
shapeId: string | null;
symbol: string | null;
}> = [];
for (let col = 0; col < 8; col++) {
// 随机选择一个图形（从选中的4个中选）
const randomShape =
selectedShapes[
Math.floor(Math.random() * selectedShapes.length)
];
shapeRow.push({ shapeId: randomShape.id, symbol: null });
}
practiceRows.push(shapeRow);
// 每组第二行：空着，让小朋友涂符号
const symbolRow: Array<{
shapeId: string | null;
symbol: string | null;
}> = [];
for (let col = 0; col < 8; col++) {
symbolRow.push({ shapeId: null, symbol: null });
}
practiceRows.push(symbolRow);
}
this.gridData = {
legendMapping,
practiceRows,
shapeColorMap: Object.fromEntries(shapeColorMap), // 转换为普通对象传递给绘制服务
};
this.drawCanvas();
},
});
miniprogram/focusPages/shapeSymbol/shapeSymbol.wxml
+37
View File
@@ -0,0 +1,37 @@
<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>
</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" />
miniprogram/focusPages/shapeSymbol/shapeSymbol.wxss
+1
View File
@@ -0,0 +1 @@
@import '../../base/baseDrawPage.wxss';
miniprogram/focusPages/shared/service/positionColoringDraw.ts
+1 -8
View File
@@ -121,14 +121,7 @@ class PositionColoringDraw extends BaseDrawService {
// 绘制虚线分隔
const dividerY = referenceGridY + gridHeight + 30;
ctx.strokeStyle = '#999';
ctx.lineWidth = 1;
ctx.setLineDash([4, 4]); // 虚线
ctx.beginPath();
ctx.moveTo(margin, dividerY);
ctx.lineTo(canvasWidth - margin, dividerY);
ctx.stroke();
ctx.setLineDash([]); // 重置为实线
this.drawDashedDivider(dividerY, margin);
// 绘制任务区域（三行三列）
const taskStartY = dividerY + 30;
miniprogram/focusPages/shared/service/shapeSymbolDraw.ts
+265
View File
@@ -0,0 +1,265 @@
/**
* 图形符号配对绘制服务
*/
import { BaseDrawService } from '../../../service/baseDraw';
import { drawShapeSymbolShape } from '../shapes/shapeSymbolShapes';
/**
* 图形符号配对数据
*/
export interface ShapeSymbolData {
/** 图例映射（4个图形和符号的对应关系） */
legendMapping: Array<{
shapeId: string;
symbol: string;
color: string;
}>;
/** 练习区域的行数据（6行，每两行一组） */
practiceRows: Array<
Array<{ shapeId: string | null; symbol: string | null }>
>;
/** 图形颜色映射 */
shapeColorMap: Record<string, string>;
}
/**
* 图形符号配对绘制服务
*/
class ShapeSymbolDraw extends BaseDrawService {
gridData: ShapeSymbolData | null = null;
constructor(
canvas: Canvas,
ctx: RenderingContext,
options?: Record<string, any>,
) {
super(canvas, ctx, options);
}
/**
* 绘制图形符号配对内容
*/
async draw(gridData: ShapeSymbolData) {
if (!gridData || !gridData.legendMapping || !gridData.practiceRows) {
return;
}
this.setPrintConfig();
this.gridData = gridData;
this.clear();
this.setPaper();
// 绘制Header
if (this.headerType !== 'minimal') {
await this.drawHeader();
} else {
this.drawMiniHeader();
}
// 绘制内容区域
this.drawDivider();
this.drawContent({
ctx: this.ctx,
gridData: this.gridData,
canvasWidth: this.canvasWidth,
startY: this.currentY,
});
}
/**
* 绘制内容区域
*/
private drawContent(params: {
ctx: RenderingContext;
gridData: ShapeSymbolData;
canvasWidth: number;
startY: number;
}): void {
const { ctx, gridData, canvasWidth } = params;
let { startY } = params;
startY = startY + 25;
const margin = 40; // 左右边距
const legendCols = 4; // 图例列数
const legendRows = 2; // 图例行数
const cellSize = 65; // 每个格子的大小
const gridWidth = cellSize * legendCols;
const gridHeight = cellSize * legendRows;
// 绘制参考网格（上面的九宫格）
const legendStartX =
margin + (canvasWidth - margin * 2 - gridWidth) / 2; // 居中
const legendStartY = startY;
// 绘制参考网格的网格线
this.drawGridLines(
ctx,
legendStartX,
legendStartY,
gridWidth,
gridHeight,
cellSize,
legendCols,
legendRows,
);
// 绘制图例内容
// 优化常量设置，减少重复计算，增强可维护性
// const legendColSpacing = 24; // 列间距(px)，如需调整只此一处
// const legendCellHeight = cellSize; // 图例格子的高度，当前与cellSize一致
gridData.legendMapping.forEach((mapping, index: number) => {
if (!mapping) return;
const shapeX = legendStartX + index * cellSize + cellSize / 2; // 图片居中，假设图片大小50x50
const shapeY = legendStartY + cellSize / 2;
const shapeSize = 42;
const shapeColor = mapping.color || '#000';
drawShapeSymbolShape(
ctx,
mapping.shapeId,
shapeX,
shapeY,
shapeSize,
shapeColor,
);
// 第二行：绘制符号（使用 emoji）
const symbolX = legendStartX + index * cellSize + cellSize / 2; // 图片居中，假设图片大小50x50
const symbolY = legendStartY + cellSize + cellSize / 2 + 5;
this.drawSymbol(ctx, symbolX, symbolY, mapping.symbol, 30);
});
const dividerY = legendStartY + legendRows * cellSize + 30;
this.drawDashedDivider(dividerY, margin);
// 绘制练习区域（六行七列，使用网格线，确保正方形格子）
const practiceStartY = dividerY + 30;
const practiceCols = 8;
const practiceRows = 8;
const practiceCellSize = 60; // 练习格子大小（正方形）
const practiceGridWidth = practiceCellSize * practiceCols;
const practiceGridHeight = practiceCellSize * practiceRows;
// 计算练习区域起始X位置（居中）
const practiceStartX =
margin + (canvasWidth - margin * 2 - practiceGridWidth) / 2;
// 绘制练习区域网格线（使用 drawGridLines）
this.drawGridLines(
ctx,
practiceStartX,
practiceStartY,
practiceGridWidth,
practiceGridHeight,
practiceCellSize,
practiceCols,
practiceRows,
);
// 绘制练习内容
for (let row = 0; row < practiceRows; row++) {
const practiceRow = gridData.practiceRows[row];
if (!practiceRow) continue;
const rowY = practiceStartY + row * practiceCellSize;
const cellCenterY = rowY + practiceCellSize / 2;
for (let col = 0; col < practiceCols; col++) {
const cell = practiceRow[col];
if (!cell) continue;
const colX = practiceStartX + col * practiceCellSize;
const cellCenterX = colX + practiceCellSize / 2;
// 如果第一行（图形行），绘制图形（使用相同颜色，无边框，居中）
if (row % 2 === 0 && cell.shapeId) {
const shapeSize = 42;
const shapeColor =
gridData.shapeColorMap[cell.shapeId] || '#000';
drawShapeSymbolShape(
ctx,
cell.shapeId,
cellCenterX,
cellCenterY,
shapeSize,
shapeColor,
);
}
// 第二行（符号行）留空，让小朋友涂符号
}
}
}
/**
* 绘制符号（使用 emoji 文字）
*/
private drawSymbol(
ctx: RenderingContext,
x: number,
y: number,
symbol: string,
fontSize: number,
): void {
ctx.save();
// 符号映射：将符号转换为 emoji
const symbolMap: Record<string, string> = {
'+': '➕',
'-': '➖',
'×': '✖️',
'✓': '✔️',
};
const emojiSymbol = symbolMap[symbol] || symbol;
ctx.font = `bold ${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#000';
ctx.fillText(emojiSymbol, x, y);
ctx.restore();
}
/**
* 绘制网格线
*/
private drawGridLines(
ctx: RenderingContext,
gridStartX: number,
gridStartY: number,
gridWidth: number,
gridHeight: number,
cellSize: number,
legendCols: number,
legendRows: number,
): void {
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
ctx.setLineDash([]); // 实线
// 绘制垂直线
for (let i = 0; i <= legendCols; i++) {
const x = gridStartX + i * cellSize;
ctx.beginPath();
ctx.moveTo(x, gridStartY);
ctx.lineTo(x, gridStartY + gridHeight);
ctx.stroke();
}
// 绘制水平线
for (let i = 0; i <= legendRows; i++) {
const y = gridStartY + i * cellSize;
ctx.beginPath();
ctx.moveTo(gridStartX, y);
ctx.lineTo(gridStartX + gridWidth, y);
ctx.stroke();
}
}
}
export default ShapeSymbolDraw;
miniprogram/focusPages/shared/shapes/shapeSymbolShapes.ts
+155
View File
@@ -0,0 +1,155 @@
/**
* 图形符号配对专用的图形定义
* 所有图形保持大小一致
*/
export interface ShapeSymbolShape {
id: string;
name: string;
}
export const SHAPE_SYMBOL_SHAPES: ShapeSymbolShape[] = [
{ id: 'circle', name: '圆形' },
{ id: 'square', name: '正方形' },
{ id: 'triangle', name: '三角形' },
{ id: 'diamond', name: '菱形' },
{ id: 'trapezoid', name: '梯形' },
{ id: 'ellipse', name: '椭圆' },
{ id: 'star', name: '五角星' },
{ id: 'pentagon', name: '五边形' },
{ id: 'heart', name: '心形' },
];
/**
* 绘制图形（无边框，仅填充）
* 所有图形保持相同的大小
*/
export function drawShapeSymbolShape(
ctx: RenderingContext,
shapeId: string,
x: number,
y: number,
size: number,
fillColor: string,
): void {
ctx.save();
ctx.translate(x, y);
const radius = size / 2;
ctx.fillStyle = fillColor;
switch (shapeId) {
case 'circle':
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2);
ctx.fill();
break;
case 'square':
ctx.fillRect(-radius, -radius, size, size);
break;
case 'triangle':
ctx.beginPath();
ctx.moveTo(0, -radius);
ctx.lineTo(-radius, radius);
ctx.lineTo(radius, radius);
ctx.closePath();
ctx.fill();
break;
case 'diamond':
ctx.beginPath();
ctx.moveTo(0, -radius);
ctx.lineTo(radius, 0);
ctx.lineTo(0, radius);
ctx.lineTo(-radius, 0);
ctx.closePath();
ctx.fill();
break;
case 'trapezoid':
ctx.beginPath();
const topWidth = radius * 0.6;
ctx.moveTo(-topWidth, -radius * 0.7);
ctx.lineTo(topWidth, -radius * 0.7);
ctx.lineTo(radius, radius * 0.7);
ctx.lineTo(-radius, radius * 0.7);
ctx.closePath();
ctx.fill();
break;
case 'ellipse':
ctx.beginPath();
ctx.ellipse(0, 0, radius * 0.8, radius * 0.6, 0, 0, Math.PI * 2);
ctx.fill();
break;
case 'star':
// 五角星
ctx.beginPath();
for (let i = 0; i < 5; i++) {
const angle1 = (i * 2 * Math.PI) / 5 - Math.PI / 2;
const angle2 = ((i + 0.5) * 2 * Math.PI) / 5 - Math.PI / 2;
const r1 = radius;
const r2 = radius * 0.4;
const x1 = Math.cos(angle1) * r1;
const y1 = Math.sin(angle1) * r1;
const x2 = Math.cos(angle2) * r2;
const y2 = Math.sin(angle2) * r2;
if (i === 0) {
ctx.moveTo(x1, y1);
} else {
ctx.lineTo(x1, y1);
}
ctx.lineTo(x2, y2);
}
ctx.closePath();
ctx.fill();
break;
case 'pentagon':
ctx.beginPath();
for (let i = 0; i < 5; i++) {
const angle = (i * 2 * Math.PI) / 5 - Math.PI / 2;
const px = Math.cos(angle) * radius;
const py = Math.sin(angle) * radius;
if (i === 0) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
}
ctx.closePath();
ctx.fill();
break;
case 'heart':
// 爱心路径（参考 shapes.ts 中的 SVG 路径）
// SVG路径：M50,35 C35,20 20,35 25,50 C30,65 50,80 50,80 C50,80 70,65 75,50 C80,35 65,20 50,35Z
// SVG中心为(50,50)，高度约为60（从y=20到y=80）
// 使用scale=60使心形高度约为size，与其他图形保持一致
const scale = 60;
function tx(px: number) {
return ((px - 50) / scale) * size;
}
function ty(py: number) {
return ((py - 50) / scale) * size;
}
ctx.beginPath();
ctx.moveTo(tx(50), ty(35));
ctx.bezierCurveTo(tx(35), ty(20), tx(20), ty(35), tx(25), ty(50));
ctx.bezierCurveTo(tx(30), ty(65), tx(50), ty(80), tx(50), ty(80));
ctx.bezierCurveTo(tx(50), ty(80), tx(70), ty(65), tx(75), ty(50));
ctx.bezierCurveTo(tx(80), ty(35), tx(65), ty(20), tx(50), ty(35));
ctx.closePath();
ctx.fill();
break;
default:
// 默认绘制圆形
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2);
ctx.fill();
}
ctx.restore();
}
miniprogram/mathPages/missingNumber/missingNumber.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { getRandomNumberColor } from '../../constants/mathFunctions';
import { getRandomNumberColor } from '../../constants/colors';
import MissingNumberDraw from '../shared/service/missingNumberDraw';
import {
createMathPage,
miniprogram/mathPages/shared/service/countMatchContentDraw.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { getImage } from '../../../utils/index';
import { getRandomNumberColor } from '../../../constants/mathFunctions';
import { getRandomNumberColor } from '../../../constants/colors';
interface DrawCountMatchContentParams {
canvas: WechatMiniprogram.Canvas;
miniprogram/mathPages/shared/service/countingSelectContentDraw.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { getImage } from '../../../utils/index';
import { getRandomNumberColor } from '../../../constants/mathFunctions';
import { getRandomNumberColor } from '../../../constants/colors';
interface DrawCountingSelectContentParams {
canvas: WechatMiniprogram.Canvas;
miniprogram/mathPages/shared/service/numberColorContentDraw.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { getNumberColors } from '../../../constants/mathFunctions';
import { getNumberColors } from '../../../constants/colors';
interface DrawNumberColorContentParams {
canvas: WechatMiniprogram.Canvas;
miniprogram/mathPages/shared/service/numberDecomposeContentDraw.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { getImage } from '../../../utils/index';
import { getRandomNumberColor } from '../../../constants/mathFunctions';
import { getRandomNumberColor } from '../../../constants/colors';
interface DrawNumberDecomposeContentParams {
canvas: WechatMiniprogram.Canvas;
miniprogram/mathPages/shared/service/numberPreviewDraw.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { getImage } from '../../../utils/index';
import { NUMBER_COLORS } from '../../../constants/mathFunctions';
import { NUMBER_COLORS } from '../../../constants/colors';
/**
* 数字到英文单词的映射
miniprogram/service/baseDraw.ts
+25
View File
@@ -146,4 +146,29 @@ export class BaseDrawService {
this.currentY = dividerY + 10; // 分割线下方10px间距
}
/**
* 绘制虚线分割线（逻辑像素，尺寸除以3）
* @param y 分割线的Y坐标
* @param margin 左右边距，默认为40
* @param color 线条颜色，默认为'#999'
* @param lineWidth 线条宽度，默认为1
*/
drawDashedDivider(
y: number,
margin: number = 40,
color: string = '#999',
lineWidth: number = 1,
) {
const { ctx, canvasWidth } = this;
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.setLineDash([4, 4]); // 虚线
ctx.beginPath();
ctx.moveTo(margin, y);
ctx.lineTo(canvasWidth - margin, y);
ctx.stroke();
ctx.setLineDash([]); // 重置为实线
}
}
project.private.config.json
+9 -2
View File
@@ -23,12 +23,19 @@
"condition": {
"miniprogram": {
"list": [
{
"name": "focusPages/shapeSymbol/shapeSymbol",
"pathName": "focusPages/shapeSymbol/shapeSymbol",
"query": "id=shape-symbol",
"scene": null,
"launchMode": "default"
},
{
"name": "focusPages/positionColoring/positionColoring",
"pathName": "focusPages/positionColoring/positionColoring",
"query": "id=position-coloring",
"scene": null,
"launchMode": "default"
"launchMode": "default",
"scene": null
},
{
"name": "pages/focusIndex/focusIndex",