feat: 图形测试

miniprogram/demoPages/shapePrint/index.js

@@ -35,14 +35,68 @@ Page({
 
     onLoad() {
         console.log('形状绘制页面加载完成');
+
+        // 为可选形状生成SVG内容
+        const shapesWithSVG = this.data.availableShapes.map((shape) => ({
+            ...shape,
+            svgContent: this.createSVGElement(shape, 'transparent', '#333', 50),
+        }));
+
         // 初始化临时选择列表
         this.setData({
+            availableShapes: shapesWithSVG,
             tempSelectedShapeIds: this.data.selectedShapes.map(
                 (shape) => shape.id,
             ),
         });
     },
 
+    // 生成带颜色的SVG字符串
+    generateColoredSVG(shape, fillColor = '#666', borderColor = '#333') {
+        if (!shape || !shape.svg) return '';
+
+        let svg = shape.svg;
+
+        // 替换stroke属性
+        svg = svg.replace(/stroke="[^"]*"/g, `stroke="${borderColor}"`);
+
+        // 处理fill属性
+        if (fillColor && fillColor !== 'transparent') {
+            svg = svg.replace(/fill="[^"]*"/g, `fill="${fillColor}"`);
+        }
+
+        // 确保stroke-width存在
+        if (!svg.includes('stroke-width')) {
+            svg = svg.replace(
+                /(<(?:circle|rect|polygon|ellipse|path|line)[^>]*?)>/g,
+                '$1 stroke-width="2">',
+            );
+        }
+
+        return svg;
+    },
+
+    // 创建SVG的base64数据URL
+    createSVGElement(shape, fillColor, borderColor, size = 60) {
+        const coloredSVG = this.generateColoredSVG(
+            shape,
+            fillColor,
+            borderColor,
+        );
+
+        const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="${size}" height="${size}">${coloredSVG}</svg>`;
+
+        // 转换为base64
+        const base64 = wx.arrayBufferToBase64(
+            new TextEncoder().encode(svgContent),
+        );
+
+        // 可选：调试日志（发布时移除）
+        // console.log(`Creating SVG for ${shape.name}:`, { svgContent });
+
+        return `data:image/svg+xml;base64,${base64}`;
+    },
+
     // 打开形状选择器
     openShapeSelector() {
         this.setData({
@@ -107,8 +161,17 @@ Page({
                     (s) => s.shapeId === shapeId,
                 );
                 if (existingShape) {
-                    // 保持原有颜色
-                    newSelectedShapes.push(existingShape);
+                    // 保持原有颜色，更新SVG内容
+                    const updatedShape = {
+                        ...existingShape,
+                        svgContent: this.createSVGElement(
+                            shape,
+                            existingShape.fillColor,
+                            '#333',
+                            60,
+                        ),
+                    };
+                    newSelectedShapes.push(updatedShape);
                     const colorIndex = this.data.basic12Colors.findIndex(
                         (c) => c.hex === existingShape.fillColor,
                     );
@@ -119,14 +182,21 @@ Page({
                     // 新形状，分配随机颜色
                     const randomColor =
                         this.getRandomUnusedColor(usedColorIndexes);
-                    newSelectedShapes.push({
+                    const newShape = {
                         id: Date.now() + index,
                         shapeId: shape.id,
                         name: shape.name,
                         fillColor: randomColor.hex,
                         colorName: randomColor.name,
                         drawFunction: shape.drawFunction,
-                    });
+                        svgContent: this.createSVGElement(
+                            shape,
+                            randomColor.hex,
+                            '#333',
+                            60,
+                        ),
+                    };
+                    newSelectedShapes.push(newShape);
                 }
             }
         });
@@ -250,6 +320,10 @@ Page({
 
         if (currentEditingIndex >= 0) {
             const newSelectedShapes = [...selectedShapes];
+            const currentShape = newSelectedShapes[currentEditingIndex];
+            const shapeDefinition = this.data.availableShapes.find(
+                (s) => s.id === currentShape.shapeId,
+            );
             const colorInfo = basic12Colors.find((c) => c.hex === color) ||
                 WATER_COLORS.extended24.find((c) => c.hex === color) || {
                     name: '自定义色',
@@ -257,9 +331,15 @@ Page({
                 };
 
             newSelectedShapes[currentEditingIndex] = {
-                ...newSelectedShapes[currentEditingIndex],
+                ...currentShape,
                 fillColor: color,
                 colorName: colorInfo.name,
+                svgContent: this.createSVGElement(
+                    shapeDefinition,
+                    color,
+                    '#333',
+                    60,
+                ),
             };
 
             this.setData(
@@ -338,19 +418,29 @@ Page({
             this.drawPracticeArea(ctx, width, height);
 
             // 导出图片
-            const tempFilePath = canvas.toTempFilePathSync({
+            wx.canvasToTempFilePath({
+                canvas: canvas,
                 fileType: 'png',
                 quality: 1,
-            });
+                success: (res) => {
+                    this.setData({
+                        generatedImage: res.tempFilePath,
+                        isGenerating: false,
+                    });
 
-            this.setData({
-                generatedImage: tempFilePath,
-                isGenerating: false,
-            });
-
-            wx.showToast({
-                title: '生成完成',
-                icon: 'success',
+                    wx.showToast({
+                        title: '生成完成',
+                        icon: 'success',
+                    });
+                },
+                fail: (error) => {
+                    console.error('导出图片失败:', error);
+                    this.setData({ isGenerating: false });
+                    wx.showToast({
+                        title: '生成失败，请重试',
+                        icon: 'none',
+                    });
+                },
             });
         } catch (error) {
             console.error('生成图片失败:', error);