feat: 添加图片旋转功能

- 在工具栏中添加旋转滑块控件
- 实现图片旋转功能及角度显示
- 支持读取和更新当前选中图片的旋转角度

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;

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">

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 + '°';
     }
 
     // 计算图片滑动边界