diff --git a/dsLightRag/XingJun/move.html b/dsLightRag/XingJun/move.html index afc38374..7db70271 100644 --- a/dsLightRag/XingJun/move.html +++ b/dsLightRag/XingJun/move.html @@ -40,6 +40,8 @@ + +
删除箭头
@@ -51,11 +53,83 @@ const imageButtons = document.querySelectorAll('.image-btn'); const saveBtn = document.getElementById('savePositionsBtn'); const markCenterBtn = document.getElementById('markCenterBtn'); + const startAnimationBtn = document.getElementById('startAnimationBtn'); + const resetBtn = document.getElementById('resetBtn'); const contextMenu = document.getElementById('contextMenu'); const deleteArrow = document.getElementById('deleteArrow'); let selectedArrow = null; let centerDot = null; + // 添加重置按钮事件监听器 + resetBtn.addEventListener('click', function() { + location.reload(); + }); + // 添加开始按钮事件监听器 + startAnimationBtn.addEventListener('click', startAnimation); + // 动画控制函数 - 确保在DOMContentLoaded回调内部定义 + function startAnimation() { + // 检查是否已设置中心点 + if (!centerDot) { + alert('请先确定中心点'); + return; + } + + // 获取中心点坐标 + const centerX = parseFloat(centerDot.style.left); + const centerY = parseFloat(centerDot.style.top); + + // 获取所有箭头 + const arrows = document.querySelectorAll('.arrow-container'); + if (arrows.length === 0) { + alert('没有可移动的箭头'); + return; + } + + // 为每个箭头添加动画 + arrows.forEach(arrow => { + animateArrow(arrow, centerX, centerY); + }); + } + + // 单个箭头动画函数 - 同样放在DOMContentLoaded回调内部 + function animateArrow(arrow, targetX, targetY) { + // 获取箭头当前位置 + let currentX = parseFloat(arrow.style.left) || 0; + let currentY = parseFloat(arrow.style.top) || 0; + + // 动画帧函数 + function updatePosition() { + // 计算到目标的距离 + const dx = targetX - currentX; + const dy = targetY - currentY; + const distance = Math.sqrt(dx * dx + dy * dy); + + // 如果距离小于5px,停止动画 + if (distance < 5) { + // 确保箭头最终位置准确 + arrow.style.left = targetX + 'px'; + arrow.style.top = targetY + 'px'; + return; + } + + // 计算移动步长(距离的5%,确保靠近目标时减速) + const step = distance * 0.05; + const moveX = (dx / distance) * step; + const moveY = (dy / distance) * step; + + // 更新位置 + currentX += moveX; + currentY += moveY; + arrow.style.left = currentX + 'px'; + arrow.style.top = currentY + 'px'; + + // 继续动画 + requestAnimationFrame(updatePosition); + } + + // 开始动画 + updatePosition(); + } // 加载保存的元素 loadAllElements(); @@ -221,6 +295,14 @@ top: container.style.top }); }); + // 新增:保存中心点数据 + if (centerDot) { + elements.push({ + type: 'center', + left: centerDot.style.left, + top: centerDot.style.top + }); + } localStorage.setItem('mapElements', JSON.stringify(elements)); alert('保存成功!'); } @@ -233,12 +315,28 @@ if (element.type === 'arrow') { addImageToContainer(element.imagePath, {left: element.left, top: element.top}, element.text); } + // 新增:处理中心点数据 + else if (element.type === 'center') { + // 如果已有中心点,先移除 + if (centerDot) { + centerDot.remove(); + } + // 创建新的中心点 + centerDot = document.createElement('div'); + centerDot.className = 'center-dot'; + centerDot.style.left = element.left; + centerDot.style.top = element.top; + backgroundContainer.appendChild(centerDot); + } }); } catch (e) { console.error('加载失败:', e); } } } - }); + }); // DOMContentLoaded回调结束 + // 确保这里没有残留的startAnimation函数定义 + +