feat(旋转控制): 为旋转滑块添加吸附功能并固定数值显示宽度

在旋转滑块附近0°、-90°、90°时添加5度的吸附阈值，使操作更精准为旋转度数和百分比数值显示元素设置固定宽度，保持布局稳定
2026-04-21 16:30:51 +08:00
parent da2f3cfbff
commit 0665987a03
2 changed files with 29 additions and 1 deletions
--- a/js/script.js
+++ b/js/script.js
@@ -130,7 +130,21 @@
        // 旋转滑块
        rotateSlider.addEventListener('input', (e) => {
            if (selectedOverlay) {
-                const rotateDeg = e.target.value;
+                let rotateDeg = parseInt(e.target.value);
+                
+                // 吸附功能：在 0°、-90°、90° 附近吸附
+                const snapAngles = [0, -90, 90];
+                const snapThreshold = 5; // 吸附阈值 5 度
+                
+                for (const snapAngle of snapAngles) {
+                    if (Math.abs(rotateDeg - snapAngle) < snapThreshold) {
+                        rotateDeg = snapAngle;
+                        // 更新滑动条位置
+                        rotateSlider.value = rotateDeg;
+                        break;
+                    }
+                }
+                
                selectedOverlay.style.transform = `rotate(${rotateDeg}deg)`;
                rotateValue.textContent = rotateDeg + '°';
            }