vue中根据位置点画线

最新推荐文章于 2024-04-12 14:16:34 发布

是文静的

最新推荐文章于 2024-04-12 14:16:34 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44091061/article/details/125543921

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

位置数组
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
},