diff --git a/dsLightRag/XingJun/Arraw.svg b/dsLightRag/XingJun/Arraw.svg deleted file mode 100644 index ec0e1578..00000000 --- a/dsLightRag/XingJun/Arraw.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/dsLightRag/XingJun/blueArrow.png b/dsLightRag/XingJun/blueArrow.png deleted file mode 100644 index 5b277dec..00000000 Binary files a/dsLightRag/XingJun/blueArrow.png and /dev/null differ diff --git a/dsLightRag/XingJun/move.html b/dsLightRag/XingJun/move.html index 7db70271..76c61779 100644 --- a/dsLightRag/XingJun/move.html +++ b/dsLightRag/XingJun/move.html @@ -74,9 +74,11 @@ return; } - // 获取中心点坐标 - const centerX = parseFloat(centerDot.style.left); - const centerY = parseFloat(centerDot.style.top); + // 获取中心点坐标（修复：使用getBoundingClientRect确保坐标正确） + const centerRect = centerDot.getBoundingClientRect(); + const containerRect = backgroundContainer.getBoundingClientRect(); + const centerX = centerRect.left - containerRect.left; + const centerY = centerRect.top - containerRect.top; // 获取所有箭头 const arrows = document.querySelectorAll('.arrow-container'); @@ -91,43 +93,73 @@ }); } - // 单个箭头动画函数 - 同样放在DOMContentLoaded回调内部 + // 单个箭头动画函数 function animateArrow(arrow, targetX, targetY) { - // 获取箭头当前位置 - let currentX = parseFloat(arrow.style.left) || 0; - let currentY = parseFloat(arrow.style.top) || 0; + // 获取箭头图片尺寸（固定为155px×173px） + const arrowWidth = 155; + const arrowHeight = 173; + // 计算中心点偏移量（宽度和高度的一半） + const centerOffsetX = arrowWidth / 2; + const centerOffsetY = arrowHeight / 2; + // 定义停止距离（箭头中心点与目标中心点的距离） + const stopDistance = 50; + + // 获取箭头当前位置（相对于背景容器） + const rect = arrow.getBoundingClientRect(); + const containerRect = backgroundContainer.getBoundingClientRect(); + // 当前位置需要加上偏移量，获取实际中心点位置 + let currentX = rect.left - containerRect.left + centerOffsetX; + let currentY = rect.top - containerRect.top + centerOffsetY; + + // 添加随机偏移避免重叠 + const offsetRange = 20; + const randomOffsetX = (Math.random() - 0.5) * offsetRange; + const randomOffsetY = (Math.random() - 0.5) * offsetRange; + const finalTargetX = targetX + randomOffsetX; + const finalTargetY = targetY + randomOffsetY; + + // 计算方向向量和距离 + const dxTotal = finalTargetX - currentX; + const dyTotal = finalTargetY - currentY; + const distanceTotal = Math.sqrt(dxTotal * dxTotal + dyTotal * dyTotal); + + // 计算调整后的目标位置（保持stopDistance距离） + let adjustedTargetX, adjustedTargetY; + if (distanceTotal > stopDistance) { + // 如果距离大于停止距离，计算新目标位置 + const ratio = (distanceTotal - stopDistance) / distanceTotal; + adjustedTargetX = currentX + dxTotal * ratio; + adjustedTargetY = currentY + dyTotal * ratio; + } else { + // 如果已在停止距离内，保持当前位置 + adjustedTargetX = currentX; + adjustedTargetY = currentY; + } - // 动画帧函数 function updatePosition() { - // 计算到目标的距离 - const dx = targetX - currentX; - const dy = targetY - currentY; + const dx = adjustedTargetX - currentX; + const dy = adjustedTargetY - currentY; const distance = Math.sqrt(dx * dx + dy * dy); - // 如果距离小于5px，停止动画 - if (distance < 5) { - // 确保箭头最终位置准确 - arrow.style.left = targetX + 'px'; - arrow.style.top = targetY + 'px'; + // 当距离小于2px时停止动画（确保到达调整后的目标位置） + if (distance < 2) { + arrow.style.left = (adjustedTargetX - centerOffsetX) + 'px'; + arrow.style.top = (adjustedTargetY - centerOffsetY) + 'px'; return; } - // 计算移动步长（距离的5%，确保靠近目标时减速） - const step = distance * 0.05; + const step = Math.max(distance * 0.05, 1); const moveX = (dx / distance) * step; const moveY = (dy / distance) * step; - // 更新位置 currentX += moveX; currentY += moveY; - arrow.style.left = currentX + 'px'; - arrow.style.top = currentY + 'px'; + arrow.style.left = (currentX - centerOffsetX) + 'px'; + arrow.style.top = (currentY - centerOffsetY) + 'px'; - // 继续动画 requestAnimationFrame(updatePosition); } - // 开始动画 updatePosition(); } // 加载保存的元素 @@ -191,13 +223,13 @@ const container = document.createElement('div'); container.className = 'arrow-container'; container.dataset.imagePath = imagePath; - + const newImage = document.createElement('div'); newImage.className = 'arrow-image'; newImage.style.backgroundImage = `url('${imagePath}')`; - + container.appendChild(newImage); - + // 添加文字元素 if (textContent) { const textElement = document.createElement('div'); @@ -206,16 +238,23 @@ container.dataset.text = textContent; container.appendChild(textElement); } - - // 设置位置 + + // 设置位置 - 使用中心点作为参照 + const arrowWidth = 155; + const arrowHeight = 173; + const centerOffsetX = arrowWidth / 2; + const centerOffsetY = arrowHeight / 2; + if (position) { - container.style.left = position.left; - container.style.top = position.top; + // 修复：直接使用传递的左上角位置，不再减去偏移量 + container.style.left = parseFloat(position.left) + 'px'; + container.style.top = parseFloat(position.top) + 'px'; } else { - const x = Math.random() * (backgroundContainer.offsetWidth - 155); - const y = Math.random() * (backgroundContainer.offsetHeight - 173); - container.style.left = `${x}px`; - container.style.top = `${y}px`; + // 随机位置也使用中心点作为参照 + const x = Math.random() * (backgroundContainer.offsetWidth - arrowWidth) + centerOffsetX; + const y = Math.random() * (backgroundContainer.offsetHeight - arrowHeight) + centerOffsetY; + container.style.left = (x - centerOffsetX) + 'px'; + container.style.top = (y - centerOffsetY) + 'px'; } // 双击编辑文字 @@ -286,16 +325,27 @@ // 保存/加载功能 function saveAllElements() { const elements = []; - document.querySelectorAll('.arrow-container').forEach(container => { + const arrowWidth = 155; + const arrowHeight = 173; + const centerOffsetX = arrowWidth / 2; + const centerOffsetY = arrowHeight / 2; + + document.querySelectorAll('.arrow-container').forEach(arrow => { + // 保存中心点坐标而非左上角坐标 + const left = parseFloat(arrow.style.left) || 0; + const top = parseFloat(arrow.style.top) || 0; + elements.push({ type: 'arrow', - imagePath: container.dataset.imagePath, - text: container.dataset.text || '', - left: container.style.left, - top: container.style.top + imagePath: arrow.dataset.imagePath, + // 计算并保存中心点位置 + left: left + centerOffsetX, + top: top + centerOffsetY, + text: arrow.dataset.text || '' }); }); - // 新增：保存中心点数据 + + // 保存中心点 if (centerDot) { elements.push({ type: 'center', @@ -303,34 +353,34 @@ top: centerDot.style.top }); } - localStorage.setItem('mapElements', JSON.stringify(elements)); - alert('保存成功！'); + + localStorage.setItem('savedElements', JSON.stringify(elements)); + alert('位置已保存'); } function loadAllElements() { - const savedData = localStorage.getItem('mapElements'); - if (savedData) { - try { - JSON.parse(savedData).forEach(element => { - 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); } - } + const savedElements = JSON.parse(localStorage.getItem('savedElements') || '[]'); + const arrowWidth = 155; + const arrowHeight = 173; + const centerOffsetX = arrowWidth / 2; + const centerOffsetY = arrowHeight / 2; + + savedElements.forEach(item => { + if (item.type === 'arrow') { + // 加载时使用中心点坐标减去偏移量得到左上角位置 + addImageToContainer(item.imagePath, { + left: item.left - centerOffsetX, + top: item.top - centerOffsetY + }, item.text); + } else if (item.type === 'center') { + // 创建中心点 + centerDot = document.createElement('div'); + centerDot.className = 'center-dot'; + centerDot.style.left = item.left; + centerDot.style.top = item.top; + backgroundContainer.appendChild(centerDot); + } + }); } }); // DOMContentLoaded回调结束 // 确保这里没有残留的startAnimation函数定义 diff --git a/dsLightRag/XingJun/红色箭头.png b/dsLightRag/XingJun/红色箭头.png deleted file mode 100644 index d9aa76e1..00000000 Binary files a/dsLightRag/XingJun/红色箭头.png and /dev/null differ