diff --git a/js/script.js b/js/script.js
index c1f5d97..7ab1712 100644
--- 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;
+ selectOverlay(overlayEl);
});
// 拖拽移动（不选中也可拖动）
@@ -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 });
}
// 显示右键菜单