386 lines
13 KiB
TypeScript
386 lines
13 KiB
TypeScript
import { ShapeCard } from '../constants/shapes';
|
|
|
|
// 绘制各种图形的辅助函数
|
|
|
|
// 绘制圆形
|
|
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') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制椭圆形
|
|
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') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制正方形
|
|
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);
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeRect(x - size / 2, y - size / 2, size, size);
|
|
}
|
|
|
|
// 绘制矩形
|
|
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);
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeRect(x - width / 2, y - height / 2, width, height);
|
|
}
|
|
|
|
// 绘制三角形（可指定类型：钝角、直角、锐角）
|
|
function drawTriangle(ctx: RenderingContext, x: number, y: number, size: number, type: string, fillColor: string) {
|
|
ctx.beginPath();
|
|
|
|
switch (type) {
|
|
case 'obtuse':
|
|
ctx.moveTo(x - size * 0.6, y - size * 0.4);
|
|
ctx.lineTo(x + size * 0.8, y + size * 0.6);
|
|
ctx.lineTo(x - size * 0.2, y + size * 0.4);
|
|
break;
|
|
case 'right':
|
|
ctx.moveTo(x - size * 0.4, y - size * 0.4);
|
|
ctx.lineTo(x - size * 0.4, y + size * 0.6);
|
|
ctx.lineTo(x + size * 0.6, y + size * 0.6);
|
|
break;
|
|
case 'acute':
|
|
default:
|
|
ctx.moveTo(x, y - size * 0.5);
|
|
ctx.lineTo(x - size * 0.5, y + size * 0.5);
|
|
ctx.lineTo(x + size * 0.5, y + size * 0.5);
|
|
break;
|
|
}
|
|
|
|
ctx.closePath();
|
|
if (fillColor !== 'transparent') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制平行四边形
|
|
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);
|
|
ctx.lineTo(x + width / 2 + offset, y - height / 2);
|
|
ctx.lineTo(x + width / 2 - offset, y + height / 2);
|
|
ctx.lineTo(x - width / 2 - offset, y + height / 2);
|
|
ctx.closePath();
|
|
if (fillColor !== 'transparent') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制菱形
|
|
function drawDiamond(ctx: RenderingContext, x: number, y: number, size: number, fillColor: string) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y - size);
|
|
ctx.lineTo(x + size, y);
|
|
ctx.lineTo(x, y + size);
|
|
ctx.lineTo(x - size, y);
|
|
ctx.closePath();
|
|
if (fillColor !== 'transparent') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制梯形
|
|
// 保证绘制的是等腰梯形：上下底居中，左右腰等长
|
|
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 halfHeight = height / 2;
|
|
|
|
// 上底中心点与下底中心点重合，左右对称
|
|
ctx.beginPath();
|
|
// 上底左点
|
|
ctx.moveTo(x - topWidth / 2, y - halfHeight);
|
|
// 上底右点
|
|
ctx.lineTo(x + topWidth / 2, y - halfHeight);
|
|
// 下底右点
|
|
ctx.lineTo(x + bottomWidth / 2, y + halfHeight);
|
|
// 下底左点
|
|
ctx.lineTo(x - bottomWidth / 2, y + halfHeight);
|
|
ctx.closePath();
|
|
if (fillColor !== 'transparent') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制多边形
|
|
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;
|
|
const px = x + Math.cos(angle) * radius;
|
|
const py = y + Math.sin(angle) * radius;
|
|
if (i === 0) ctx.moveTo(px, py);
|
|
else ctx.lineTo(px, py);
|
|
}
|
|
ctx.closePath();
|
|
if (fillColor !== 'transparent') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制星形（五角星等）
|
|
// 按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) {
|
|
// SVG原始点
|
|
const svgPoints = [
|
|
[50, 20],
|
|
[61, 42],
|
|
[85, 44],
|
|
[67, 60],
|
|
[71, 85],
|
|
[50, 75],
|
|
[29, 85],
|
|
[33, 60],
|
|
[15, 44],
|
|
[39, 42]
|
|
];
|
|
// SVG中心(50,50)，最大半径约为35（从50,50到15,44的距离），SVG坐标范围大致为[15,85]
|
|
// 归一化到以(x, y)为中心，radius为最大半径
|
|
const svgCenterX = 50;
|
|
const svgCenterY = 50;
|
|
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;
|
|
if (idx === 0) ctx.moveTo(nx, ny);
|
|
else ctx.lineTo(nx, ny);
|
|
});
|
|
ctx.closePath();
|
|
if (fillColor !== 'transparent') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制爱心
|
|
function drawHeart(ctx: RenderingContext, x: number, y: number, size: number, fillColor: string) {
|
|
// 放大爱心：将原本的缩放比例从60缩小为50，使爱心整体变大
|
|
// 以SVG路径为参考，原始SVG中心为(50,50)，宽高约为60x60
|
|
// 这里size为整体缩放，x,y为中心点
|
|
// 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
|
|
// 归一化函数
|
|
const scale = 40; // 原来是60，改为50，放大
|
|
function tx(px: number) {
|
|
return x + (px - 50) / scale * size;
|
|
}
|
|
function ty(py: number) {
|
|
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.closePath();
|
|
if (fillColor !== 'transparent') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制半圆
|
|
function drawSemicircle(ctx: RenderingContext, x: number, y: number, radius: number, fillColor: string) {
|
|
const verticalOffset = radius * 0.5;
|
|
y = y + verticalOffset;
|
|
ctx.beginPath();
|
|
// ctx.moveTo(x, y + verticalOffset);
|
|
// 圆弧从左（180°，Math.PI）到右（0°），逆时针画半圆，圆弧在正上方
|
|
ctx.arc(x, y, radius, Math.PI, 0, false);
|
|
ctx.closePath();
|
|
if (fillColor !== 'transparent') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制扇形，圆弧在正上方
|
|
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.closePath();
|
|
if (fillColor !== 'transparent') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill();
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 绘制圆环（修正避免中间出现一条线）
|
|
function drawRing(ctx: RenderingContext, x: number, y: number, radius: number, fillColor: string) {
|
|
const innerRadius = radius * 0.5;
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
// 外圆，顺时针
|
|
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
|
|
// 关键：移动到内圆起点，避免连接线
|
|
ctx.moveTo(x + innerRadius, y);
|
|
// 内圆，逆时针
|
|
ctx.arc(x, y, innerRadius, 0, Math.PI * 2, true);
|
|
ctx.closePath();
|
|
if (fillColor !== 'transparent') {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.fill('evenodd');
|
|
}
|
|
ctx.strokeStyle = '#141414';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
}
|
|
/**
|
|
* 根据图形类型绘制到Canvas
|
|
* @param ctx Canvas上下文
|
|
* @param shape 图形对象
|
|
* @param x 起始x坐标
|
|
* @param y 起始y坐标
|
|
* @param size 图形大小
|
|
* @param fillColor 填充颜色
|
|
*/
|
|
export function drawShape(ctx: RenderingContext, shape: ShapeCard, x: number, y: number, size: number, fillColor: string) {
|
|
ctx.save();
|
|
ctx.translate(x, y);
|
|
|
|
const radius = size / 2;
|
|
const shouldFill = fillColor !== 'transparent';
|
|
|
|
switch (shape.id) {
|
|
case 'circle':
|
|
drawCircle(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
|
|
break;
|
|
case 'ellipse':
|
|
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');
|
|
break;
|
|
case 'rectangle':
|
|
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');
|
|
break;
|
|
case 'right-triangle':
|
|
drawTriangle(ctx, 0, 0, radius, 'right', shouldFill ? fillColor : 'transparent');
|
|
break;
|
|
case 'acute-triangle':
|
|
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');
|
|
break;
|
|
case 'diamond':
|
|
drawDiamond(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
|
|
break;
|
|
case 'trapezoid':
|
|
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');
|
|
break;
|
|
case 'hexagon':
|
|
drawPolygon(ctx, 0, 0, radius, 6, shouldFill ? fillColor : 'transparent');
|
|
break;
|
|
case 'pentagram':
|
|
drawStar(ctx, 0, 0, radius, 5, shouldFill ? fillColor : 'transparent');
|
|
break;
|
|
case 'heart':
|
|
drawHeart(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
|
|
break;
|
|
case 'semicircle':
|
|
drawSemicircle(ctx, 0, 0, radius, shouldFill ? fillColor : 'transparent');
|
|
break;
|
|
case 'sector':
|
|
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');
|
|
}
|
|
|
|
ctx.restore();
|
|
}
|