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函数定义