feat: 新增文本框删除按钮功能（还原到）

2026-04-18 14:35:08 +08:00
parent 10bbf83e82
commit b69bfae1bb
3 changed files with 19 additions and 117 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -17,7 +17,6 @@ html, body {
    display: flex;
    flex-direction: column;
    height: 100vh;
-    position: relative;
 }

 /* 顶部工具栏 */
@@ -82,10 +81,6 @@ html, body {

 /* 文本编辑器工具栏 */
 .text-editor-toolbar {
-    position: absolute;
-    top: 49px;
-    left: 0;
-    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
@@ -97,7 +92,6 @@ html, body {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
-    z-index: 100;
 }

 .text-editor-toolbar.active {
@@ -105,31 +99,6 @@ html, body {
    opacity: 1;
 }

-/* 图片编辑器工具栏 - 与文本编辑器共享位置 */
-.image-editor-toolbar {
-    position: absolute;
-    top: 49px;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 16px;
-    background: #fff;
-    border-bottom: 1px solid #e0e0e0;
-    flex-shrink: 0;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.2s;
-    z-index: 100;
-}
-
-.image-editor-toolbar.active {
-    visibility: visible;
-    opacity: 1;
-}
-
 .toolbar-btn {
    width: 40px;
    height: 40px;
--- a/index.html
+++ b/index.html
@@ -46,18 +46,6 @@
            </label>
        </div>

-        <!-- 图片编辑器工具栏 -->
-        <div class="image-editor-toolbar" id="imageEditorToolbar">
-            <label class="toolbar-label">
-                <span>透明度</span>
-                <div class="roller-picker" id="opacityPicker">
-                    <div class="roller-arrow roller-up">▲</div>
-                    <div class="roller-value">100</div>
-                    <div class="roller-arrow roller-down">▼</div>
-                </div>
-            </label>
-        </div>
-
        <!-- 图片展示区 -->
        <div class="canvas-area" id="canvasArea">
            <div class="preview image-container empty" id="imageContainer">
--- a/js/script.js
+++ b/js/script.js
@@ -15,13 +15,11 @@
    const longPressTip = document.getElementById('longPressTip');
    const canvasArea = document.getElementById('canvasArea');
    const textEditorToolbar = document.getElementById('textEditorToolbar');
-    const imageEditorToolbar = document.getElementById('imageEditorToolbar');
    const boldBtn = document.getElementById('boldBtn');
    const italicBtn = document.getElementById('italicBtn');
    const colorPicker = document.getElementById('colorPicker');
    const fontPicker = document.getElementById('fontPicker');
    const fontSizePicker = document.getElementById('fontSizePicker');
-    const opacityPicker = document.getElementById('opacityPicker');
    const overlayLayer = document.getElementById('overlayLayer');
    const overlayInput = document.createElement('input');
    overlayInput.type = 'file';
@@ -144,9 +142,8 @@
                }
                // 隐藏辅助线
                hideGuides();
-                // 隐藏文本编辑器工具栏和图片编辑器工具栏
+                // 隐藏文本编辑器工具栏
                textEditorToolbar.classList.remove('active');
-                imageEditorToolbar.classList.remove('active');
            }

            // 点击空白区域（不是层叠图和输入框）
@@ -310,16 +307,12 @@
        let isDragging = false;
        let isResizing = false;
        let startX, startY, startLeft, startTop, startWidth, startHeight;
-        let hasMoved = false;
        const minSize = 30;

        // 点击选中（区分点击和拖拽）
        overlayEl.addEventListener('click', (e) => {
            e.stopPropagation();
-            if (!hasMoved) {
            selectOverlay(overlayEl);
-            }
-            hasMoved = false;
        });

        // 拖拽移动（不选中也可拖动）
@@ -336,7 +329,6 @@
            const clientY = isTouch ? e.touches[0].clientY : e.clientY;

            isDragging = true;
-            hasMoved = false;
            startX = clientX;
            startY = clientY;
            startLeft = overlayEl.offsetLeft;
@@ -344,6 +336,7 @@

            overlayEl.classList.add('dragging');

+            // 拖动时设置为选中状态
            selectOverlay(overlayEl);

            document.addEventListener('mousemove', handleDragMove);
@@ -364,10 +357,21 @@

            const moveDistance = Math.sqrt(dx * dx + dy * dy);
            if (moveDistance > 5) {
-                hasMoved = true;
                let newLeft = startLeft + dx;
                let newTop = startTop + dy;

+                // 使用吸附功能
+                const snapped = getSnapPosition(overlayEl, newLeft, newTop);
+                newLeft = snapped.left;
+                newTop = snapped.top;
+
+                // 显示对齐辅助线
+                if (snapped.showGuide) {
+                    showAlignmentGuides(overlayEl);
+                } else {
+                    hideGuides();
+                }
+
                overlayEl.style.left = newLeft + 'px';
                overlayEl.style.top = newTop + 'px';
            }
@@ -378,6 +382,7 @@
        function handleDragEnd() {
            isDragging = false;
            overlayEl.classList.remove('dragging');
+            hideGuides();

            document.removeEventListener('mousemove', handleDragMove);
            document.removeEventListener('mouseup', handleDragEnd);
@@ -501,15 +506,6 @@
        }
        selectedOverlay = overlayEl;
        overlayEl.classList.add('selected');
-
-        // 显示图片编辑器工具栏，隐藏文本编辑器工具栏
-        imageEditorToolbar.classList.add('active');
-        textEditorToolbar.classList.remove('active');
-
-        // 更新透明度值显示
-        const currentOpacity = Math.round(parseFloat(overlayEl.style.opacity || 1) * 100);
-        opacityValue = currentOpacity;
-        opacityValueEl.textContent = currentOpacity;
    }

    // 计算图片滑动边界
@@ -601,11 +597,6 @@
                return;
            }

