feat: 测试图形绘制

2025-07-08 17:07:23 +08:00
parent ef39c86d5f
commit d1b451418e
7 changed files with 441 additions and 3 deletions
@@ -0,0 +1,61 @@
+// shapes.js
+const shapes = [
+    {
+        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>`,
+    },
+    {
+        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>`,
+    },
+    {
+        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: '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: '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: '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>`,
+    },
+];
+
+// 颜色选项
+const colors = [
+    { name: '红色', value: '#ff5252' },
+    { name: '蓝色', value: '#448aff' },
+    { name: '绿色', value: '#69f0ae' },
+    { name: '黄色', value: '#ffd740' },
+    { name: '紫色', value: '#e040fb' },
+];
+
+export { shapes, colors };