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

feat:架构代码优化

Browse Source
This commit is contained in:
R524809
2025-12-11 13:02:44 +08:00
parent 2c32235568
commit 3c0e2af10d
89 changed files with 2774 additions and 2816 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/service/shapeDrawService.ts
+35 -181
View File
@@ -1,69 +1,8 @@
import { PAPER_SIZE } from '../constants/colors';
import { BaseDrawService } from './baseDraw';
import { ShapeCard } from '../constants/shapes';
import { drawShape } from './drawShape';
import {
drawHeader as drawHeaderCommon,
drawMiniHeader as drawMiniHeaderCommon,
} from './headerDrawService';
/**
* 计算图形在画布上的位置，避免重叠
* @param canvasWidth 画布宽度
* @param canvasHeight 画布高度
* @param shapeCount 图形数量
* @param shapeSize 图形大小
* @returns 图形位置数组
*/
function calculateShapePositions(
canvasWidth: number,
canvasHeight: number,
shapeCount: number,
shapeSize: number,
) {
const positions = [];
const padding = 80;
const minSpacing = shapeSize * 1.5; // 最小间距为图形大小的1.5倍
const availableWidth = canvasWidth - 2 * padding;
const availableHeight = canvasHeight - 2 * padding;
// 计算网格布局
const cols = Math.ceil(Math.sqrt(shapeCount));
const rows = Math.ceil(shapeCount / cols);
const cellWidth = availableWidth / cols;
const cellHeight = availableHeight / rows;
for (let i = 0; i < shapeCount; i++) {
const row = Math.floor(i / cols);
const col = i % cols;
// 在单元格内随机位置
const x =
padding +
col * cellWidth +
(cellWidth - shapeSize) / 2 +
(Math.random() - 0.5) * (cellWidth - shapeSize) * 0.3;
const y =
padding +
row * cellHeight +
(cellHeight - shapeSize) / 2 +
(Math.random() - 0.5) * (cellHeight - shapeSize) * 0.3;
positions.push({ x, y });
}
return positions;
}
class ShapeDrawService {
headerType: PrintHeader;
canvas: WechatMiniprogram.Canvas;
ctx: RenderingContext;
options: Record<string, any>;
paperSize: PaperSize;
currentX: number;
currentY: number;
class ShapeDrawService extends BaseDrawService {
shapes: ShapeCard[];
constructor(
@@ -72,116 +11,61 @@ class ShapeDrawService {
options?: Record<string, any>,
) {
options = options || {};
this.canvas = canvas;
this.ctx = ctx;
this.paperSize = 'A4';
this.options = {
appName: '涂鸦丫小程序',
appHint: '涂色|识字|画画|打印',
super(canvas, ctx, {
title: '找一找 涂 色',
subTitle: '给图形涂上相同的颜色',
...options,
};
this.currentX = 0;
this.currentY = 0;
});
this.shapes = [];
this.headerType = 'wechat'; // 默认值
this.setPrintConfig();
}
setPrintConfig() {
const printConfig = getApp().getPrintConfig();
this.headerType = printConfig.header;
this.options.appName = printConfig.appName;
}
draw(shapes: ShapeCard[]) {
async draw(shapes: ShapeCard[]) {
this.setPrintConfig();
this.shapes = shapes.slice(0, 6); // 最多6个图形
this.clear();
this.setPaper();
// 绘制Header
if (this.headerType !== 'minimal') {
this.drawHeader();
await this.drawHeader();
} else {
this.drawMiniHeader();
await this.drawMiniHeader();
}
this.drawDivider();
this.drawLegend();
this.drawContent();
}
async drawHeader() {
this.currentX = 80;
this.currentY = 80;
await drawHeaderCommon({
canvas: this.canvas,
ctx: this.ctx,
headerType: this.headerType,
options: {
appName: this.options.appName || '涂鸦丫小程序',
appHint: this.options.appHint || '涂色|识字|画画|打印',
title: this.options.title || '找一找 涂 色',
subTitle: this.options.subTitle || '给图形涂上相同的颜色',
},
onHeaderDrawn: (currentY) => {
this.currentY = currentY;
this.drawLine(this.currentY);
},
});
}
drawMiniHeader() {
drawMiniHeaderCommon({
canvas: this.canvas,
ctx: this.ctx,
options: {
appName: this.options.appName || '涂鸦丫小程序',
title: this.options.title || '找一找 涂 色',
},
onHeaderDrawn: (currentY) => {
this.currentY = currentY;
this.drawLine(this.currentY);
},
});
}
drawLegend() {
const { canvas, ctx, shapes } = this;
const { ctx, shapes } = this;
if (shapes.length <= 0) return;
this.currentY = this.headerType === 'minimal' ? 200 : 304;
const shapeSize = 200;
const rectWidth = 180;
const rectHeight = 80;
// 固定图例的Y位置，不依赖shapeSize
const startY = this.currentY + 125; // 固定距离，不依赖shapeSize
// 逻辑像素尺寸（原始尺寸除以3）
this.currentY = this.headerType === 'minimal' ? 75 : 110; // 200/3≈67, 304/3≈101
const shapeSize = 67; // 200/3≈67
const rectWidth = 60; // 180/3=60
const rectHeight = 27; // 80/3≈27
const startY = this.currentY + 42; // 125/3≈42
const len = shapes.length;
const canvasWidth = canvas.width;
// 计算示例图形的间距
const totalWidth = len * shapeSize + (len - 1) * 40;
const startX = (canvasWidth - totalWidth) / 2 + shapeSize / 2;
const totalWidth = len * shapeSize + (len - 1) * 13; // 40/3≈13
const startX = (this.canvasWidth - totalWidth) / 2 + shapeSize / 2;
// 绘制所有图形
shapes.forEach((shape: ShapeCard, index: number) => {
const x = startX + index * (shapeSize + 40);
const x = startX + index * (shapeSize + 13); // 40/3≈13
const y = startY;
// 绘制示例图形
drawShape(ctx, shape, x, y, shapeSize, shape.fillColor);
// // 绘制长方形
// ctx.fillStyle = '#fff';
// ctx.strokeStyle = '#000';
// ctx.lineWidth = 4;
const rectangleX = x - rectWidth / 2;
const rectangleY = y + shapeSize / 2 + 10;
// ctx.strokeRect(rectangleX, rectangleY, rectWidth, rectHeight);
const rectangleY = y + shapeSize / 2 + 3; // 10/3≈3
// 绘制图形名称
ctx.fillStyle = '#333';
ctx.font = 'bold 36px "Microsoft Yahei"';
ctx.font = 'bold 12px "Microsoft Yahei"'; // 36/3=12
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillText(
@@ -192,33 +76,29 @@ class ShapeDrawService {
);
});
this.currentY = this.headerType === 'minimal' ? 532 : 622;
this.drawLine(this.currentY);
this.currentY = this.headerType === 'minimal' ? 180 : 220; // 532/3≈177, 622/3≈207
this.drawDivider();
}
drawContent() {
const { canvas, ctx, shapes } = this;
const { ctx, shapes } = this;
if (shapes.length <= 0) return;
// 固定可渲染的总行数
// 逻辑像素尺寸（原始尺寸除以3）
const ROW_COUNT = 6;
// 每行之间的垂直间距
const VERTICAL_GAP = 120;
// 图形大小
const shapeSize = 180;
// 左右边距
const leftMargin = 160;
const rightMargin = 160;
// 以 drawLegend 画完后的分割线作为基准，内容区顶部间距 50
const VERTICAL_GAP = 40; // 120/3=40
const shapeSize = 60; // 180/3=60
const leftMargin = 53; // 160/3≈53
const rightMargin = 53; // 160/3≈53
const legendBottomY = this.currentY;
const topGap = 60;
const topGap = 20; // 60/3=20
const contentTop = legendBottomY + topGap;
// 可用宽度
const contentWidth = canvas.width - leftMargin - rightMargin;
const contentWidth = this.canvasWidth - leftMargin - rightMargin;
// 每行最多能放多少个图形（考虑最小间距40）
const minGap = 40;
// 每行最多能放多少个图形（考虑最小间距，逻辑像素）
const minGap = 13; // 40/3≈13
const maxPerRow = Math.floor(
(contentWidth + minGap) / (shapeSize + minGap),
);
@@ -300,35 +180,9 @@ class ShapeDrawService {
});
}
// drawLine 已由基类的 drawDivider 替代，保留此方法以保持兼容
drawLine(linY: number) {
const { canvas, ctx } = this;
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(80, linY);
ctx.lineTo(canvas.width - 80, linY);
ctx.stroke();
}
setPaper() {
const { ctx, canvas } = this;
const { pixelRatio: dpr } = wx.getWindowInfo();
let { width, height } = PAPER_SIZE[this.paperSize];
width = width * dpr;
height = height * dpr;
canvas.width = width;
canvas.height = height;
this.clear();
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, width, height);
}
clear() {
const canvas = this.canvas;
this.ctx.clearRect(0, 0, canvas.width, canvas.height);
this.drawDivider();
}
}