-            // 如果点击的是层叠图，不处理图片滑动（让层叠图的拖拽处理）
-            if (e.target.closest('.overlay-image')) {
-                return;
-            }
-
            // 如果正在编辑，先退出编辑状态
            if (editingInput) {
                deselectAll();
@@ -846,9 +837,8 @@
        element.classList.remove('editing');
        element.contentEditable = 'false';

-        // 显示文本编辑器工具栏，隐藏图片编辑器工具栏
+        // 显示文本编辑器工具栏
        textEditorToolbar.classList.add('active');
-        imageEditorToolbar.classList.remove('active');

        // 更新工具栏状态
        updateToolbarState(element);
@@ -867,9 +857,8 @@
        element.classList.remove('selected');
        element.contentEditable = 'true';

-        // 显示文本编辑器工具栏，隐藏图片编辑器工具栏
+        // 显示文本编辑器工具栏
        textEditorToolbar.classList.add('active');
-        imageEditorToolbar.classList.remove('active');

        // 更新工具栏状态
        updateToolbarState(element);
@@ -1325,13 +1314,8 @@
            selectedInput.classList.remove('selected');
            selectedInput = null;
        }
-        if (selectedOverlay) {
-            selectedOverlay.classList.remove('selected');
-            selectedOverlay = null;
-        }
-        // 隐藏所有工具栏
+        // 隐藏文本编辑器工具栏
        textEditorToolbar.classList.remove('active');
-        imageEditorToolbar.classList.remove('active');
    }

    // 初始化长按保存（只在3:5预览区域）
@@ -1484,45 +1468,6 @@
                updateFontSize(currentSize + delta, true);
            }
        }, { passive: false });
-
-        // 透明度选择器 - 密码锁式滚轮
-        let opacityValue = 100;
-        const opacityRoller = document.getElementById('opacityPicker');
-        const opacityValueEl = opacityRoller.querySelector('.roller-value');
-        const opacityUpBtn = opacityRoller.querySelector('.roller-up');
-        const opacityDownBtn = opacityRoller.querySelector('.roller-down');
-
-        function updateOpacity(newOpacity, forceUpdate = false) {
-            newOpacity = Math.max(0, Math.min(100, newOpacity));
-            if (selectedOverlay) {
-                selectedOverlay.style.opacity = newOpacity / 100;
-                opacityValue = newOpacity;
-                opacityValueEl.textContent = newOpacity;
-            } else {
-                opacityValue = newOpacity;
-                opacityValueEl.textContent = newOpacity;
-            }
-        }
-
-        opacityUpBtn.addEventListener('click', () => {
-            if (selectedOverlay) {
-                updateOpacity(opacityValue + 5, true);
-            }
-        });
-
-        opacityDownBtn.addEventListener('click', () => {
-            if (selectedOverlay) {
-                updateOpacity(opacityValue - 5, true);
-            }
-        });
-
-        opacityRoller.addEventListener('wheel', (e) => {
-            e.preventDefault();
-            if (selectedOverlay) {
-                const delta = e.deltaY > 0 ? -5 : 5;
-                updateOpacity(opacityValue + delta, true);
-            }
-        }, { passive: false });
    }

    // 显示右键菜单