From da2f3cfbff0d76eb4df090ccef5fc1bf9a13f149 Mon Sep 17 00:00:00 2001
From: Zhukj <3262118957>
Date: Tue, 21 Apr 2026 16:17:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=97=8B=E8=BD=AC=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在工具栏中添加旋转滑块控件
- 实现图片旋转功能及角度显示
- 支持读取和更新当前选中图片的旋转角度
---
 css/style.css |  8 ++++++++
 index.html    |  6 ++++++
 js/script.js  | 18 ++++++++++++++++++
 3 files changed, 32 insertions(+)

diff --git a/css/style.css b/css/style.css
index 76181f7..9a62c9b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -233,6 +233,14 @@ html, body {
     margin: 0;
 }
 
+.rotate-slider {
+    width: 100px;
+    height: 32px;
+    cursor: pointer;
+    accent-color: #4a90e2;
+    margin: 0;
+}
+
 /* 字号滚轮选择器 */
 .roller-picker {
     display: flex;
diff --git a/index.html b/index.html
index 2f0832a..7a3ffaa 100644
--- a/index.html
+++ b/index.html
@@ -57,6 +57,12 @@
                     <input type="range" id="opacitySlider" min="0" max="100" value="100" class="opacity-slider">
                     <span id="opacityValue">100%</span>
                 </label>
+                <div class="toolbar-divider"></div>
+                <label class="toolbar-label">
+                    <span>旋转</span>
+                    <input type="range" id="rotateSlider" min="-180" max="180" value="0" class="rotate-slider">
+                    <span id="rotateValue">0°</span>
+                </label>
             </div>
             <!-- 背景图编辑工具 -->
             <div class="toolbar-group bg-tools" id="bgTools">
diff --git a/js/script.js b/js/script.js
index 42b119f..48c1bc9 100644
--- a/js/script.js
+++ b/js/script.js
@@ -21,6 +21,8 @@
     const bgTools = document.getElementById('bgTools');
     const opacitySlider = document.getElementById('opacitySlider');
     const opacityValue = document.getElementById('opacityValue');
+    const rotateSlider = document.getElementById('rotateSlider');
+    const rotateValue = document.getElementById('rotateValue');
     const bgScaleSlider = document.getElementById('bgScaleSlider');
     const bgScaleValue = document.getElementById('bgScaleValue');
     const bgOpacitySlider = document.getElementById('bgOpacitySlider');
@@ -125,6 +127,15 @@
             }
         });
 
+        // 旋转滑块
+        rotateSlider.addEventListener('input', (e) => {
+            if (selectedOverlay) {
+                const rotateDeg = e.target.value;
+                selectedOverlay.style.transform = `rotate(${rotateDeg}deg)`;
+                rotateValue.textContent = rotateDeg + '°';
+            }
+        });
+
         // 背景图缩放滑块
         bgScaleSlider.addEventListener('input', (e) => {
             bgImageScale = e.target.value / 100;
@@ -622,6 +633,13 @@
         const currentOpacity = overlayEl.style.opacity || '1';
         opacitySlider.value = parseFloat(currentOpacity) * 100;
         opacityValue.textContent = opacitySlider.value + '%';
+
+        // 更新旋转滑块为当前层叠图的旋转角度
+        const currentTransform = overlayEl.style.transform || '';
+        const rotateMatch = currentTransform.match(/rotate\(([-\d.]+)deg\)/);
+        const currentRotate = rotateMatch ? parseFloat(rotateMatch[1]) : 0;
+        rotateSlider.value = currentRotate;
+        rotateValue.textContent = currentRotate + '°';
     }
 
     // 计算图片滑动边界