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 08:06:22 +08:00
parent 43f69d19c7
commit 9c175151d8
1 changed files with 318 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

429
dsLightRag/XingJun/move.html
View File

@@ -27,34 +27,42 @@
z-index: 1; z-index: 1;
} }
.arrow-container { /* 右侧控制面板样式 - 完全重构 */
position: absolute;
width: 600px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
border: 2px solid transparent;
}
.arrow {
cursor: grab;
transition: transform 0s;
}
.arrow:active {
cursor: grabbing;
}
.control-panel { .control-panel {
position: absolute; position: fixed;
bottom: 20px; top: 0;
left: 50%; right: 0; /* 确保面板固定在右侧 */
transform: translateX(-50%); width: 350px; /* 增加工具栏宽度 */
height: 100vh;
background-color: rgba(245, 245, 245, 0.95); /* 半透明背景 */
border-left: 2px solid #4CAF50;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
z-index: 1000; /* 确保在最上层 */
box-shadow: -2px 0 10px rgba(0,0,0,0.1); /* 添加阴影区分 */
}
.control-group {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.horizontal-controls {
display: flex; display: flex;
gap: 10px; gap: 10px;
z-index: 1000; }
.horizontal-controls button {
width: 50%;
}
.group-title {
margin-top: 0;
color: #333;
border-bottom: 2px solid #4CAF50;
padding-bottom: 8px;
margin-bottom: 15px;
} }
button { button {
@@ -66,6 +74,8 @@
border: none; border: none;
border-radius: 5px; border-radius: 5px;
transition: background-color 0.3s; transition: background-color 0.3s;
width: 100%;
margin-bottom: 10px;
} }
button:hover:not(:disabled) { button:hover:not(:disabled) {
@@ -77,105 +87,252 @@
cursor: not-allowed; cursor: not-allowed;
} }
.position-controls { .rotation-control-item,
.length-control-item {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #666;
}
input[type="number"] {
width: calc(100% - 90px); /* 根据新宽度调整输入框比例 */
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 5px;
}
.apply-rotation-btn {
width: 80px;
padding: 8px;
font-size: 14px;
}
.arrow-container {
position: absolute; position: absolute;
bottom: 80px; width: 100%;
left: 50%; height: 100%;
transform: translateX(-50%); top: 0;
display: flex; left: 0;
gap: 10px; pointer-events: none;
z-index: 1000; }
.arrow {
position: absolute;
cursor: grab;
transition: transform 0s;
pointer-events: auto;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="background-container"> <div class="background-container">
<div class="arrow-container"> <div class="arrow-container">
<!-- 左侧箭头 - 使用fill.html中的原始路径数据 --> <!-- 箭头SVG代码 - 从fill.html恢复原始路径数据 -->
<svg id="outlineArrowLeft" class="arrow" width="240" height="61" viewBox="0 0 240 61" style="transform: translate(-100px, 70px);"> <svg class="arrow arrow-left" id="leftArrow" width="240" height="61" viewBox="-0.5 -0.5 240 61">
<path d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z" fill="red" stroke="black" stroke-width="2"></path> <path d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z" fill="red"/>
</svg> </svg>
<!-- 右侧箭头 - 使用fill.html中的原始路径数据并水平翻转 --> <svg class="arrow arrow-right" id="rightArrow" width="240" height="61" viewBox="-0.5 -0.5 240 61">
<svg id="outlineArrowRight" class="arrow" width="240" height="61" viewBox="0 0 240 61" style="transform: translate(350px, 70px) scale(-1, 1);"> <path d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z" fill="red"/>
<path d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z" fill="red" stroke="black" stroke-width="2"></path>
</svg> </svg>
</div> </div>
<!-- 右侧控制面板 -->
<div class="control-panel"> <div class="control-panel">
<button id="startBtn">开始移动</button> <!-- 动画控制 -->
</div> <div class="control-group">
<div class="position-controls"> <h3 class="group-title">动画控制</h3>
<button id="saveBtn">保存位置</button> <button id="startBtn" class="control-btn">开始移动</button>
<button id="resetBtn">重置默认</button> </div>
<!-- 位置管理 -->
<div class="control-group">
<h3 class="group-title">位置管理</h3>
<div class="horizontal-controls">
<button id="saveBtn" class="control-btn">保存当前位置</button>
<button id="resetBtn" class="control-btn">重置默认位置</button>
</div>
</div>
<!-- 旋转控制 -->
<div class="control-group">
<h3 class="group-title">旋转控制</h3>
<div class="rotation-control-item">
<label for="leftRotationInput">左箭头角度 (°):</label>
<input type="number" id="leftRotationInput" class="rotation-input" placeholder="角度值" value="0">
<button id="applyLeftRotationBtn" class="apply-rotation-btn">应用</button>
</div>
<div class="rotation-control-item">
<label for="rightRotationInput">右箭头角度 (°):</label>
<input type="number" id="rightRotationInput" class="rotation-input" placeholder="角度值" value="0">
<button id="applyRightRotationBtn" class="apply-rotation-btn">应用</button>
</div>
</div>
<!-- 移动长度控制 -->
<div class="control-group">
<h3 class="group-title">移动长度控制</h3>
<div class="length-control-item">
<label for="leftLengthInput">左箭头移动长度:</label>
<input type="number" id="leftLengthInput" class="length-input" placeholder="像素值" value="100">
</div>
<div class="length-control-item">
<label for="rightLengthInput">右箭头移动长度:</label>
<input type="number" id="rightLengthInput" class="length-input" placeholder="像素值" value="100">
</div>
</div>
</div> </div>
</div> </div>
<script> <script>
const leftArrow = document.getElementById('outlineArrowLeft'); // 修正元素ID引用
const rightArrow = document.getElementById('outlineArrowRight'); const leftArrow = document.getElementById('leftArrow');
const rightArrow = document.getElementById('rightArrow');
const startBtn = document.getElementById('startBtn'); const startBtn = document.getElementById('startBtn');
const saveBtn = document.getElementById('saveBtn'); const saveBtn = document.getElementById('saveBtn');
const resetBtn = document.getElementById('resetBtn'); const resetBtn = document.getElementById('resetBtn');
const leftRotationInput = document.getElementById('leftRotationInput');
const rightRotationInput = document.getElementById('rightRotationInput');
const leftLengthInput = document.getElementById('leftLengthInput');
const rightLengthInput = document.getElementById('rightLengthInput');
const applyLeftRotationBtn = document.getElementById('applyLeftRotationBtn');
const applyRightRotationBtn = document.getElementById('applyRightRotationBtn');
let isAnimating = false; let isAnimating = false;
let draggedElement = null; let draggedElement = null;
let initialX = 0; let initialX = 0;
let initialY = 0; let initialY = 0;
let currentX = 0; let currentX = 0;
let currentY = 0; let currentY = 0;
let translateX = 0;
let translateY = 0;
// 从localStorage加载保存的位置 // 调整箭头初始位置，确保在可见区域
function loadSavedPositions() { const arrowStates = {
left: {
x: 100, // 调整初始X位置
y: 200, // 调整初始Y位置
rotation: 0,
length: 100
},
right: {
x: 300, // 调整初始X位置
y: 200, // 调整初始Y位置
rotation: 0,
length: 100
}
};
// 角度转弧度
function degToRad(degrees) {
return degrees * Math.PI / 180;
}
// 设置箭头变换
function setArrowTransform(arrowId, x, y, rotation) {
const arrow = arrowId === 'left' ? leftArrow : rightArrow;
const isRight = arrowId === 'right';
// 应用变换：位移 -> 旋转 -> 右箭头水平翻转
const transform = `translate(${x}px, ${y}px) rotate(${rotation}deg) ${isRight ? 'scale(-1, 1)' : ''}`;
arrow.style.transform = transform;
}
// 从localStorage加载保存的状态
function loadSavedStates() {
try { try {
const savedLeft = localStorage.getItem('arrowLeftPosition'); const savedLeft = localStorage.getItem('arrowLeftState');
const savedRight = localStorage.getItem('arrowRightPosition'); const savedRight = localStorage.getItem('arrowRightState');
if (savedLeft) { if (savedLeft) {
const { x, y } = JSON.parse(savedLeft); const { x, y, rotation, length } = JSON.parse(savedLeft);
leftArrow.style.transform = `translate(${x}px, ${y}px)`; arrowStates.left.x = x;
arrowStates.left.y = y;
arrowStates.left.rotation = rotation;
arrowStates.left.length = length;
setArrowTransform('left', x, y, rotation);
leftRotationInput.value = rotation;
leftLengthInput.value = length;
} else {
// 应用初始状态
setArrowTransform('left', arrowStates.left.x, arrowStates.left.y, arrowStates.left.rotation);
} }
if (savedRight) { if (savedRight) {
const { x, y } = JSON.parse(savedRight); const { x, y, rotation, length } = JSON.parse(savedRight);
rightArrow.style.transform = `translate(${x}px, ${y}px) scale(-1, 1)`; arrowStates.right.x = x;
arrowStates.right.y = y;
arrowStates.right.rotation = rotation;
arrowStates.right.length = length;
setArrowTransform('right', x, y, rotation);
rightRotationInput.value = rotation;
rightLengthInput.value = length;
} else {
// 应用初始状态
setArrowTransform('right', arrowStates.right.x, arrowStates.right.y, arrowStates.right.rotation);
} }
} catch (e) { } catch (e) {
console.error('加载保存的位置失败:', e); console.error('加载保存的状态失败:', e);
alert('加载保存的位置失败，请重试'); alert('加载保存的状态失败，请重试');
} }
} }
// 保存当前位置到localStorage // 保存当前状态到localStorage
function saveCurrentPositions() { function saveCurrentStates() {
try { try {
const leftTransform = getTransformValues(leftArrow); // 更新状态中的长度值
const rightTransform = getTransformValues(rightArrow); arrowStates.left.length = parseInt(leftLengthInput.value) || 100;
arrowStates.right.length = parseInt(rightLengthInput.value) || 100;
arrowStates.left.rotation = parseInt(leftRotationInput.value) || 0;
arrowStates.right.rotation = parseInt(rightRotationInput.value) || 0;
localStorage.setItem('arrowLeftPosition', JSON.stringify({ localStorage.setItem('arrowLeftState', JSON.stringify(arrowStates.left));
x: leftTransform.x, localStorage.setItem('arrowRightState', JSON.stringify(arrowStates.right));
y: leftTransform.y alert('位置、角度和移动长度已保存');
}));
localStorage.setItem('arrowRightPosition', JSON.stringify({
x: rightTransform.x,
y: rightTransform.y
}));
alert('位置已保存');
} catch (e) { } catch (e) {
console.error('保存位置失败:', e); console.error('保存状态失败:', e);
alert('保存位置失败，请重试'); alert('保存状态失败，请重试');
} }
} }
// 重置到默认位置 // 重置到默认状态
function resetToDefaultPositions() { function resetToDefaultStates() {
localStorage.removeItem('arrowLeftPosition'); localStorage.removeItem('arrowLeftState');
localStorage.removeItem('arrowRightPosition'); localStorage.removeItem('arrowRightState');
leftArrow.style.transform = 'translate(-100px, 70px)';
rightArrow.style.transform = 'translate(350px, 70px) scale(-1, 1)'; // 重置左侧箭头
alert('已重置为默认位置'); arrowStates.left.x = 100;
arrowStates.left.y = 200;
arrowStates.left.rotation = 0;
arrowStates.left.length = 100;
setArrowTransform('left', 100, 200, 0);
leftRotationInput.value = 0;
leftLengthInput.value = 100;
// 重置右侧箭头
arrowStates.right.x = 300;
arrowStates.right.y = 200;
arrowStates.right.rotation = 0;
arrowStates.right.length = 100;
setArrowTransform('right', 300, 200, 0);
rightRotationInput.value = 0;
rightLengthInput.value = 100;
alert('已重置为默认状态');
} }
// 获取元素的transform translate值 // 应用旋转角度
function applyRotation(arrowId) {
const input = arrowId === 'left' ? leftRotationInput : rightRotationInput;
const rotation = parseInt(input.value) || 0;
const arrowState = arrowStates[arrowId];
arrowState.rotation = rotation;
setArrowTransform(arrowId, arrowState.x, arrowState.y, rotation);
}
// 获取元素的transform值
function getTransformValues(element) { function getTransformValues(element) {
const transform = window.getComputedStyle(element).getPropertyValue('transform'); const transform = window.getComputedStyle(element).getPropertyValue('transform');
if (transform === 'none') return { x: 0, y: 0 }; if (transform === 'none') return { x: 0, y: 0 };
@@ -192,11 +349,11 @@
if (!draggedElement) return; if (!draggedElement) return;
const transform = getTransformValues(draggedElement); const transform = getTransformValues(draggedElement);
translateX = transform.x; currentX = transform.x;
translateY = transform.y; currentY = transform.y;
initialX = e.clientX - translateX; initialX = e.clientX - currentX;
initialY = e.clientY - translateY; initialY = e.clientY - currentY;
draggedElement.style.zIndex = '1001'; draggedElement.style.zIndex = '1001';
draggedElement.style.transition = 'transform 0s'; draggedElement.style.transition = 'transform 0s';
@@ -214,12 +371,20 @@
currentX = e.clientX - initialX; currentX = e.clientX - initialX;
currentY = e.clientY - initialY; currentY = e.clientY - initialY;
// 保持右侧箭头的翻转效果 // 更新状态并应用变换
if (draggedElement.id === 'outlineArrowRight') { const isLeft = draggedElement.id === 'leftArrow';
draggedElement.style.transform = `translate(${currentX}px, ${currentY}px) scale(-1, 1)`; const arrowId = isLeft ? 'left' : 'right';
const rotation = arrowStates[arrowId].rotation;
if (isLeft) {
arrowStates.left.x = currentX;
arrowStates.left.y = currentY;
} else { } else {
draggedElement.style.transform = `translate(${currentX}px, ${currentY}px)`; arrowStates.right.x = currentX;
arrowStates.right.y = currentY;
} }
setArrowTransform(arrowId, currentX, currentY, rotation);
} }
// 停止拖动 // 停止拖动
@@ -233,40 +398,72 @@
document.removeEventListener('mouseup', stopDrag); document.removeEventListener('mouseup', stopDrag);
} }
// 箭头动画 // 箭头动画 - 沿指向方向移动指定长度
function animateArrows() { function animateArrows() {
if (isAnimating) return; if (isAnimating) return;
isAnimating = true; isAnimating = true;
startBtn.disabled = true; startBtn.disabled = true;
startBtn.textContent = '移动中...';
saveBtn.disabled = true; saveBtn.disabled = true;
startBtn.textContent = '移动中...';
const leftStart = getTransformValues(leftArrow); // 获取当前箭头位置作为动画起点
const rightStart = getTransformValues(rightArrow); const startLeftX = arrowStates.left.x;
const duration = 2000; // 2秒 const startLeftY = arrowStates.left.y;
const startTime = performance.now(); const startRightX = arrowStates.right.x;
const startRightY = arrowStates.right.y;
function updateAnimation(currentTime) { // 获取移动距离
const elapsed = currentTime - startTime; const leftMoveDistance = parseInt(leftLengthInput.value) || 100;
const progress = Math.min(elapsed / duration, 1); const rightMoveDistance = parseInt(rightLengthInput.value) || 100;
// 左侧箭头从当前位置移动到(0, 70) // 计算箭头移动方向（基于当前旋转角度）
const leftX = leftStart.x + (0 - leftStart.x) * progress; // 修复角度计算 - 添加90度偏移使箭头指向正确方向
const leftY = leftStart.y + (70 - leftStart.y) * progress; const leftAngle = (arrowStates.left.rotation - 90) * Math.PI / 180;
leftArrow.style.transform = `translate(${leftX}px, ${leftY}px)`; const rightAngle = (arrowStates.right.rotation - 90) * Math.PI / 180;
// 右侧箭头从当前位置移动到(250, 70)，保持翻转 // 根据角度计算目标位置
const rightX = rightStart.x + (250 - rightStart.x) * progress; const targetLeftX = startLeftX + Math.cos(leftAngle) * leftMoveDistance;
const rightY = rightStart.y + (70 - rightStart.y) * progress; const targetLeftY = startLeftY + Math.sin(leftAngle) * leftMoveDistance;
rightArrow.style.transform = `translate(${rightX}px, ${rightY}px) scale(-1, 1)`; const targetRightX = startRightX + Math.cos(rightAngle) * rightMoveDistance;
const targetRightY = startRightY + Math.sin(rightAngle) * rightMoveDistance;
// 添加调试信息
console.log('箭头移动参数:', {
startLeftX, startLeftY, leftAngle,
targetLeftX, targetLeftY,
leftMoveDistance
});
let startTime = null;
const duration = 2000; // 动画持续时间（毫秒）
function updateAnimation(timestamp) {
if (!startTime) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / duration, 1);
// 计算当前位置（线性插值）
const currentLeftX = startLeftX + (targetLeftX - startLeftX) * progress;
const currentLeftY = startLeftY + (targetLeftY - startLeftY) * progress;
const currentRightX = startRightX + (targetRightX - startRightX) * progress;
const currentRightY = startRightY + (targetRightY - startRightY) * progress;
// 更新箭头位置
setArrowTransform('left', currentLeftX, currentLeftY, arrowStates.left.rotation);
setArrowTransform('right', currentRightX, currentRightY, arrowStates.right.rotation);
if (progress < 1) { if (progress < 1) {
requestAnimationFrame(updateAnimation); requestAnimationFrame(updateAnimation);
} else { } else {
// 更新状态到最终位置
arrowStates.left.x = targetLeftX;
arrowStates.left.y = targetLeftY;
arrowStates.right.x = targetRightX;
arrowStates.right.y = targetRightY;
isAnimating = false; isAnimating = false;
startBtn.disabled = false; startBtn.disabled = false;
startBtn.textContent = '重新开始'; startBtn.textContent = '开始移动';
saveBtn.disabled = false; saveBtn.disabled = false;
} }
} }
@@ -274,15 +471,25 @@
requestAnimationFrame(updateAnimation); requestAnimationFrame(updateAnimation);
} }
// 事件监听 // 事件监听 - 修正所有事件绑定
leftArrow.addEventListener('mousedown', startDrag); leftArrow.addEventListener('mousedown', startDrag);
rightArrow.addEventListener('mousedown', startDrag); rightArrow.addEventListener('mousedown', startDrag);
startBtn.addEventListener('click', animateArrows); startBtn.addEventListener('click', animateArrows);
saveBtn.addEventListener('click', saveCurrentPositions); saveBtn.addEventListener('click', saveCurrentStates);
resetBtn.addEventListener('click', resetToDefaultPositions); resetBtn.addEventListener('click', resetToDefaultStates);
applyLeftRotationBtn.addEventListener('click', () => applyRotation('left'));
applyRightRotationBtn.addEventListener('click', () => applyRotation('right'));
// 页面加载时加载保存的位置 // 允许直接按Enter键应用旋转
window.addEventListener('load', loadSavedPositions); leftRotationInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') applyRotation('left');
});
rightRotationInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') applyRotation('right');
});
// 页面加载时加载保存的状态
window.addEventListener('load', loadSavedStates);
</script> </script>
</body> </body>
</html> </html>