2025-09-09 07:33:51 +08:00
|
|
|
<!DOCTYPE html>
|
2025-09-09 07:46:47 +08:00
|
|
|
<html lang="en">
|
2025-09-09 07:33:51 +08:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2025-09-09 07:46:47 +08:00
|
|
|
<title>箭头动画</title>
|
2025-09-10 07:41:42 +08:00
|
|
|
<link rel="stylesheet" href="../layui/css/layui.css">
|
|
|
|
|
<!--引入layui layer-->
|
|
|
|
|
<script src="../layui/layui.all.js" charset="utf-8"></script>
|
2025-09-10 07:28:38 +08:00
|
|
|
<link rel="stylesheet" href="css/style.css">
|
2025-09-09 07:33:51 +08:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2025-09-09 14:41:54 +08:00
|
|
|
<div class="background-container"></div>
|
2025-09-09 14:07:51 +08:00
|
|
|
<div class="control-panel">
|
2025-09-10 07:28:38 +08:00
|
|
|
<div class="control-section">
|
2025-09-09 14:07:51 +08:00
|
|
|
<div class="control-section">
|
|
|
|
|
<h3>增加箭头</h3>
|
|
|
|
|
<div class="image-selector">
|
2025-09-10 07:28:38 +08:00
|
|
|
<div class="image-btn" data-image="images/1.png" style="background-image: url('images/1.png');"></div>
|
|
|
|
|
<div class="image-btn" data-image="images/2.png" style="background-image: url('images/2.png');"></div>
|
|
|
|
|
<div class="image-btn" data-image="images/3.png" style="background-image: url('images/3.png');"></div>
|
|
|
|
|
<div class="image-btn" data-image="images/4.png" style="background-image: url('images/4.png');"></div>
|
|
|
|
|
<div class="image-btn" data-image="images/5.png" style="background-image: url('images/5.png');"></div>
|
|
|
|
|
<div class="image-btn" data-image="images/6.png" style="background-image: url('images/6.png');"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 添加偏移量控制区域 -->
|
|
|
|
|
<div class="offset-control" style="margin-top: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px;">
|
|
|
|
|
<label for="global-stop-distance" style="display: block; margin-bottom: 5px;">箭头停止距离 (px):</label>
|
|
|
|
|
<input type="number" id="global-stop-distance" min="0" max="100" value="20" style="width: 100%; padding: 8px;">
|
2025-09-10 07:41:42 +08:00
|
|
|
<p style="font-size: 12px; color: #666; margin: 5px 0 0 0;">* 全局设置，所有箭头生效</p>
|
2025-09-09 14:07:51 +08:00
|
|
|
</div>
|
2025-09-09 15:05:04 +08:00
|
|
|
<button class="save-btn" id="markCenterBtn" style="margin-top: 10px;">标记中心点</button>
|
2025-09-09 15:21:27 +08:00
|
|
|
<button class="save-btn" id="startAnimationBtn" style="margin-top: 10px;">开始</button>
|
|
|
|
|
<button class="save-btn" id="resetBtn" style="margin-top: 10px;">重置</button>
|
2025-09-09 07:39:54 +08:00
|
|
|
</div>
|
2025-09-09 07:33:51 +08:00
|
|
|
</div>
|
2025-09-09 15:55:44 +08:00
|
|
|
<div id="contextMenu">
|
|
|
|
|
<div id="deleteArrow">删除箭头</div>
|
|
|
|
|
<div class="menu-separator"></div>
|
|
|
|
|
<div class="menu-item" data-point="top-left"><span class="check-mark"></span>左上角</div>
|
|
|
|
|
<div class="menu-item" data-point="top-right"><span class="check-mark"></span>右上角</div>
|
|
|
|
|
<div class="menu-item" data-point="bottom-left"><span class="check-mark"></span>左下角</div>
|
|
|
|
|
<div class="menu-item" data-point="bottom-right"><span class="check-mark"></span>右下角</div>
|
|
|
|
|
</div>
|
2025-09-09 07:33:51 +08:00
|
|
|
|
2025-09-10 07:28:38 +08:00
|
|
|
<script src="js/script.js"></script>
|
2025-09-09 07:33:51 +08:00
|
|
|
</body>
|
2025-09-10 07:41:42 +08:00
|
|
|
</html>
|
