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:34:13 +08:00
parent a89f4b6823
commit 0f6fb56245
2 changed files with 93 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
dsLightRag/XingJun/蓝色箭头.png → dsLightRag/XingJun/6.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

131
dsLightRag/XingJun/move.html
View File

@@ -151,11 +151,10 @@
<div class="image-btn" data-image="./3.png" style="background-image: url('./3.png');"></div>
<div class="image-btn" data-image="./4.png" style="background-image: url('./4.png');"></div>
<div class="image-btn" data-image="./5.png" style="background-image: url('./5.png');"></div>
<div class="image-btn" data-image="./6.png" style="background-image: url('./6.png');"></div>
</div>
<!-- 新增保存按钮 -->
<!-- 新增文字说明按钮 -->
<button class="text-btn" id="addTextBtn">添加文字说明</button>
<!-- 移除文字按钮 -->
<button class="save-btn" id="savePositionsBtn">保存位置</button>
</div>
</div>
@@ -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) {
@@ -305,10 +352,12 @@
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事件监听