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