feat: 添加图片旋转功能

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

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