apt15e/src/pages/modules/building.vue

<template>
  <div class="page_container">
    <el-row type="flex" justify="space-between">
      <el-col :span="10"><button class="button_control" @click="addPoint"><p>打点</p></button></el-col>
      <el-col :span="14">
        <el-row type="flex" justify="end">
          <el-button type="primary" icon="el-icon-zoom-in" size="mini" @click="zoomIn">放大</el-button>
          <el-button type="primary" icon="el-icon-zoom-out" size="mini" @click="zoomOut">缩小</el-button>
        </el-row>
      </el-col>
    </el-row>
    <div class="canvas-container">
      <canvas id="canvas" ref="canvas" width="1920" height="1080"></canvas>
    </div>
    <el-row type="flex" justify="end"><button class="button_control" @click="connectPoints"><p>建图</p></button></el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      points: [], // 存储所有点位坐标
      intervalId: null, // 用于存储定时器的 ID
      drawingPoints: true, // 是否继续绘制点位
      scale: 1 // 缩放比例
    }
  },
  beforeDestroy () {
    if (this.intervalId) {
      clearInterval(this.intervalId)
    }
  },
  methods: {
    addPoint () {
      this.points = [] // 清空白色点位数组
      this.drawingPoints = true // 重新开始绘制点位
      this.drawPoints() // 重新绘制画布
      this.updatePoint()
      this.intervalId = setInterval(this.updatePoint, 5000)
    },
    // 模拟后端提供的点位坐标
    getNewPoint () {
      // 随机生成新的坐标
      const newX = Math.random() * 1920 // 假设 x 坐标范围是 0 到 1920
      const newY = Math.random() * 1080 // 假设 y 坐标范围是 0 到 1080
      return { x: newX, y: newY } // 返回坐标
    },
    // 更新点位坐标
    updatePoint () {
      if (!this.drawingPoints) return
      const newPoint = this.getNewPoint() // 获取新的坐标
      this.points.push(newPoint) // 将新坐标添加到数组中
      this.drawPoints() // 重新绘制点位
    },
    // 绘制点位
    drawPoints () {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布

      // 绘制每个点位
      ctx.fillStyle = 'white'
      ctx.beginPath()
      this.points.forEach(point => {
        ctx.moveTo(point.x, point.y)
        ctx.arc(point.x, point.y, 10, 0, Math.PI * 2) // 绘制半径为10px的圆点
      })
      ctx.fill()
    },
    // 连接点位成一条直线
    connectPoints () {
      this.drawingPoints = false // 停止绘制点位
      clearInterval(this.intervalId) // 关闭定时器
      this.drawLine() // 绘制直线
    },
    drawLine () {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布
      // 绘制路径
      ctx.strokeStyle = 'white'
      ctx.lineWidth = 1
      ctx.beginPath()
      if (this.points.length > 0) {
        ctx.moveTo(this.points[0].x, this.points[0].y) // 移动到第一个点
        for (let i = 1; i < this.points.length; i++) {
          ctx.lineTo(this.points[i].x, this.points[i].y) // 依次连接到其他点
        }
        ctx.stroke() // 绘制路径
      }
    },
    // 放大
    zoomIn () {
      this.scale += 0.1
      this.redrawCanvas()
    },
    // 缩小
    zoomOut () {
      this.scale -= 0.1
      if (this.scale < 0.1) this.scale = 0.1 // 防止缩放到 0 或负值
      this.redrawCanvas()
    },
    // 重新绘制画布
    redrawCanvas () {
      const canvas = this.$refs.canvas
      canvas.style.transform = `scale(${this.scale})`
      if (this.drawingPoints) {
        this.drawPoints()
      } else {
        this.drawLine()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.canvas-container
  height calc(100% - 1rem)
  margin .14rem 0
  background-color rgba(0, 19, 48, 70%)
  box-shadow inset 1px 1px 7px 2px #4d9bcd
  overflow hidden
#canvas
  width 100%
  height 100%
</style>