From 848277849ab88181523c34b3ed2e9f6f3386f5d1 Mon Sep 17 00:00:00 2001
From: Zhukj <3262118957>
Date: Wed, 22 Apr 2026 10:57:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=94=BB=E5=B8=83):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=97=8B=E8=BD=AC=E5=92=8C=E9=95=9C=E5=83=8F?=
 =?UTF-8?q?=E5=8F=98=E6=8D=A2=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 drawImageWithTransform 函数处理图片的旋转和镜像变换，修改图片绘制逻辑以支持这些效果
---
 js/script.js | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/js/script.js b/js/script.js
index a4198b0..b67cc00 100644
--- a/js/script.js
+++ b/js/script.js
@@ -2479,15 +2479,25 @@
 
                 ctx.globalAlpha = overlayEl.style.opacity || 1;
 
+                // 获取旋转角度
+                const overlayTransform = overlayEl.style.transform || '';
+                const rotateMatch = overlayTransform.match(/rotate\(([-\d.]+)deg\)/);
+                const rotateDeg = rotateMatch ? parseFloat(rotateMatch[1]) : 0;
+
+                // 获取镜像状态
+                const imgTransform = imgEl.style.transform || '';
+                const isMirroredH = imgTransform.includes('scaleX(-1)');
+                const isMirroredV = imgTransform.includes('scaleY(-1)');
+
                 // 直接使用已加载的图片元素，避免重新加载导致质量下降
                 if (imgEl.complete && imgEl.naturalWidth > 0) {
-                    ctx.drawImage(imgEl, left, top, width, height);
+                    drawImageWithTransform(ctx, imgEl, left, top, width, height, rotateDeg, isMirroredH, isMirroredV);
                     ctx.globalAlpha = 1;
                     checkComplete();
                 } else {
                     // 如果图片未加载完成，等待加载
                     imgEl.onload = () => {
-                        ctx.drawImage(imgEl, left, top, width, height);
+                        drawImageWithTransform(ctx, imgEl, left, top, width, height, rotateDeg, isMirroredH, isMirroredV);
                         ctx.globalAlpha = 1;
                         checkComplete();
                     };
@@ -2500,6 +2510,31 @@
         });
     }
 
+    // 绘制带旋转和镜像变换的图片
+    function drawImageWithTransform(ctx, img, x, y, width, height, rotateDeg, isMirroredH, isMirroredV) {
+        ctx.save();
+        
+        // 移动到图片中心点
+        const centerX = x + width / 2;
+        const centerY = y + height / 2;
+        ctx.translate(centerX, centerY);
+        
+        // 应用旋转
+        if (rotateDeg !== 0) {
+            ctx.rotate(rotateDeg * Math.PI / 180);
+        }
+        
+        // 应用镜像
+        let scaleX = isMirroredH ? -1 : 1;
+        let scaleY = isMirroredV ? -1 : 1;
+        ctx.scale(scaleX, scaleY);
+        
+        // 绘制图片（从中心点偏移一半宽高）
+        ctx.drawImage(img, -width / 2, -height / 2, width, height);
+        
+        ctx.restore();
+    }
+
     // 在画布上绘制文字
     function drawTextOnCanvas(ctx, inputElement) {
         const deleteBtn = inputElement.querySelector('.text-delete-btn');