495 lines
19 KiB
HTML
495 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>箭头动画</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.background-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-image: url('D:\\dsWork\\dsProject\\dsLightRag\\XingJun\\background.png');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
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>
|
|
</head>
|
|
<body>
|
|
<div class="background-container">
|
|
<div class="arrow-container">
|
|
<!-- 箭头SVG代码 - 从fill.html恢复原始路径数据 -->
|
|
<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"/>
|
|
</svg>
|
|
<svg class="arrow arrow-right" id="rightArrow" 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"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- 右侧控制面板 -->
|
|
<div class="control-panel">
|
|
<!-- 动画控制 -->
|
|
<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>
|
|
|
|
<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>
|
|
</html> |