From 22ba7dd6a340d5d07cbe6928aec384e8e93a92f3 Mon Sep 17 00:00:00 2001 From: Zhukj <3262118957> Date: Sat, 18 Apr 2026 14:55:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=EF=BC=8C=E4=B8=8E=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E5=85=B1=E7=94=A8=E5=B7=A5=E5=85=B7=E6=A0=8F=EF=BC=8C=E9=80=89?= =?UTF-8?q?=E4=B8=AD=E5=88=87=E6=8D=A2=E7=BC=96=E8=BE=91=E9=9D=A2=E6=9D=BF?= =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=E5=9B=BE=E7=89=87=E9=80=8F=E6=98=8E?= =?UTF-8?q?=E5=BA=A6=E8=B0=83=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 ++- css/style.css | 31 ++++++++++++++++++++---- index.html | 66 +++++++++++++++++++++++++++++---------------------- js/script.js | 49 ++++++++++++++++++++++++++++---------- 4 files changed, 103 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index c7777f6..9c36247 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,8 @@ 16. 顶部工具栏新增层叠图，可添加多张层叠图，单击选中状态可缩放删除自由移动位置，置于背景图之上，输入框与层叠图点击只能同时选中一个 17. 层叠图添加辅助线 18. 可添加多个文本框，以及文本框删除功能 -19. 添加图片编辑器工具栏，图片编辑器与文本编辑器共用同一位置工具栏，选中对应元素切换对应编辑面板，点击空白出隐藏面板，修复层叠图不可移动问题 +19. 添加图片编辑器工具栏，图片编辑器与文本编辑器共用同一位置工具栏，选中对应元素切换对应编辑面板，点击空白处隐藏面板 +20. 当选择文字的时候工具栏对应出现文字编辑器，当选择图片的时候工具栏对应出现图片编辑器，点击其他位置时隐藏工具栏 diff --git a/css/style.css b/css/style.css index 3a5053a..c112771 100644 --- a/css/style.css +++ b/css/style.css @@ -79,12 +79,15 @@ html, body { display: block; } -/* 文本编辑器工具栏 */ -.text-editor-toolbar { +/* 编辑器工具栏（文本/图片共用） */ +.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; @@ -92,13 +95,25 @@ html, body { visibility: hidden; opacity: 0; transition: opacity 0.2s; + z-index: 100; } -.text-editor-toolbar.active { +.editor-toolbar.active { visibility: visible; opacity: 1; } +.toolbar-group { + display: none; + justify-content: center; + align-items: center; + gap: 8px; +} + +.toolbar-group.active { + display: flex; +} + .toolbar-btn { width: 40px; height: 40px; @@ -150,6 +165,14 @@ html, body { cursor: pointer; } +.opacity-slider { + width: 120px; + height: 40px; + cursor: pointer; + accent-color: #4a90e2; + margin: 0; +} + /* 字号滚轮选择器 */ .roller-picker { display: flex; diff --git a/index.html b/index.html index 105d03c..d9e979e 100644 --- a/index.html +++ b/index.html @@ -16,34 +16,44 @@ - -
- - -
- -
- -
- + +
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
diff --git a/js/script.js b/js/script.js index 7ab1712..3ca8f8e 100644 --- a/js/script.js +++ b/js/script.js @@ -14,7 +14,10 @@ const exportCanvas = document.getElementById('exportCanvas'); const longPressTip = document.getElementById('longPressTip'); const canvasArea = document.getElementById('canvasArea'); - const textEditorToolbar = document.getElementById('textEditorToolbar'); + const editorToolbar = document.getElementById('editorToolbar'); + const textTools = document.getElementById('textTools'); + const imageTools = document.getElementById('imageTools'); + const opacitySlider = document.getElementById('opacitySlider'); const boldBtn = document.getElementById('boldBtn'); const italicBtn = document.getElementById('italicBtn'); const colorPicker = document.getElementById('colorPicker'); @@ -101,15 +104,22 @@ // 初始化图片滑动 initImageDrag(); + // 透明度滑块 + opacitySlider.addEventListener('input', (e) => { + if (selectedOverlay) { + selectedOverlay.style.opacity = e.target.value / 100; + } + }); + // 点击空白区域取消选中 document.addEventListener('click', (e) => { // 只有点击真正的空白区域（不是输入框，不是图片容器，不是工具栏）才取消选中 const isTextInput = e.target.closest('.text-input'); const isImageContainer = e.target.closest('.image-container'); const isToolbar = e.target.closest('.toolbar'); - const isTextEditorToolbar = e.target.closest('.text-editor-toolbar'); + const isEditorToolbar = e.target.closest('.editor-toolbar'); - if (!isTextInput && !isImageContainer && !isToolbar && !isTextEditorToolbar) { + if (!isTextInput && !isImageContainer && !isToolbar && !isEditorToolbar) { deselectAll(); } }); @@ -142,8 +152,8 @@ } // 隐藏辅助线 hideGuides(); - // 隐藏文本编辑器工具栏 - textEditorToolbar.classList.remove('active'); + // 隐藏编辑器工具栏 + editorToolbar.classList.remove('active'); } // 点击空白区域（不是层叠图和输入框） @@ -506,6 +516,15 @@ } selectedOverlay = overlayEl; overlayEl.classList.add('selected'); + + // 显示编辑器工具栏和图片工具 + editorToolbar.classList.add('active'); + textTools.classList.remove('active'); + imageTools.classList.add('active'); + + // 更新透明度滑块为当前层叠图的透明度 + const currentOpacity = overlayEl.style.opacity || '1'; + opacitySlider.value = parseFloat(currentOpacity) * 100; } // 计算图片滑动边界 @@ -837,8 +856,10 @@ element.classList.remove('editing'); element.contentEditable = 'false'; - // 显示文本编辑器工具栏 - textEditorToolbar.classList.add('active'); + // 显示编辑器工具栏和文本工具 + editorToolbar.classList.add('active'); + textTools.classList.add('active'); + imageTools.classList.remove('active'); // 更新工具栏状态 updateToolbarState(element); @@ -857,8 +878,10 @@ element.classList.remove('selected'); element.contentEditable = 'true'; - // 显示文本编辑器工具栏 - textEditorToolbar.classList.add('active'); + // 显示编辑器工具栏和文本工具 + editorToolbar.classList.add('active'); + textTools.classList.add('active'); + imageTools.classList.remove('active'); // 更新工具栏状态 updateToolbarState(element); @@ -888,8 +911,8 @@ element.contentEditable = 'false'; element.blur(); editingInput = null; - // 隐藏文本编辑器工具栏 - textEditorToolbar.classList.remove('active'); + // 隐藏编辑器工具栏 + editorToolbar.classList.remove('active'); } // 更新工具栏状态 @@ -1314,8 +1337,8 @@ selectedInput.classList.remove('selected'); selectedInput = null; } - // 隐藏文本编辑器工具栏 - textEditorToolbar.classList.remove('active'); + // 隐藏编辑器工具栏 + editorToolbar.classList.remove('active'); } // 初始化长按保存（只在3:5预览区域）