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 14:16:09 +08:00
parent 8dc98fa6d3
commit a89f4b6823
1 changed files with 148 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
dsLightRag/XingJun/move.html
View File

@@ -104,6 +104,37 @@
.save-btn:hover {
background-color: #45a049;
}
/* 文字说明样式 */
.text-label {
position: absolute;
padding: 5px 10px;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
cursor: move;
z-index: 3;
max-width: 200px;
word-wrap: break-word;
}
/* 新增按钮样式 */
.text-btn {
width: 100%;
padding: 10px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
.text-btn:hover {
background-color: #0b7dda;
}
</style>
</head>
<body>
@@ -123,6 +154,8 @@
</div>
<!-- 新增保存按钮 -->
<!-- 新增文字说明按钮 -->
<button class="text-btn" id="addTextBtn">添加文字说明</button>
<button class="save-btn" id="savePositionsBtn">保存位置</button>
</div>
</div>
@@ -132,10 +165,11 @@
const backgroundContainer = document.querySelector('.background-container');
const imageButtons = document.querySelectorAll('.image-btn');
const saveBtn = document.getElementById('savePositionsBtn');
const addTextBtn = document.getElementById('addTextBtn'); // 新增文字按钮
// 页面加载时从localStorage读取并恢复箭头位置
document.addEventListener('DOMContentLoaded', () => {
loadArrowPositions();
loadAllElements(); // 重命名函数，支持多种元素
});
// 为每个图片按钮添加点击事件
@@ -146,8 +180,16 @@
});
});
// 新增：文字按钮点击事件
addTextBtn.addEventListener('click', () => {
const textContent = prompt('请输入文字说明内容:');
if (textContent && textContent.trim() !== '') {
addTextToContainer(textContent);
}
});
// 保存按钮点击事件
saveBtn.addEventListener('click', saveArrowPositions);
saveBtn.addEventListener('click', saveAllElements);
// 添加图片到主区域
function addImageToContainer(imagePath, position = null) {
@@ -178,67 +220,140 @@
}
// 保存所有箭头位置到localStorage
function saveArrowPositions() {
const arrows = document.querySelectorAll('.arrow-image');
const arrowData = Array.from(arrows).map(arrow => ({
imagePath: arrow.style.backgroundImage.match(/url\('?"?(.*?)'?"?\)/)[1],
left: arrow.style.left,
top: arrow.style.top
}));
// 修改：保存所有元素（箭头和文字）
function saveAllElements() {
const elements = [];
localStorage.setItem('arrowPositions', JSON.stringify(arrowData));
alert('位置已保存！');
// 收集箭头元素
document.querySelectorAll('.arrow-image').forEach(arrow => {
elements.push({
type: 'arrow',
imagePath: arrow.style.backgroundImage.match(/url\('?"?(.*?)'?"?\)/)[1],
left: arrow.style.left,
top: arrow.style.top
});
});
// 新增：收集文字元素
document.querySelectorAll('.text-label').forEach(text => {
elements.push({
type: 'text',
content: text.textContent,
left: text.style.left,
top: text.style.top
});
});
localStorage.setItem('mapElements', JSON.stringify(elements));
alert('所有元素位置已保存！');
}
// 从localStorage加载箭头位置
function loadArrowPositions() {
const savedData = localStorage.getItem('arrowPositions');
// 修改：加载所有元素（箭头和文字）
function loadAllElements() {
const savedData = localStorage.getItem('mapElements');
if (savedData) {
try {
const arrowData = JSON.parse(savedData);
arrowData.forEach(data => {
addImageToContainer(data.imagePath, {
left: data.left,
top: data.top
});
const elements = JSON.parse(savedData);
elements.forEach(element => {
if (element.type === 'arrow') {
addImageToContainer(element.imagePath, {
left: element.left,
top: element.top
});
} else if (element.type === 'text') {
addTextToContainer(element.content, {
left: element.left,
top: element.top
});
}
});
} catch (e) {
console.error('加载保存的箭头位置失败:', e);
localStorage.removeItem('arrowPositions'); // 移除损坏的数据
console.error('加载元素失败:', e);
localStorage.removeItem('mapElements');
}
}
}
// 新增：添加文字到主区域
function addTextToContainer(text, position = null) {
// 创建文字元素
const textElement = document.createElement('div');
textElement.className = 'text-label';
textElement.textContent = text;
textElement.dataset.type = 'text'; // 标记元素类型
// 设置位置
if (position) {
textElement.style.left = position.left;
textElement.style.top = position.top;
} else {
// 默认位置：中央偏上
textElement.style.left = '50%';
textElement.style.top = '30%';
textElement.style.transform = 'translate(-50%, -50%)';
}
// 添加到容器
backgroundContainer.appendChild(textElement);
// 添加拖拽功能
makeElementDraggable(textElement);
}
// 使元素可拖拽
function makeElementDraggable(element) {
let isDragging = false;
let offsetX, offsetY;
// 修改事件绑定，将mousemove和mouseup绑定到document
element.addEventListener('mousedown', startDrag);
element.addEventListener('mousemove', drag);
element.addEventListener('mouseup', endDrag);
element.addEventListener('mouseleave', endDrag);
function startDrag(e) {
isDragging = true;
const rect = element.getBoundingClientRect();
const containerRect = backgroundContainer.getBoundingClientRect();
// 计算相对于容器的偏移量
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
// 移除transform影响
element.style.transform = 'none';
element.style.zIndex = '10';
// 添加document事件监听
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
document.addEventListener('mouseleave', endDrag);
}
function drag(e) {
if (!isDragging) return;
e.preventDefault();
const x = e.clientX - offsetX;
const y = e.clientY - offsetY;
element.style.left = `${x}px`;
element.style.top = `${y}px`;
// 计算相对于容器的位置
const containerRect = backgroundContainer.getBoundingClientRect();
const x = e.clientX - containerRect.left - offsetX;
const y = e.clientY - containerRect.top - offsetY;
// 限制在容器内
const maxX = containerRect.width - element.offsetWidth;
const maxY = containerRect.height - element.offsetHeight;
const boundedX = Math.max(0, Math.min(x, maxX));
const boundedY = Math.max(0, Math.min(y, maxY));
element.style.left = `${boundedX}px`;
element.style.top = `${boundedY}px`;
}
function endDrag() {
isDragging = false;
element.style.zIndex = '2';
// 移除document事件监听
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', endDrag);
document.removeEventListener('mouseleave', endDrag);
}
}
</script>