'commit'

dsLightRag/XingJun/move.html

@@ -40,6 +40,8 @@
             </div>
             <button class="save-btn" id="savePositionsBtn">保存位置</button>
             <button class="save-btn" id="markCenterBtn" style="margin-top: 10px;">标记中心点</button>
+            <button class="save-btn" id="startAnimationBtn" style="margin-top: 10px;">开始</button>
+            <button class="save-btn" id="resetBtn" style="margin-top: 10px;">重置</button>
         </div>
     </div>
     <div id="contextMenu"><div id="deleteArrow">删除箭头</div></div>
@@ -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函数定义
     </script>
 </body>
 </html>
 
+
+