R524809
621 lines
16 KiB
TypeScript
621 lines
16 KiB
TypeScript
/**
|
|
* 图形涂色方法
|
|
* 根据图形类型绘制到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,
|
|
) {
|
|
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,
|
|
) {
|
|
// 参考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)
|
|
// 计算比例
|
|
// 顶点: (0, -0.7*size)
|
|
// 右: (0.4*size, 0)
|
|
// 下: (0, 0.7*size)
|
|
// 左: (-0.4*size, 0)
|
|
const topY = y - size * 0.7;
|
|
const rightX = x + size * 0.4;
|
|
const bottomY = y + size * 0.7;
|
|
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.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();
|
|
}
|