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
2026-04-10 15:06:11 +08:00
parent a911da6181
commit e74fd3709c
17 changed files with 1091 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/service/drawShape.ts
+285 -63
View File
@@ -1,9 +1,36 @@
/**
* 图形涂色方法
* 根据图形类型绘制到Canvas
*
* 支持的图形类型：
* - circle：圆形
* - ellipse：椭圆
* - square：正方形
* - rectangle：矩形
* - triangle：三角形
* - parallelogram：平行四边形
* - diamond：菱形
* - trapezoid：梯形
* - pentagon：五边形
* - hexagon：六边形
* - pentagram：五角星
* - heart：心形
* - semicircle：半圆
* - sector：扇形
* - ring：圆环
*/
import { ShapeCard } from '../constants/shapes';
// 绘制各种图形的辅助函数
// 绘制圆形
function drawCircle(ctx: RenderingContext, x: number, y: number, radius: number, fillColor: string) {
function drawCircle(
ctx: RenderingContext,
x: number,
y: number,
radius: number,
fillColor: string,
) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
if (fillColor !== 'transparent') {
@@ -16,7 +43,14 @@ function drawCircle(ctx: RenderingContext, x: number, y: number, radius: number,
}
// 绘制椭圆形
function drawEllipse(ctx: RenderingContext, x: number, y: number, rx: number, ry: number, fillColor: string) {
function drawEllipse(
ctx: RenderingContext,
x: number,
y: number,
rx: number,
ry: number,
fillColor: string,
) {
ctx.beginPath();
ctx.ellipse(x, y, rx, ry, 0, 0, Math.PI * 2);
if (fillColor !== 'transparent') {
@@ -29,7 +63,13 @@ function drawEllipse(ctx: RenderingContext, x: number, y: number, rx: number, ry
}
// 绘制正方形
function drawSquare(ctx: RenderingContext, x: number, y: number, size: number, fillColor: string) {
function drawSquare(
ctx: RenderingContext,
x: number,
y: number,
size: number,
fillColor: string,
) {
if (fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
ctx.fillRect(x - size / 2, y - size / 2, size, size);
@@ -40,7 +80,14 @@ function drawSquare(ctx: RenderingContext, x: number, y: number, size: number, f
}
// 绘制矩形
function drawRectangle(ctx: RenderingContext, x: number, y: number, width: number, height: number, fillColor: string) {
function drawRectangle(
ctx: RenderingContext,
x: number,
y: number,
width: number,
height: number,
fillColor: string,
) {
if (fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
ctx.fillRect(x - width / 2, y - height / 2, width, height);
@@ -51,7 +98,14 @@ function drawRectangle(ctx: RenderingContext, x: number, y: number, width: numbe
}
// 绘制三角形（可指定类型：钝角、直角、锐角）
function drawTriangle(ctx: RenderingContext, x: number, y: number, size: number, type: string, fillColor: string) {
function drawTriangle(
ctx: RenderingContext,
x: number,
y: number,
size: number,
type: string,
fillColor: string,
) {
ctx.beginPath();
switch (type) {
@@ -84,7 +138,14 @@ function drawTriangle(ctx: RenderingContext, x: number, y: number, size: number,
}
// 绘制平行四边形
function drawParallelogram(ctx: RenderingContext, x: number, y: number, width: number, height: number, fillColor: string) {
function drawParallelogram(
ctx: RenderingContext,
x: number,
y: number,
width: number,
height: number,
fillColor: string,
) {
const offset = width * 0.2;
ctx.beginPath();
ctx.moveTo(x - width / 2 + offset, y - height / 2);
@@ -102,7 +163,13 @@ function drawParallelogram(ctx: RenderingContext, x: number, y: number, width: n
}
// 绘制菱形
function drawDiamond(ctx: RenderingContext, x: number, y: number, size: number, fillColor: string) {
function drawDiamond(
ctx: RenderingContext,
x: number,
y: number,
size: number,
fillColor: string,
) {
// 参考SVG: <polygon points="50,15 70,50 50,85 30,50"/>
// 以(x, y)为中心，size为半高，按SVG比例映射四个点
// SVG中心(50,50)，顶点(50,15)，右(70,50)，下(50,85)，左(30,50)
@@ -117,10 +184,10 @@ function drawDiamond(ctx: RenderingContext, x: number, y: number, size: number,
const leftX = x - size * 0.4;
ctx.beginPath();
ctx.moveTo(x, topY); // 顶点
ctx.lineTo(rightX, y); // 右
ctx.lineTo(x, bottomY); // 下
ctx.lineTo(leftX, y); // 左
ctx.moveTo(x, topY); // 顶点
ctx.lineTo(rightX, y); // 右
ctx.lineTo(x, bottomY); // 下
ctx.lineTo(leftX, y); // 左
ctx.closePath();
if (fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
@@ -133,10 +200,17 @@ function drawDiamond(ctx: RenderingContext, x: number, y: number, size: number,
// 绘制梯形
// 保证绘制的是等腰梯形：上下底居中，左右腰等长
function drawTrapezoid(ctx: RenderingContext, x: number, y: number, width: number, height: number, fillColor: string) {
function drawTrapezoid(
ctx: RenderingContext,
x: number,
y: number,
width: number,
height: number,
fillColor: string,
) {
// topWidth 为上底宽度，width 为下底宽度
const topWidth = width * 0.6; // 上底
const bottomWidth = width; // 下底
const bottomWidth = width; // 下底
const halfHeight = height / 2;
// 上底中心点与下底中心点重合，左右对称
@@ -160,7 +234,14 @@ function drawTrapezoid(ctx: RenderingContext, x: number, y: number, width: numbe
}
// 绘制多边形
function drawPolygon(ctx: RenderingContext, x: number, y: number, radius: number, sides: number, fillColor: string) {
function drawPolygon(
ctx: RenderingContext,
x: number,
y: number,
radius: number,
sides: number,
fillColor: string,
) {
ctx.beginPath();
for (let i = 0; i < sides; i++) {
const angle = (i * 2 * Math.PI) / sides - Math.PI / 2;
@@ -181,7 +262,14 @@ function drawPolygon(ctx: RenderingContext, x: number, y: number, radius: number
// 绘制星形（五角星等）
// 按SVG <polygon points="50,20 61,42 85,44 67,60 71,85 50,75 29,85 33,60 15,44 39,42"> 路径绘制五角星
function drawStar(ctx: RenderingContext, x: number, y: number, radius: number, points: number, fillColor: string) {
function drawStar(
ctx: RenderingContext,
x: number,
y: number,
radius: number,
points: number,
fillColor: string,
) {
// SVG原始点
const svgPoints = [
[50, 20],
@@ -193,7 +281,7 @@ function drawStar(ctx: RenderingContext, x: number, y: number, radius: number, p
[29, 85],
[33, 60],
[15, 44],
[39, 42]
[39, 42],
];
// SVG中心(50,50)，最大半径约为35（从50,50到15,44的距离），SVG坐标范围大致为[15,85]
// 归一化到以(x, y)为中心，radius为最大半径
@@ -202,8 +290,8 @@ function drawStar(ctx: RenderingContext, x: number, y: number, radius: number, p
const svgRadius = 35; // 50-15=35
ctx.beginPath();
svgPoints.forEach(([px, py], idx) => {
const nx = x + (px - svgCenterX) / svgRadius * radius;
const ny = y + (py - svgCenterY) / svgRadius * radius;
const nx = x + ((px - svgCenterX) / svgRadius) * radius;
const ny = y + ((py - svgCenterY) / svgRadius) * radius;
if (idx === 0) ctx.moveTo(nx, ny);
else ctx.lineTo(nx, ny);
});
@@ -218,7 +306,13 @@ function drawStar(ctx: RenderingContext, x: number, y: number, radius: number, p
}
// 绘制爱心
function drawHeart(ctx: RenderingContext, x: number, y: number, size: number, fillColor: string) {
function drawHeart(
ctx: RenderingContext,
x: number,
y: number,
size: number,
fillColor: string,
) {
// 放大爱心：将原本的缩放比例从60缩小为50，使爱心整体变大
// 以SVG路径为参考，原始SVG中心为(50,50)，宽高约为60x60
// 这里size为整体缩放，x,y为中心点
@@ -226,33 +320,17 @@ function drawHeart(ctx: RenderingContext, x: number, y: number, size: number, fi
// 归一化函数
const scale = 40; // 原来是60，改为50，放大
function tx(px: number) {
return x + (px - 50) / scale * size;
return x + ((px - 50) / scale) * size;
}
function ty(py: number) {
return y + (py - 50) / scale * size;
return y + ((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.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();
if (fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
@@ -264,7 +342,13 @@ function drawHeart(ctx: RenderingContext, x: number, y: number, size: number, fi
}
// 绘制半圆
function drawSemicircle(ctx: RenderingContext, x: number, y: number, radius: number, fillColor: string) {
function drawSemicircle(
ctx: RenderingContext,
x: number,
y: number,
radius: number,
fillColor: string,
) {
const verticalOffset = radius * 0.5;
y = y + verticalOffset;
ctx.beginPath();
@@ -282,14 +366,27 @@ function drawSemicircle(ctx: RenderingContext, x: number, y: number, radius: num
}
// 绘制扇形，圆弧在正上方
function drawSector(ctx: RenderingContext, x: number, y: number, radius: number, fillColor: string) {
function drawSector(
ctx: RenderingContext,
x: number,
y: number,
radius: number,
fillColor: string,
) {
// 为了让扇形垂直方向居中，需要将整个扇形向下平移一定距离
// 扇形的质心大约在半径的 0.6 倍处（120°扇形），这里经验值调整
const verticalOffset = radius * 0.5;
ctx.beginPath();
ctx.moveTo(x, y + verticalOffset);
// 扇形圆弧从左上(-135°)到右上(-45°)，即从 -3/4π 到 -1/4π，圆弧在正上方
ctx.arc(x, y + verticalOffset, radius, -3 * Math.PI / 4, -Math.PI / 4, false);
ctx.arc(
x,
y + verticalOffset,
radius,
(-3 * Math.PI) / 4,
-Math.PI / 4,
false,
);
ctx.closePath();
if (fillColor !== 'transparent') {
ctx.fillStyle = fillColor;
@@ -301,7 +398,13 @@ function drawSector(ctx: RenderingContext, x: number, y: number, radius: number,
}
// 绘制圆环（修正避免中间出现一条线）
function drawRing(ctx: RenderingContext, x: number, y: number, radius: number, fillColor: string) {
function drawRing(
ctx: RenderingContext,
x: number,
y: number,
radius: number,
fillColor: string,
) {
const innerRadius = radius * 0.5;
ctx.save();
ctx.beginPath();
@@ -330,7 +433,14 @@ function drawRing(ctx: RenderingContext, x: number, y: number, radius: number, f
* @param size 图形大小
* @param fillColor 填充颜色
*/
export function drawShape(ctx: RenderingContext, shape: ShapeCard, x: number, y: number, size: number, fillColor: string) {
export function drawShape(
ctx: RenderingContext,
shape: ShapeCard,
x: number,
y: number,
size: number,
fillColor: string,
) {
ctx.save();
ctx.translate(x, y);
@@ -339,59 +449,171 @@ export function drawShape(ctx: RenderingContext, shape: ShapeCard, x: number, y:
switch (shape.id) {
case 'circle':
drawCircle(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
drawCircle(
ctx,
0,
0,
radius,
shouldFill ? fillColor : 'transparent',
);
break;
case 'ellipse':
drawEllipse(ctx, 0, 0, radius * 0.8, radius * 0.5, shouldFill ? fillColor : 'transparent');
drawEllipse(
ctx,
0,
0,
radius * 0.8,
radius * 0.5,
shouldFill ? fillColor : 'transparent',
);
break;
case 'square':
drawSquare(ctx, 0, 0, radius * 1.6, shouldFill ? fillColor : 'transparent');
drawSquare(
ctx,
0,
0,
radius * 1.6,
shouldFill ? fillColor : 'transparent',
);
break;
case 'rectangle':
drawRectangle(ctx, 0, 0, radius * 1.8, radius * 1.2, shouldFill ? fillColor : 'transparent');
drawRectangle(
ctx,
0,
0,
radius * 1.8,
radius * 1.2,
shouldFill ? fillColor : 'transparent',
);
break;
case 'obtuse-triangle':
drawTriangle(ctx, 0, 0, radius, 'obtuse', shouldFill ? fillColor : 'transparent');
drawTriangle(
ctx,
0,
0,
radius,
'obtuse',
shouldFill ? fillColor : 'transparent',
);
break;
case 'right-triangle':
drawTriangle(ctx, 0, 0, radius, 'right', shouldFill ? fillColor : 'transparent');
drawTriangle(
ctx,
0,
0,
radius,
'right',
shouldFill ? fillColor : 'transparent',
);
break;
case 'acute-triangle':
drawTriangle(ctx, 0, 0, radius, 'acute', shouldFill ? fillColor : 'transparent');
drawTriangle(
ctx,
0,
0,
radius,
'acute',
shouldFill ? fillColor : 'transparent',
);
break;
case 'parallelogram':
drawParallelogram(ctx, 0, 0, radius * 1.6, radius * 1.2, shouldFill ? fillColor : 'transparent');
drawParallelogram(
ctx,
0,
0,
radius * 1.6,
radius * 1.2,
shouldFill ? fillColor : 'transparent',
);
break;
case 'diamond':
drawDiamond(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
drawDiamond(
ctx,
0,
0,
radius,
shouldFill ? fillColor : 'transparent',
);
break;
case 'trapezoid':
drawTrapezoid(ctx, 0, 0, radius * 1.6, radius * 1.2, shouldFill ? fillColor : 'transparent');
drawTrapezoid(
ctx,
0,
0,
radius * 1.6,
radius * 1.2,
shouldFill ? fillColor : 'transparent',
);
break;
case 'pentagon':
drawPolygon(ctx, 0, 0, radius, 5, shouldFill ? fillColor : 'transparent');
drawPolygon(
ctx,
0,
0,
radius,
5,
shouldFill ? fillColor : 'transparent',
);
break;
case 'hexagon':
drawPolygon(ctx, 0, 0, radius, 6, shouldFill ? fillColor : 'transparent');
drawPolygon(
ctx,
0,
0,
radius,
6,
shouldFill ? fillColor : 'transparent',
);
break;
case 'pentagram':
drawStar(ctx, 0, 0, radius, 5, shouldFill ? fillColor : 'transparent');
drawStar(
ctx,
0,
0,
radius,
5,
shouldFill ? fillColor : 'transparent',
);
break;
case 'heart':
drawHeart(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
drawHeart(
ctx,
0,
0,
radius,
shouldFill ? fillColor : 'transparent',
);
break;
case 'semicircle':
drawSemicircle(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
drawSemicircle(
ctx,
0,
0,
radius,
shouldFill ? fillColor : 'transparent',
);
break;
case 'sector':
drawSector(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
drawSector(
ctx,
0,
0,
radius,
shouldFill ? fillColor : 'transparent',
);
break;
case 'ring':
drawRing(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
break;
default:
// 默认绘制圆形
drawCircle(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
drawCircle(
ctx,
0,
0,
radius,
shouldFill ? fillColor : 'transparent',
);
}
ctx.restore();