位置数组
robotRailPoint:[
{
"map_X":135,
"map_Y":181,
"angle":0
},
{
"map_X":120,
"map_Y":119,
"angle":0
},
{
"map_X":55,
"map_Y":91,
"angle":0
}
]
画点
<template v-for="(item, index) in robotRailPoint">
<template v-if="index === 0">
<span
ref="robotRailPoint"
:key="`${timeKey}-robotRailPoint-${index}`"
class="circle_blue_big robotRailPointItem"
:style="`top: ${(item.map_Y) * multiples}px;
left: ${item.map_X}px;`">
</span>
</template>
<template v-else>
<span
ref="robotRailPoint"
:key="`${timeKey}-robotRailPoint-${index}`"
class="circle_blue robotRailPointItem"
:style="`top: ${(item.map_Y) * multiples}px;
left: ${item.map_X}px;
transform: rotate(${getRobotRailAngle(item,index) + 45}deg);`">
</span>
</template>
<template v-if="index > 0">
<span :key="`${timeKey}-robotRailLine-${index}`" :style="robotRailLineStyle(item,index)"></span>
</template>
</template>
画线
robotRailLineStyle (position, index) {
const positions = this.robotRailPoint
const p1 = position
const p2 = positions[index - 1]
const x1 = p1.map_X
const y1 = p1.map_Y
const x2 = p2.map_X
const y2 = p2.map_Y
const color = 'blue'
const lineWidth = 1
const rectX = x1 < x2 ? x1 : x2
const rectY = y1 < y2 ? y1 : y2
const rectWidth = Math.abs(x1 - x2)
const rectHeight = Math.abs(y1 - y2)
const stringWidth = Math.ceil(Math.sqrt((rectWidth * rectWidth) + (rectHeight * rectHeight)))
const StringWidthChange = stringWidth * this.multiples
const xPad = (rectWidth - stringWidth) / 2
const yPad = (rectHeight - lineWidth) / 2
const radNum = Math.atan2((y1 - y2), (x1 - x2))
return `
position: absolute;
top: 0px;
left: 0px;
width: ${StringWidthChange}px;
height: ${lineWidth}px;
background-color: ${color};
transform: translate(${(rectX + xPad) * this.multiples}px, ${(rectY + yPad) * this.multiples}px) rotate(${radNum}rad);
`
},
因为我的样式在图上画的是箭头,所以会有旋转问题,根据连续的两个点判断旋转角度
如果只是圆点就不用加角度相关的样式和方法了
.circle_blue{
position: absolute;
width: 10px;
height: 10px;
border-top: 2px solid blue;
border-left: 2px solid blue;
}
getRobotRailAngle (position, index) {
const positions = this.robotRailPoint
const p1 = position
const p2 = positions[index - 1]
const x1 = p1.map_X
const y1 = p1.map_Y
const x2 = p2.map_X
const y2 = p2.map_Y
const x = Math.abs(x1 - x2)
const y = Math.abs(y1 - y2)
const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))
const cos = y / z
const radina = Math.acos(cos) // 用反三角函数求弧度
let angle = Math.floor(180 / (Math.PI / radina)) // 将弧度转换成角度
if (x2 > x1 && y2 > y1) { // 鼠标在第四象限
angle = 180 - angle
}
if (x2 === x1 && y2 > y1) { // 鼠标在y轴负方向上
angle = 180
}
if (x2 > x1 && y2 === y1) { // 鼠标在x轴正方向上
angle = 90
}
if (x2 < x1 && y2 > y1) { // 鼠标在第三象限
angle = 180 + angle
}
if (x2 < x1 && y2 === y1) { // 鼠标在x轴负方向
angle = 270
}
if (x2 < x1 && y2 < y1) { // 鼠标在第二象限
angle = 360 - angle
}
if (angle > 180) {
angle = angle - 360
}
return angle
},