From b7a581fd1646482bd9dad93e369a79634f33f173 Mon Sep 17 00:00:00 2001 From: zhangyi Date: Fri, 21 Mar 2025 17:23:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=98=E5=88=B6Header=E5=92=8CLegend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/canvasService/constant.ts | 24 ++++ miniprogram/canvasService/textDrawService.ts | 121 ++++++++++++++++++ miniprogram/canvasService/utils.ts | 17 +++ miniprogram/demoPages/textPaint2/textPaint.ts | 18 ++- typings/global.d.ts | 2 + 5 files changed, 177 insertions(+), 5 deletions(-) create mode 100644 miniprogram/canvasService/constant.ts create mode 100644 miniprogram/canvasService/textDrawService.ts create mode 100644 miniprogram/canvasService/utils.ts diff --git a/miniprogram/canvasService/constant.ts b/miniprogram/canvasService/constant.ts new file mode 100644 index 0000000..aa152b1 --- /dev/null +++ b/miniprogram/canvasService/constant.ts @@ -0,0 +1,24 @@ +const PAPER_SIZE = { + A4: { + width: 2480, + height: 3508, + }, + A3: { + width: 3508, + height: 4960, + }, + A2: { + width: 4960, + height: 7016, + }, + A1: { + width: 7016, + height: 10032, + }, + A0: { + width: 10032, + height: 14176, + }, +}; + +export { PAPER_SIZE }; diff --git a/miniprogram/canvasService/textDrawService.ts b/miniprogram/canvasService/textDrawService.ts new file mode 100644 index 0000000..47a76aa --- /dev/null +++ b/miniprogram/canvasService/textDrawService.ts @@ -0,0 +1,121 @@ +import { PAPER_SIZE } from './constant'; + +class TextDrawService { + canvas: WechatMiniprogram.Canvas; + ctx: RenderingContext; + options: Record; + paperSize: PaperSize; + currentX: number; + currentY: number; + + constructor(canvas: Canvas, ctx: RenderingContext, options?: Record) { + this.canvas = canvas; + this.ctx = ctx; + this.paperSize = 'A4'; + this.options = { + title: '找一找 涂 色', + radius: 80, + colors: ['#2196F3', '#FFEB3B', '#FF9800', '#F44336'], + characters: ['鱼', '鸟', '猫', '狗'], + ...options, + }; + this.currentX = 0; + this.currentY = 0; + } + + draw() { + this.setPaper(); + this.drawHeader(); + this.drawLegend(); + } + + drawHeader() { + const { canvas, ctx } = this; + const { title } = this.options; + + ctx.font = 'bold 80px "Microsoft Yahei"'; + ctx.fillStyle = '#333'; + ctx.textAlign = 'center'; + const titleX = canvas.width / 2; + const titleY = 120; + ctx.fillText(title, titleX, titleY); + + // 记录当前X、Y坐标 + this.currentX = titleX; + this.currentY = titleY + 50; + // 绘制分割线 + this.drawLine(this.currentY); + } + + // 绘制示例 + drawLegend() { + const { ctx, options } = this; + const { colors, characters, radius } = options; + const startX = (this.canvas.width - colors.length * 400) / 2; // 计算起始X坐标以居中 + this.currentY = this.currentY + radius + 50; // radius 为圆的半径，再加上离线的边距为50 + const startY = this.currentY; // 设置起始Y坐标 + + ctx.moveTo(startX, startY); + colors.forEach((color: string, index: number) => { + const x = startX + index * 500; // 计算每个圆的X坐标 + const y = startY; // 计算圆的Y坐标 + + // 绘制圆 + ctx.beginPath(); + ctx.arc(x, y, radius, 0, Math.PI * 2); + ctx.fillStyle = color; + ctx.fill(); + ctx.fillStyle = '#333'; + ctx.stroke(); + ctx.closePath(); + + // 绘制长方形 + ctx.fillStyle = '#fff'; // 长方形背景色 + ctx.strokeStyle = '#333'; + ctx.lineWidth = 4; + const rectangleX = x - 120; // 计算字符X坐标 + const rectangleY = y + radius + 40; // 计算字符Y坐标 + ctx.strokeRect(rectangleX, rectangleY, 240, 100); // 绘制长方形 + // ctx.fillRect(x - 75, y + 10, 240, 100); // 填充长方形 + + // 绘制字符 + ctx.fillStyle = '#333'; + ctx.font = 'bold 60px "Microsoft Yahei"'; + ctx.textAlign = 'center'; + ctx.fillText(characters[index], rectangleX + 120, rectangleY + 70); + this.currentY = rectangleY + 100; // 100会矩形宽度 + }); + + this.currentY = this.currentY + 50; // 计算分割线的Y坐标，距离示例图20px + this.drawLine(this.currentY); + } + + drawLine(linY: number) { + const { canvas, ctx } = this; + + ctx.strokeStyle = '#333'; + ctx.lineWidth = 4; + ctx.beginPath(); + ctx.moveTo(20, linY); + ctx.lineTo(canvas.width - 20, linY); + ctx.stroke(); + } + + setPaper() { + const ctx = this.ctx; + const { width, height } = PAPER_SIZE[this.paperSize]; + this.canvas.width = width; + this.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); + } +} + +export default TextDrawService; diff --git a/miniprogram/canvasService/utils.ts b/miniprogram/canvasService/utils.ts new file mode 100644 index 0000000..f0c2da1 --- /dev/null +++ b/miniprogram/canvasService/utils.ts @@ -0,0 +1,17 @@ +import { PAPER_SIZE } from './constant'; + +export function setCanvasSize(canvas: Canvas, paperSize: PaperSize) { + const sizeObj = PAPER_SIZE[paperSize]; + // const { pixelRatio: dpr, windowWidth, windowHeight } = wx.getWindowInfo(); + // const printWidth = A4.width; + // const printHeight = A4.height; + // @ts-ignore + // const originWidth = canvas._width || windowWidth; + // // @ts-ignore + // const originHeight = canvas._height || windowHeight; + + canvas.width = sizeObj.width; + canvas.height = sizeObj.height; + console.log('canvas----:', canvas); + return canvas; +} diff --git a/miniprogram/demoPages/textPaint2/textPaint.ts b/miniprogram/demoPages/textPaint2/textPaint.ts index 880a2ca..8dc002d 100644 --- a/miniprogram/demoPages/textPaint2/textPaint.ts +++ b/miniprogram/demoPages/textPaint2/textPaint.ts @@ -1,3 +1,5 @@ +import TextDrawService from '../../canvasService/textDrawService'; + Page({ canvas: null as Canvas | null, ctx: null as RenderingContext | null, @@ -44,11 +46,14 @@ Page({ const canvas = res[0].node; const ctx = canvas.getContext('2d'); + const textDrawService = new TextDrawService(canvas, ctx); + textDrawService.draw(); + this.canvas = canvas; this.ctx = ctx; - this.setCanvasSize(canvas, ctx); + // this.setCanvasSize(canvas, ctx); // ctx.fillRect(0, 0, 2480, 3508); - this.drawGameBoard(ctx); + // this.drawGameBoard(ctx); }); }, @@ -85,14 +90,17 @@ Page({ const canvas = this.canvas as Canvas; ctx = ctx || (this.ctx as RenderingContext); ctx.clearRect(0, 0, canvas.width, canvas.height); - ctx.fillStyle = '#333'; // 设置填充色为白色 + ctx.fillStyle = '#fff'; // 设置填充色为白色 ctx.fillRect(0, 0, 2480, 3508); // 覆盖整个A4画布 // 绘制标题 + // 绘制标题并居中显示 ctx.font = 'bold 80px "Microsoft Yahei"'; ctx.fillStyle = '#333'; - ctx.fillText('找一找 涂 色', 1240 - ctx.measureText('找一找 涂 色').width / 2, 150); - + ctx.textAlign = 'center'; + const titleX = canvas.width / 2; + const titleY = 150; + ctx.fillText('找一找 涂 色', titleX, titleY); // 绘制颜色示例（顶部） this.drawColorLegend(ctx, 250); diff --git a/typings/global.d.ts b/typings/global.d.ts index 31d2d43..333b2c7 100644 --- a/typings/global.d.ts +++ b/typings/global.d.ts @@ -2,3 +2,5 @@ type Canvas = WechatMiniprogram.Canvas; type RenderingContext = WechatMiniprogram.CanvasRenderingContext2D; type TouchEvent = WechatMiniprogram.TouchEvent; + +type PaperSize = 'A4' | 'A3';