diff --git a/css/style.css b/css/style.css index c03ab43..f0de3de 100644 --- a/css/style.css +++ b/css/style.css @@ -23,18 +23,19 @@ html, body { .toolbar { display: flex; justify-content: center; - gap: 8px; - padding: 12px 16px; + align-items: center; + gap: 6px; + padding: 10px 12px; background: #fff; border-bottom: 1px solid #e0e0e0; flex-shrink: 0; } .btn { - min-width: 72px; - height: 40px; - padding: 0 12px; - font-size: 15px; + min-width: 68px; + height: 36px; + padding: 0 10px; + font-size: 14px; border: 1px solid #ddd; border-radius: 6px; background: #fff; @@ -65,29 +66,31 @@ html, body { /* 工具栏垂直分隔线 */ .toolbar-divider-v { width: 1px; - height: 24px; - background: #ddd; - margin: 0 4px; + height: 20px; + background: #e0e0e0; + margin: 0 2px; } /* 工具栏图标按钮 */ .toolbar-btn-icon { - width: 32px; - height: 32px; - font-size: 16px; + width: 28px; + height: 28px; + font-size: 14px; border: 1px solid #ddd; - border-radius: 6px; + border-radius: 5px; background: #fff; - color: #333; + color: #555; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; + padding: 0; } .toolbar-btn-icon:hover { background: #f5f5f5; + border-color: #ccc; } .toolbar-btn-icon:active { @@ -95,8 +98,9 @@ html, body { } .toolbar-btn-icon:disabled { - opacity: 0.4; + opacity: 0.3; cursor: not-allowed; + background: #f5f5f5; } /* 文本输入框删除按钮 */ diff --git a/js/script.js b/js/script.js index 7dcd68a..ba78266 100644 --- a/js/script.js +++ b/js/script.js @@ -493,25 +493,12 @@ // 恢复层叠图 overlayLayer.innerHTML = ''; state.overlays.forEach(overlayData => { - const div = document.createElement('div'); - div.className = 'overlay-image'; - div.style.left = overlayData.left; - div.style.top = overlayData.top; - div.style.width = overlayData.width; - div.style.height = overlayData.height; - div.style.opacity = overlayData.opacity; - div.style.transform = overlayData.transform; - - const img = document.createElement('img'); + // 创建新图片对象 + const img = new Image(); + img.onload = () => { + createOverlayElementFromData(img, overlayData); + }; img.src = overlayData.src; - img.style.transform = overlayData.imgTransform; - img.draggable = false; - - div.appendChild(img); - overlayLayer.appendChild(div); - - // 重新初始化拖拽 - initOverlayDrag(div); }); // 恢复文本输入框 @@ -798,6 +785,46 @@ saveState(true); } + // 从数据创建层叠图元素(用于撤销恢复) + function createOverlayElementFromData(img, overlayData) { + // 创建层叠图元素 + const overlayEl = document.createElement('div'); + overlayEl.className = 'overlay-image'; + overlayEl.dataset.scale = 1; + + const imgEl = document.createElement('img'); + imgEl.src = img.src; + imgEl.style.width = '100%'; + imgEl.style.height = '100%'; + imgEl.style.objectFit = 'contain'; + imgEl.style.transform = overlayData.imgTransform || ''; + overlayEl.appendChild(imgEl); + + // 删除按钮 + const deleteBtn = document.createElement('button'); + deleteBtn.className = 'delete-btn'; + deleteBtn.innerHTML = '×'; + deleteBtn.addEventListener('click', (e) => { + e.stopPropagation(); + overlayEl.remove(); + saveState(true); + }); + overlayEl.appendChild(deleteBtn); + + // 恢复位置和尺寸 + overlayEl.style.left = overlayData.left; + overlayEl.style.top = overlayData.top; + overlayEl.style.width = overlayData.width; + overlayEl.style.height = overlayData.height; + overlayEl.style.opacity = overlayData.opacity || '1'; + overlayEl.style.transform = overlayData.transform || ''; + + // 初始化拖拽和缩放 + initOverlayImage(overlayEl); + + overlayLayer.appendChild(overlayEl); + } + // 初始化层叠图交互 function initOverlayImage(overlayEl) { let isDragging = false;