<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置页面编码为UTF-8 -->
<meta charset="UTF-8">
<!-- 设置页面标题 -->
<title>Draw Arrow</title>
<style>
/* 定义一个名为page的类，用于布局 */
.page {
width: 100%;
height: 100%;
display: flex;
}
/* 定义一个名为box1的类，用于样式设置 */
.box1 {
width: 50px;
height: 50px;
background: orange;
}
/* 定义一个名为box2的类，用于样式设置 */
.box2 {
width: 50px;
height: 50px;
background: rgb(84, 125, 238);
margin-left: 100px;
}
/* 定义一个名为arrow的类，用于箭头元素的样式设置 */
.arrow {
position: absolute;
background-color: green;
width: 10px;
height: 2px;
}
</style>
</head>
<body>
<div id="app">
<!-- 创建一个容器，使用page类进行布局 -->
<div class="page">
<!-- 创建一个具有box1类的div元素，用作起始点 -->
<div class="box1" @mousedown="handleMouseDown"></div>
<!-- 创建一个具有box2类的div元素，用作终点 -->
<div class="box2" @mouseup="handleMouseUp"></div>
</div>
</div>
<!-- 引入Vue.js库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isDrawing: false,
startX: 0,
startY: 0,
endX: 0,
endY: 0
},
methods: {
// 鼠标按下事件处理方法
handleMouseDown(event) {
// 记录鼠标按下时的坐标和目标元素
this.startX = event.clientX;
this.startY = event.clientY;
this.target = event.target;
},
// 鼠标释放事件处理方法
handleMouseUp(event) {
// 获取鼠标释放时的坐标和目标元素
const endX = event.clientX;
const endY = event.clientY;
const target = event.target;
// 如果目标元素具有box2类名
if (target.classList.contains('box2')) {
// 创建一个div元素作为箭头表示，并设置其样式属性
const arrow = document.createElement('div');
arrow.classList.add('arrow');
arrow.style.left = this.startX + 'px';
arrow.style.top = this.startY + 'px';
arrow.style.width = Math.max(endX - this.startX, 0) + 'px';
arrow.style.transform = `rotate(${Math.atan((endY - this.startY) / (endX - this.startX))}rad)`;
// 将箭头元素添加到目标元素中
target.appendChild(arrow);
}
}
}
});
</script>
</body>
</html>
