Compare commits
2 Commits
edc578d6b5
...
512abbd9b8
| Author | SHA1 | Date | |
|---|---|---|---|
| 512abbd9b8 | |||
| a43cf5723d |
BIN
dsLightRag/XingJun/1.png
Normal file
BIN
dsLightRag/XingJun/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
dsLightRag/XingJun/2.png
Normal file
BIN
dsLightRag/XingJun/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
dsLightRag/XingJun/3.png
Normal file
BIN
dsLightRag/XingJun/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
dsLightRag/XingJun/4.png
Normal file
BIN
dsLightRag/XingJun/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
dsLightRag/XingJun/5.png
Normal file
BIN
dsLightRag/XingJun/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
dsLightRag/XingJun/blueArrow.png
Normal file
BIN
dsLightRag/XingJun/blueArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
@@ -27,469 +27,64 @@
|
|||||||
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">
|
<!-- 1.png 图片 -->
|
||||||
<!-- 箭头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: 10%;
|
||||||
<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: 10%;
|
||||||
</svg>
|
transform: translate(-50%,-50%);
|
||||||
|
z-index: 2;
|
||||||
|
width: 155px;
|
||||||
|
height: 173px;
|
||||||
|
background-image: url('./1.png');
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 右侧控制面板 -->
|
<!-- 新增2.png 图片 -->
|
||||||
<div class="control-panel">
|
<div
|
||||||
<!-- 动画控制 -->
|
class="red-arrow"
|
||||||
<div class="control-group">
|
style="
|
||||||
<h3 class="group-title">动画控制</h3>
|
position: absolute;
|
||||||
<button id="startBtn" class="control-btn">开始移动</button>
|
top: 50%;
|
||||||
</div>
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
z-index: 2;
|
||||||
|
width: 155px;
|
||||||
|
height: 173px;
|
||||||
|
background-image: url('./2.png');
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
">
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 位置管理 -->
|
<!-- 新增3.png 图片 -->
|
||||||
<div class="control-group">
|
<div
|
||||||
<h3 class="group-title">位置管理</h3>
|
class="red-arrow"
|
||||||
<div class="horizontal-controls">
|
style="
|
||||||
<button id="saveBtn" class="control-btn">保存当前位置</button>
|
position: absolute;
|
||||||
<button id="resetBtn" class="control-btn">重置默认位置</button>
|
top: 90%;
|
||||||
</div>
|
left: 90%;
|
||||||
</div>
|
transform: translate(-50%,-50%);
|
||||||
|
z-index: 2;
|
||||||
<!-- 旋转控制 -->
|
width: 155px;
|
||||||
<div class="control-group">
|
height: 173px;
|
||||||
<h3 class="group-title">旋转控制</h3>
|
background-image: url('./3.png');
|
||||||
<div class="rotation-control-item">
|
background-size: contain;
|
||||||
<label for="leftRotationInput">左箭头角度 (°):</label>
|
background-repeat: no-repeat;
|
||||||
<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
BIN
dsLightRag/XingJun/redArraw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
dsLightRag/XingJun/各种各样的红色箭头.png
Normal file
BIN
dsLightRag/XingJun/各种各样的红色箭头.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
1
dsLightRag/XingJun/改图神器.txt
Normal file
1
dsLightRag/XingJun/改图神器.txt
Normal file
@@ -0,0 +1 @@
|
|||||||
|
https://imageonline.co/cn/crop-png.php
|
||||||
BIN
dsLightRag/XingJun/红色箭头.png
Normal file
BIN
dsLightRag/XingJun/红色箭头.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
dsLightRag/XingJun/蓝色箭头.png
Normal file
BIN
dsLightRag/XingJun/蓝色箭头.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Reference in New Issue
Block a user