From 0f6fb562459cfde978e25385c335d0522d4df902 Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Tue, 9 Sep 2025 14:34:13 +0800
Subject: [PATCH] 'commit'
---
dsLightRag/XingJun/{蓝色箭头.png => 6.png} | Bin
dsLightRag/XingJun/move.html | 139 ++++++++++++++-------
2 files changed, 93 insertions(+), 46 deletions(-)
rename dsLightRag/XingJun/{蓝色箭头.png => 6.png} (100%)
diff --git a/dsLightRag/XingJun/蓝色箭头.png b/dsLightRag/XingJun/6.png
similarity index 100%
rename from dsLightRag/XingJun/蓝色箭头.png
rename to dsLightRag/XingJun/6.png
diff --git a/dsLightRag/XingJun/move.html b/dsLightRag/XingJun/move.html
index e31d2eac..5dc9a76f 100644
--- a/dsLightRag/XingJun/move.html
+++ b/dsLightRag/XingJun/move.html
@@ -151,11 +151,10 @@
+
-
-
-
+
@@ -192,55 +191,107 @@
saveBtn.addEventListener('click', saveAllElements);
// 添加图片到主区域
- function addImageToContainer(imagePath, position = null) {
- // 创建新的图片元素
+ function addImageToContainer(imagePath, position = null, textContent = '') {
+ // 创建新的图片元素容器
+ const container = document.createElement('div');
+ container.className = 'arrow-container';
+ container.style.position = 'absolute';
+ container.dataset.imagePath = imagePath;
+
+ // 创建箭头图片元素
const newImage = document.createElement('div');
newImage.className = 'arrow-image';
newImage.style.backgroundImage = `url('${imagePath}')`;
+ // 创建文字元素
+ const textElement = document.createElement('div');
+ textElement.className = 'arrow-text';
+ textElement.style.position = 'absolute';
+ textElement.style.top = '100%';
+ textElement.style.left = '50%';
+ textElement.style.transform = 'translateX(-50%)';
+ textElement.style.marginTop = '-5px';
+ textElement.style.fontWeight = 'bold'; // 文字加粗
+ textElement.style.color = 'red'; // 文字颜色设为红色
+ textElement.style.fontSize = '16px'; // 增大字号
+ textElement.style.whiteSpace = 'nowrap';
+ textElement.style.textAlign = 'center';
+ textElement.style.width = '100%'; // 确保文字宽度与箭头一致
+ textElement.style.marginBottom = '-85px'; // 箭头与文字间距
+ textElement.style.textAlign = 'center';
+ textElement.style.marginTop = '-5px'; // 减少箭头与文字间距
+ textElement.style.left = '50%';
+ textElement.style.transform = 'translateX(-50%)'; // 水平居中对齐
+ // 使用负边距向上拉近距离
+ textElement.style.marginBottom = '-30px';
+ textElement.style.whiteSpace = 'nowrap';
+ textElement.style.padding = '3px 8px';
+ textElement.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
+ textElement.style.borderRadius = '4px';
+ // 确保文字在箭头上方
+ textElement.style.zIndex = '1';
+ // 如果有文字内容则显示
+ if (textContent) {
+ textElement.textContent = textContent;
+ container.dataset.text = textContent;
+ } else {
+ textElement.style.display = 'none';
+ }
+
+ // 将元素组合
+ container.appendChild(newImage);
+ container.appendChild(textElement);
+
// 设置位置
if (position) {
- // 从保存的数据加载位置
- newImage.style.left = position.left;
- newImage.style.top = position.top;
+ container.style.left = position.left;
+ container.style.top = position.top;
} else {
// 随机位置
const containerRect = backgroundContainer.getBoundingClientRect();
const x = Math.random() * (containerRect.width - 155);
const y = Math.random() * (containerRect.height - 173);
- newImage.style.left = `${x}px`;
- newImage.style.top = `${y}px`;
+ container.style.left = `${x}px`;
+ container.style.top = `${y}px`;
}
// 添加到容器
- backgroundContainer.appendChild(newImage);
+ backgroundContainer.appendChild(container);
+
+ // 添加双击事件 - 用于添加/修改文字
+ container.addEventListener('dblclick', (e) => {
+ // 防止冒泡影响拖拽
+ e.stopPropagation();
+ const currentText = container.dataset.text || '';
+ const textContent = prompt('请输入文字:', currentText);
+ if (textContent !== null) {
+ if (textContent.trim() === '') {
+ textElement.style.display = 'none';
+ delete container.dataset.text;
+ } else {
+ textElement.textContent = textContent;
+ textElement.style.display = 'block';
+ container.dataset.text = textContent;
+ }
+ }
+ });
// 添加拖拽功能
- makeElementDraggable(newImage);
+ makeElementDraggable(container);
}
- // 保存所有箭头位置到localStorage
- // 修改：保存所有元素（箭头和文字）
+ // 保存所有元素到localStorage
function saveAllElements() {
const elements = [];
- // 收集箭头元素
- document.querySelectorAll('.arrow-image').forEach(arrow => {
+ // 收集箭头容器元素
+ document.querySelectorAll('.arrow-container').forEach(container => {
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
+ imagePath: container.dataset.imagePath,
+ text: container.dataset.text || '',
+ left: container.style.left,
+ top: container.style.top
});
});
@@ -248,7 +299,7 @@
alert('所有元素位置已保存！');
}
- // 修改：加载所有元素（箭头和文字）
+ // 加载所有元素
function loadAllElements() {
const savedData = localStorage.getItem('mapElements');
if (savedData) {
@@ -256,15 +307,11 @@
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
- });
+ addImageToContainer(
+ element.imagePath,
+ { left: element.left, top: element.top },
+ element.text
+ );
}
});
} catch (e) {
@@ -304,11 +351,13 @@
function makeElementDraggable(element) {
let isDragging = false;
let offsetX, offsetY;
-
- // 修改事件绑定，将mousemove和mouseup绑定到document
+
element.addEventListener('mousedown', startDrag);
-
+
function startDrag(e) {
+ // 忽略右键点击
+ if (e.button === 2) return;
+
isDragging = true;
const rect = element.getBoundingClientRect();
const containerRect = backgroundContainer.getBoundingClientRect();
@@ -317,8 +366,6 @@
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
- // 移除transform影响
- element.style.transform = 'none';
element.style.zIndex = '10';
// 添加document事件监听
@@ -326,7 +373,7 @@
document.addEventListener('mouseup', endDrag);
document.addEventListener('mouseleave', endDrag);
}
-
+
function drag(e) {
if (!isDragging) return;
e.preventDefault();
@@ -345,7 +392,7 @@
element.style.left = `${boundedX}px`;
element.style.top = `${boundedY}px`;
}
-
+
function endDrag() {
isDragging = false;
element.style.zIndex = '2';