huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-09-09 15:45:39 +08:00
parent dfa70f71b3
commit eb6ae9f324
4 changed files with 115 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
dsLightRag/XingJun/move.html
View File

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