zhangyi
122 lines
3.7 KiB
TypeScript
122 lines
3.7 KiB
TypeScript
import { PAPER_SIZE } from './constant';
|
|
|
|
class TextDrawService {
|
|
canvas: WechatMiniprogram.Canvas;
|
|
ctx: RenderingContext;
|
|
options: Record<string, any>;
|
|
paperSize: PaperSize;
|
|
currentX: number;
|
|
currentY: number;
|
|
|
|
constructor(canvas: Canvas, ctx: RenderingContext, options?: Record<string, any>) {
|
|
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;
|