diff --git a/css/qr.css b/css/qr.css index 900b6a9..776dfe5 100644 --- a/css/qr.css +++ b/css/qr.css @@ -142,6 +142,36 @@ outline-offset: 2px; } +/* 删除按钮 */ +.qr-delete-btn { + position: absolute; + top: -10px; + right: -10px; + width: 20px; + height: 20px; + background: #ff4444; + color: #fff; + border: none; + border-radius: 50%; + font-size: 16px; + line-height: 20px; + cursor: pointer; + display: none; + align-items: center; + justify-content: center; + z-index: 100; + padding: 0; + margin: 0; +} + +.qr-item.qr-selected .qr-delete-btn { + display: flex; +} + +.qr-delete-btn:hover { + background: #cc0000; +} + /* ========== 二维码工具栏 - 与背景图工具栏保持一致 ========== */ .qr-tools { display: none; diff --git a/js/qr.js b/js/qr.js index 8fac91c..0846e72 100644 --- a/js/qr.js +++ b/js/qr.js @@ -119,21 +119,63 @@ const container = document.getElementById('imageContainer'); const rect = container.getBoundingClientRect(); - const img = document.createElement('img'); - img.src = canvas.toDataURL('image/png'); - img.className = 'qr-item'; - img.dataset.type = 'qrcode'; - img.style.cssText = ` + // 创建二维码容器 + const wrapper = document.createElement('div'); + wrapper.className = 'qr-item'; + wrapper.dataset.type = 'qrcode'; + wrapper.style.cssText = ` + position: absolute; width: ${CONFIG.DEFAULT_SIZE}px; height: ${CONFIG.DEFAULT_SIZE}px; - opacity: 1; left: ${(rect.width / 2 - CONFIG.DEFAULT_SIZE / 2)}px; top: ${(rect.height / 2 - CONFIG.DEFAULT_SIZE / 2)}px; `; - container.appendChild(img); - makeDraggable(img); - selectQR(img); + // 创建二维码图片 + const img = document.createElement('img'); + img.src = canvas.toDataURL('image/png'); + img.style.cssText = ` + width: 100%; + height: 100%; + opacity: 1; + display: block; + `; + + // 创建删除按钮 + const deleteBtn = document.createElement('button'); + deleteBtn.className = 'qr-delete-btn'; + deleteBtn.innerHTML = '×'; + deleteBtn.title = '删除二维码'; + deleteBtn.type = 'button'; + + // 删除按钮点击事件 + deleteBtn.onclick = function(e) { + e.preventDefault(); + e.stopPropagation(); + + // 删除二维码元素 + wrapper.remove(); + + // 清除选中状态 + if (state.selectedQR === wrapper) { + state.selectedQR = null; + hideQRTools(); + if (elements.editorToolbar) { + elements.editorToolbar.classList.remove('active'); + } + } + + // 保存状态 + saveState(); + + return false; + }; + + wrapper.appendChild(img); + wrapper.appendChild(deleteBtn); + container.appendChild(wrapper); + makeDraggable(wrapper); + selectQR(wrapper); closeModal(); saveState(); @@ -187,7 +229,8 @@ function syncToolbarValues() { if (!state.selectedQR) return; - const opacity = parseFloat(state.selectedQR.style.opacity) || 1; + const img = state.selectedQR.querySelector('img'); + const opacity = img ? (parseFloat(img.style.opacity) || 1) : 1; const size = parseInt(state.selectedQR.style.width) || CONFIG.DEFAULT_SIZE; if (elements.qrOpacitySlider) { @@ -222,7 +265,10 @@ function updateOpacity(value) { if (!state.selectedQR) return; - state.selectedQR.style.opacity = value / 100; + const img = state.selectedQR.querySelector('img'); + if (img) { + img.style.opacity = value / 100; + } elements.qrOpacityValue.textContent = value + '%'; } @@ -278,16 +324,24 @@ } } - // 鼠标事件 + // 鼠标事件 - 排除删除按钮 el.addEventListener('mousedown', (e) => { + // 如果点击的是删除按钮,不处理拖拽 + if (e.target.closest('.qr-delete-btn')) { + return; + } e.preventDefault(); e.stopPropagation(); selectQR(el); startDrag(e.clientX, e.clientY); }); - // 触摸事件 + // 触摸事件 - 排除删除按钮 el.addEventListener('touchstart', (e) => { + // 如果触摸的是删除按钮,不处理拖拽 + if (e.target.closest('.qr-delete-btn')) { + return; + } e.preventDefault(); e.stopPropagation(); selectQR(el);