-
-
-
-
-
-
-
-
+
+
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预览区域）