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 13:47:24 +08:00
parent 9c175151d8
commit a43cf5723d
5 changed files with 18 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
dsLightRag/XingJun/blueArrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

476
dsLightRag/XingJun/move.html
View File

@@ -27,469 +27,29 @@
z-index: 1; z-index: 1;
} }
/* 右侧控制面板样式 - 完全重构 */
.control-panel {
position: fixed;
top: 0;
right: 0; /* 确保面板固定在右侧 */
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;
gap: 10px;
}
.horizontal-controls button {
width: 50%;
}
.group-title {
margin-top: 0;
color: #333;
border-bottom: 2px solid #4CAF50;
padding-bottom: 8px;
margin-bottom: 15px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
width: 100%;
margin-bottom: 10px;
}
button:hover:not(:disabled) {
background-color: #45a049;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.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;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.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"> <!-- 新增红色箭头 -->
<!-- 箭头SVG代码 - 从fill.html恢复原始路径数据 --> <div
<svg class="arrow arrow-left" id="leftArrow" width="240" height="61" viewBox="-0.5 -0.5 240 61"> class="red-arrow"
<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"/> style="
</svg> position: absolute;
<svg class="arrow arrow-right" id="rightArrow" width="240" height="61" viewBox="-0.5 -0.5 240 61"> top: 50%;
<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"/> left: 50%;
</svg> transform: translate(-50%,-50%);
</div> z-index: 2;
width: 155px;
<!-- 右侧控制面板 --> height: 173px;
<div class="control-panel"> background-image: url('./redArraw.png');
<!-- 动画控制 --> background-size: contain;
<div class="control-group"> ">
<h3 class="group-title">动画控制</h3>
<button id="startBtn" class="control-btn">开始移动</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>
// 修正元素ID引用
const leftArrow = document.getElementById('leftArrow');
const rightArrow = document.getElementById('rightArrow');
const startBtn = document.getElementById('startBtn');
const saveBtn = document.getElementById('saveBtn');
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 draggedElement = null;
let initialX = 0;
let initialY = 0;
let currentX = 0;
let currentY = 0;
// 调整箭头初始位置，确保在可见区域
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 {
const savedLeft = localStorage.getItem('arrowLeftState');
const savedRight = localStorage.getItem('arrowRightState');
if (savedLeft) {
const { x, y, rotation, length } = JSON.parse(savedLeft);
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) {
const { x, y, rotation, length } = JSON.parse(savedRight);
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) {
console.error('加载保存的状态失败:', e);
alert('加载保存的状态失败，请重试');
}
}
// 保存当前状态到localStorage
function saveCurrentStates() {
try {
// 更新状态中的长度值
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('arrowLeftState', JSON.stringify(arrowStates.left));
localStorage.setItem('arrowRightState', JSON.stringify(arrowStates.right));
alert('位置、角度和移动长度已保存');
} catch (e) {
console.error('保存状态失败:', e);
alert('保存状态失败，请重试');
}
}
// 重置到默认状态
function resetToDefaultStates() {
localStorage.removeItem('arrowLeftState');
localStorage.removeItem('arrowRightState');
// 重置左侧箭头
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('已重置为默认状态');
}
// 应用旋转角度
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) {
const transform = window.getComputedStyle(element).getPropertyValue('transform');
if (transform === 'none') return { x: 0, y: 0 };
const matrix = new DOMMatrix(transform);
return { x: matrix.e, y: matrix.f };
}
// 开始拖动
function startDrag(e) {
if (isAnimating) return;
draggedElement = e.target.closest('.arrow');
if (!draggedElement) return;
const transform = getTransformValues(draggedElement);
currentX = transform.x;
currentY = transform.y;
initialX = e.clientX - currentX;
initialY = e.clientY - currentY;
draggedElement.style.zIndex = '1001';
draggedElement.style.transition = 'transform 0s';
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
}
// 拖动中
function drag(e) {
if (!draggedElement) return;
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
// 更新状态并应用变换
const isLeft = draggedElement.id === 'leftArrow';
const arrowId = isLeft ? 'left' : 'right';
const rotation = arrowStates[arrowId].rotation;
if (isLeft) {
arrowStates.left.x = currentX;
arrowStates.left.y = currentY;
} else {
arrowStates.right.x = currentX;
arrowStates.right.y = currentY;
}
setArrowTransform(arrowId, currentX, currentY, rotation);
}
// 停止拖动
function stopDrag() {
if (draggedElement) {
draggedElement.style.zIndex = '';
draggedElement = null;
}
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', stopDrag);
}
// 箭头动画 - 沿指向方向移动指定长度
function animateArrows() {
if (isAnimating) return;
isAnimating = true;
startBtn.disabled = true;
saveBtn.disabled = true;
startBtn.textContent = '移动中...';
// 获取当前箭头位置作为动画起点
const startLeftX = arrowStates.left.x;
const startLeftY = arrowStates.left.y;
const startRightX = arrowStates.right.x;
const startRightY = arrowStates.right.y;
// 获取移动距离
const leftMoveDistance = parseInt(leftLengthInput.value) || 100;
const rightMoveDistance = parseInt(rightLengthInput.value) || 100;
// 计算箭头移动方向（基于当前旋转角度）
// 修复角度计算 - 添加90度偏移使箭头指向正确方向
const leftAngle = (arrowStates.left.rotation - 90) * Math.PI / 180;
const rightAngle = (arrowStates.right.rotation - 90) * Math.PI / 180;
// 根据角度计算目标位置
const targetLeftX = startLeftX + Math.cos(leftAngle) * leftMoveDistance;
const targetLeftY = startLeftY + Math.sin(leftAngle) * leftMoveDistance;
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) {
requestAnimationFrame(updateAnimation);
} else {
// 更新状态到最终位置
arrowStates.left.x = targetLeftX;
arrowStates.left.y = targetLeftY;
arrowStates.right.x = targetRightX;
arrowStates.right.y = targetRightY;
isAnimating = false;
startBtn.disabled = false;
startBtn.textContent = '开始移动';
saveBtn.disabled = false;
}
}
requestAnimationFrame(updateAnimation);
}
// 事件监听 - 修正所有事件绑定
leftArrow.addEventListener('mousedown', startDrag);
rightArrow.addEventListener('mousedown', startDrag);
startBtn.addEventListener('click', animateArrows);
saveBtn.addEventListener('click', saveCurrentStates);
resetBtn.addEventListener('click', resetToDefaultStates);
applyLeftRotationBtn.addEventListener('click', () => applyRotation('left'));
applyRightRotationBtn.addEventListener('click', () => applyRotation('right'));
// 允许直接按Enter键应用旋转
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>
</body> </body>
</html> </html>

BIN
dsLightRag/XingJun/redArraw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
dsLightRag/XingJun/各种各样的红色箭头.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
dsLightRag/XingJun/蓝色箭头.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB