feat:形状打印页测试

miniprogram/pages/shapePrint/shapes.js

@@ -1,61 +1,105 @@
-// shapes.js
+// shapes.js - 幼儿园到小学三年级基本几何形状定义
 const shapes = [
+    {
+        id: 'circle',
+        name: '圆形',
+        type: 'circle',
+        svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawCircle',
+    },
     {
         id: 'square',
         name: '正方形',
-        svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-            <rect x="5" y="5" width="90" height="90" fill="var(--fill-color)" stroke="black" stroke-width="2"/>
-          </svg>`,
+        type: 'rect',
+        svg: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawSquare',
+    },
+    {
+        id: 'rectangle',
+        name: '长方形',
+        type: 'rect',
+        svg: '<rect x="5" y="25" width="90" height="50" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawRectangle',
+    },
+    {
+        id: 'triangle',
+        name: '三角形',
+        type: 'triangle',
+        svg: '<polygon points="50,10 20,80 80,80" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawTriangle',
+    },
+    {
+        id: 'oval',
+        name: '椭圆形',
+        type: 'oval',
+        svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawOval',
     },
     {
         id: 'diamond',
         name: '菱形',
-        svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-            <polygon points="50,5 95,50 50,95 5,50" fill="var(--fill-color)" stroke="black" stroke-width="2"/>
-          </svg>`,
+        type: 'diamond',
+        svg: '<polygon points="50,10 80,50 50,90 20,50" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawDiamond',
     },
     {
-        id: 'cylinder',
-        name: '圆柱体',
-        svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-            <rect x="20" y="40" width="60" height="50" rx="5" ry="5" fill="var(--fill-color)" stroke="black" stroke-width="2"/>
-            <ellipse cx="50" cy="40" rx="30" ry="10" fill="var(--fill-color)" stroke="black" stroke-width="2"/>
-            <ellipse cx="50" cy="90" rx="30" ry="10" fill="var(--fill-color)" stroke="black" stroke-width="2" style="opacity:0.7"/>
-          </svg>`,
+        id: 'star',
+        name: '星形',
+        type: 'star',
+        svg: '<polygon points="50,5 60,35 90,35 70,55 80,85 50,70 20,85 30,55 10,35 40,35" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawStar',
     },
     {
-        id: 'cube',
-        name: '立方体',
-        svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-            <polygon points="20,30 50,10 80,30 50,50" fill="var(--fill-color)" stroke="black" stroke-width="2" opacity="0.9"/>
-            <polygon points="50,50 80,30 80,70 50,90" fill="var(--fill-color)" stroke="black" stroke-width="2" opacity="0.7"/>
-            <polygon points="20,30 20,70 50,90 50,50" fill="var(--fill-color)" stroke="black" stroke-width="2" opacity="0.8"/>
-          </svg>`,
+        id: 'heart',
+        name: '心形',
+        type: 'heart',
+        svg: '<path d="M50,85 C30,65 10,45 10,25 C10,15 20,5 30,5 C40,5 50,15 50,25 C50,15 60,5 70,5 C80,5 90,15 90,25 C90,45 70,65 50,85 Z" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawHeart',
     },
     {
-        id: 'circle',
-        name: '圆形',
-        svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-            <circle cx="50" cy="50" r="40" fill="var(--fill-color)" stroke="black" stroke-width="2"/>
-          </svg>`,
+        id: 'hexagon',
+        name: '六边形',
+        type: 'hexagon',
+        svg: '<polygon points="25,15 75,15 90,50 75,85 25,85 10,50" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawHexagon',
     },
     {
-        id: 'sphere',
-        name: '球体',
-        svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-            <circle cx="50" cy="50" r="40" fill="var(--fill-color)" stroke="black" stroke-width="2" style="opacity:0.9"/>
-            <ellipse cx="50" cy="50" rx="30" ry="10" fill="var(--fill-color)" stroke="black" stroke-width="2" style="opacity:0.7"/>
-          </svg>`,
+        id: 'pentagon',
+        name: '五边形',
+        type: 'pentagon',
+        svg: '<polygon points="50,10 80,35 65,75 35,75 20,35" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawPentagon',
+    },
+    {
+        id: 'semicircle',
+        name: '半圆形',
+        type: 'semicircle',
+        svg: '<path d="M 15 50 A 35 35 0 0 1 85 50 Z" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawSemicircle',
+    },
+    {
+        id: 'trapezoid',
+        name: '梯形',
+        type: 'trapezoid',
+        svg: '<polygon points="30,20 70,20 85,80 15,80" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawTrapezoid',
     },
 ];
 
 // 颜色选项
 const colors = [
-    { name: '红色', value: '#ff5252' },
-    { name: '蓝色', value: '#448aff' },
-    { name: '绿色', value: '#69f0ae' },
-    { name: '黄色', value: '#ffd740' },
-    { name: '紫色', value: '#e040fb' },
+    { name: '红色', value: '#FF4444' },
+    { name: '蓝色', value: '#4A90E2' },
+    { name: '绿色', value: '#7ED321' },
+    { name: '黄色', value: '#F5A623' },
+    { name: '紫色', value: '#9013FE' },
+    { name: '橙色', value: '#FF8F00' },
+    { name: '粉色', value: '#E91E63' },
+    { name: '青色', value: '#00BCD4' },
+    { name: '深绿', value: '#4CAF50' },
+    { name: '深蓝', value: '#2196F3' },
+    { name: '棕色', value: '#8D6E63' },
+    { name: '灰色', value: '#9E9E9E' },
 ];
 
 export { shapes, colors };