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:
joey
2025-08-07 17:36:04 +08:00
parent d3c1a2fd78
commit 738358ab76
17 changed files with 455 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/constants/shapes.ts
+46 -18
View File
@@ -6,7 +6,18 @@
*
*/
const SHAPES = [
interface ShapeCard {
id: string;
name: string;
type: string;
svg: string;
svgDataUrl?: string;
fillColor: string;
drawFunction?: string;
checked?: boolean;
}
const SHAPES: ShapeCard[] = [
// 三角形
{
id: 'obtuse-triangle',
@@ -14,13 +25,15 @@ const SHAPES = [
type: 'triangle',
// svg: '<polygon points="20,20 80,80 35,65" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15,15 85,85 20,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
fillColor: '#ff0000',
drawFunction: 'drawTriangle',
},
{
id: 'right-triangle',
name: '直角三角形',
type: 'triangle',
svg: '<polygon points="15,15 15,85 85,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15,15 15,85 85,85" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawTriangle',
},
{
@@ -28,7 +41,8 @@ const SHAPES = [
name: '等腰三角形',
type: 'triangle',
// svg: '<polygon points="15,15 85,15 50,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,15 85,85 15,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,15 85,85 15,85" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawTriangle',
},
// 四边形
@@ -37,7 +51,8 @@ const SHAPES = [
name: '正方形',
type: 'rect',
// svg: '<rect x="20" y="20" width="60" height="60" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<rect x="15" y="15" width="70" height="70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<rect x="15" y="15" width="70" height="70" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawSquare',
},
{
@@ -45,7 +60,8 @@ const SHAPES = [
name: '长方形',
type: 'rect',
// svg: '<rect x="20" y="20" width="60" height="40" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<rect x="15" y="25" width="70" height="50" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<rect x="15" y="25" width="70" height="50" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawRectangle',
},
{
@@ -53,7 +69,8 @@ const SHAPES = [
name: '平行四边形',
type: 'rect',
// svg: '<polygon points="20,30 70,30 90,70 40,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15,30 70,30 85,70 30,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15,30 70,30 85,70 30,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawParallelogram',
},
{
@@ -61,7 +78,8 @@ const SHAPES = [
name: '菱形',
type: 'rect',
// svg: '<polygon points="50,20 70,50 50,80 30,50" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,15 70,50 50,85 30,50" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,15 70,50 50,85 30,50" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawParallelogram',
},
{
@@ -69,7 +87,8 @@ const SHAPES = [
name: "梯形",
type: 'rect',
// svg: '<polygon points="40,30 70,30 90,70 20,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="30,25 70,25 90,75 10,75" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="30,25 70,25 90,75 10,75" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawTrapezoid',
},
// 五边形
@@ -78,7 +97,8 @@ const SHAPES = [
name: '五边形',
type: 'rect',
// svg: '<polygon points="50,10,80,35,68,70,32,70,20,35" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,20,80,45,68,80,32,80,20,45" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,20,80,45,68,80,32,80,20,45" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawHexagon',
},
@@ -87,7 +107,8 @@ const SHAPES = [
id: 'hexagon',
name: '六边形',
type: 'rect',
svg: '<polygon points="15.4,30 50,10 84.6,30 84.6,70 50,90 15.4,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="15.4,30 50,10 84.6,30 84.6,70 50,90 15.4,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawHexagon',
},
// 五角星
@@ -95,7 +116,8 @@ const SHAPES = [
id: 'pentagram',
name: '五角星',
type: 'rect',
svg: '<polygon points="50,20 61,42 85,44 67,60 71,85 50,75 29,85 33,60 15,44 39,42" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<polygon points="50,20 61,42 85,44 67,60 71,85 50,75 29,85 33,60 15,44 39,42" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawPentagram',
},
// 心形
@@ -103,7 +125,8 @@ const SHAPES = [
id: 'heart',
name: '心形',
type: 'rect',
svg: '<path d="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" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<path d="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" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawHeart',
},
// 圆形
@@ -111,7 +134,8 @@ const SHAPES = [
id: 'circle',
name: '圆形',
type: 'circle',
svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawCircle',
},
// 椭圆
@@ -119,7 +143,8 @@ const SHAPES = [
id: 'ellipse',
name: '椭圆',
type: 'circle',
svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawEllipse',
},
// 半圆
@@ -128,7 +153,8 @@ const SHAPES = [
name: '半圆',
type: 'circle',
// svg: '<path d="M20,70 A20,20 0 0,1 80,70 L70,70 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<path d="M15,65 A20,20 0 0,1 85,65 L85,65 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<path d="M15,65 A20,20 0 0,1 85,65 L85,65 Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawSemicircle',
},
// 扇形
@@ -137,7 +163,8 @@ const SHAPES = [
name: '扇形',
type: 'circle',
// svg: '<path d="M50,70 L80,35 A40,40 0 0,0 20,35 L50,70 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<path d="M50,75 L80,35 A40,40 0 0,0 20,35 L50,75 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
svg: '<path d="M50,75 L80,35 A40,40 0 0,0 20,35 L50,75 Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
fillColor: '#ff0000',
drawFunction: 'drawSector',
},
// 圆环
@@ -146,9 +173,10 @@ const SHAPES = [
name: '圆环',
type: 'circle',
// svg: '<path d="M75,50 A25,25 0 1,0 25,50 A25,25 0 1,0 75,50 ZM65,50 A15,15 0 1,0 35,50 A15,15 0 1,0 65,50 Z" fill="#ff0000" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
svg: '<path d="M85,50 A30,30 0 1,0 15,50 A30,30 0 1,0 85,50 ZM65,50A15,15 0 1,0 35,50A15,15 0 1,0 65,50 Z" fill="#ff0000" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
svg: '<path d="M85,50 A30,30 0 1,0 15,50 A30,30 0 1,0 85,50 ZM65,50A15,15 0 1,0 35,50A15,15 0 1,0 65,50 Z" fill="transparent" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
fillColor: '#ff0000',
drawFunction: 'drawRing',
},
];
export { SHAPES };
export { SHAPES, ShapeCard };