feat:绘制图形

miniprogram/pages/shape/index.ts

@@ -10,6 +10,7 @@ Page({
     boxHeight: 0,
     boxWidth: 0,
     shapeDrawService: null as ShapeDrawService | null,
+    timer: null as any,
 
     data: {
         shapeList: [] as ShapeCard[],
@@ -93,6 +94,13 @@ Page({
         }
     },
 
+    handleSelectShape() {
+        this.setData({
+            showSelectShapePopup: true,
+            selectedShapeIndex: -1
+        });
+    },
+
     openSelectShapePopup(e: any) {
         const { index } = e.detail;
         this.setData({
@@ -104,7 +112,6 @@ Page({
     closeSelectShapePopup() {
         this.setData({
             showSelectShapePopup: false,
-            selectedShapeIndex: -1
         });
     },
 
@@ -174,12 +181,11 @@ Page({
             });
         }
 
+        // 先关闭弹窗
         this.setData({
             showSelectShapePopup: false,
-            selectedShapeIndex: -1,
-            shapeList: newShapeList
+            shapeList: newShapeList,
         }, () => {
-            // 绘制canvas
             this.drawCanvas();
         });
     },
@@ -233,56 +239,29 @@ Page({
         this.setData({
             showColorPopup: true,
             currentColor: fillColor,
-            currentIndex: index
+            selectedShapeIndex: index
         });
     },
     onCloseColorPopup() {
         this.setData({
             showColorPopup: false,
             currentColor: '',
-            currentIndex: 0
+            selectedShapeIndex: 0
         });
     },
     onChangeColor(e: any) {
         const { color } = e.detail;
-        const { currentIndex } = this.data;
+        const { selectedShapeIndex } = this.data;
 
         this.setData({
             showColorPopup: false,
-            [`shapeList[${currentIndex}].fillColor`]: color
+            [`shapeList[${selectedShapeIndex}].fillColor`]: color
         }, () => {
             // 绘制canvas
             this.drawCanvas();
         })
     },
 
-    // 测试ShapeDrawService
-    // testShapeDrawService() {
-    //     if (!this.shapeDrawService) {
-    //         wx.showToast({
-    //             title: 'Canvas未初始化',
-    //             icon: 'none'
-    //         });
-    //         return;
-    //     }
-
-    //     // 使用当前选中的图形进行测试
-    //     const testShapes = this.data.shapeList.slice(0, 3); // 只测试前3个图形
-    //     if (testShapes.length === 0) {
-    //         wx.showToast({
-    //             title: '请先选择图形',
-    //             icon: 'none'
-    //         });
-    //         return;
-    //     }
-
-    //     this.shapeDrawService.draw(testShapes);
-    //     wx.showToast({
-    //         title: '绘制完成',
-    //         icon: 'success'
-    //     });
-    // },
-
     onShareAppMessage() {
         return {
             title: '涂鸦丫-涂色|识字|画画|打印',
@@ -303,4 +282,10 @@ Page({
             return;
         }
     },
+
+    onUnload() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+    },
 });