效果图:
代码:
<template>
<div>
<div id="body">
<div class="one" id="one">one</div>
<div class="two" id="two">two</div>
<div class="three" id="three">three</div>
</div>
</div>
</template>
<script>
import axios from '@/axios'
import $ from 'jquery'
import {
mapState
} from 'vuex'
export default {
data() {
return {
}
},
mounted() {
var odiv = document.getElementById('one');
var tdiv = document.getElementById('two');
var hdiv = document.getElementById('three');
//获取div顶角的坐标传入下面的方法中,下面得出来的顶角坐标为右上角
var ox = odiv.getBoundingClientRect().right//div右边距离页面左边的距离
var oy = odiv.getBoundingClientRect().top//div上边距离页面上边的距离
var tx = tdiv.getBoundingClientRect().right
var ty = tdiv.getBoundingClientRect().top
var hx = hdiv.getBoundingClientRect().right
var hy = hdiv.getBoundingClientRect().top
//调用绘制线的方法
this.test1(ox, oy, tx, ty)
this.test1(tx, ty, hx, hy)
},
methods: {
//绘制线的方法
test1(x1, y1, x2, y2) {
let bodyDiv = document.getElementById('body')
// 第一个点的坐标
let firstPoint = {
xPoint: x1,
YPoint: y1,
}
// 第二个点的坐标
let secondPoint = {
xPoint: x2,
YPoint: y2,
}
// 计算出两个点之间的距离
let line = Math.sqrt(Math.pow((firstPoint.xPoint - secondPoint.xPoint), 2) + Math.pow((firstPoint.YPoint -
secondPoint.YPoint), 2))
// 设置一个div 宽度为 两点之间的距离,并且以 transform-origin: 0 50% 为圆心旋转,角度已经算出来
let lineHtmlStr =
`<div style="position:absolute;border-top: 1px solid red;width:${line}px;top:${firstPoint.YPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${this.getAngle(firstPoint.xPoint,firstPoint.YPoint,secondPoint.xPoint,secondPoint.YPoint)}deg);transform-origin: 0 50%;"></div>`;
// 绘制到body里面
bodyDiv.insertAdjacentHTML("beforeEnd", lineHtmlStr);
},
// 获得人物中心和鼠标坐标连线,与y轴正半轴之间的夹角
getAngle(x1, y1, x2, y2) {
debugger
// 获得人物中心和鼠标坐标连线,与y轴正半轴之间的夹角
var x = x1 - x2;
var y = y1 - y2;
var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
var cos = y / z;
var radina = Math.acos(cos); // 用反三角函数求弧度
var angle = 180 / (Math.PI / radina); // 将弧度转换成角度
if (x2 > x1 && y2 === y1) {
// 在x轴正方向上
angle = 0;
}
if (x2 > x1 && y2 < y1) {
// 在第一象限;
angle = angle - 90;
}
if (x2 === x1 && y1 > y2) {
// 在y轴正方向上
angle = -90;
}
if (x2 < x1 && y2 < y1) {
// 在第二象限
angle = 270 - angle;
}
if (x2 < x1 && y2 === y1) {
// 在x轴负方向
angle = 180;
}
if (x2 < x1 && y2 > y1) {
// 在第三象限
angle = 270 - angle;
}
if (x2 === x1 && y2 > y1) {
// 在y轴负方向上
angle = 90;
}
if (x2 > x1 && y2 > y1) {
// 在四象限
angle = angle - 90;
}
return angle;
}
},
created() {
}
}
</script>
<style>
.one {
position: absolute;
top: 30%;
left: 10%;
width: 20%;
height: 60%;
text-align: center;
border: 1px solid #02d6fc;
line-height: 200px;
}
.two {
position: absolute;
top: 50%;
left: 30%;
width: 20%;
height: 40%;
cursor: pointer;
text-align: center;
border: 1px solid #02d6fc;
line-height: 200px;
}
.three {
position: absolute;
top: 70%;
left: 50%;
width: 20%;
height: 20%;
cursor: pointer;
text-align: center;
border: 1px solid #02d6fc;
line-height: 200px;
}
</style>
ps:1.代码是搬的,改成了我想要的样式,代码加了点注释,原链接忘了是哪个了
2.此方法是根据div的右上角距屏幕的距离,算出的线的位置,和div没有绑在一块。如果缩放浏览器百分比,可能会导致线发生偏移