先看下效果：我们画线后可以根据比例关系自动计算距离，并且线条不对可以自由调整

<template>
  <div id="image-detail">
    <el-image :src="myImageUrl" style="height: auto; width: 800px;" fit="scale-down" ref="canvasRef" @mousedown="startDrawing" @mousemove="drawLine" @mouseup="stopDrawing">
      <template #error>
        <div>
          <el-icon></el-icon>
        </div>
      </template>
    </el-image>
  </div>
</template>

<script>
import LeaderLine from 'leader-line'
import $ from 'jquery'

export default {
  ...
  methods: {
    startDrawing(event) {
      console.log("当前坐标点:" + event.offsetX + " " + event.offsetY)
      if (this.checkIfAiPoint(event)) return
    },
    drawLine(event) {
      const self = this
      if (self.ai.isAiMoving) {
        self.aiMoving(event)
        return false
      }
    },
    stopDrawing(event) {
      if (this.checkIfAiPoint(event)) return
    },
    // AI结果画图
    markPointPlus(offsetX, offsetY, tag, nameIndex) {
      const self = this
      if (document.getElementById("image-detail") === null) {
        return
      }
      
      // 点击多个点，生成多个值
      let div = document.createElement("div");
      div.className = "marker";

      div.id = "marker" + nameIndex + 'ai' + tag;
      div.style.width = 0
      div.style.height = 0
      // 红点颜色
      div.style.backgroundColor = "red";
      div.style.zIndex = 999;
      div.style.left = offsetX + "px";
      let imageHeight = $('#image-detail').height()
      div.style.top = (offsetY - imageHeight) + "px";
      div.style.position = "relative";
      // 边框半径百分比
      div.style.borderRadius = "50%";
      // 该位置监听的偏移量有问题,需计算
      // div.onclick = function (event) {
      //   // 计算出相对图片的偏移量
      //   console.log($('#image-detail .el-image__inner').left)
      //   console.log($('#image-detail .el-image__inner').top)
      //   const offsetX = event.clientX - $('#image-detail .el-image__inner').left
      //   const offsetY = event.clientY - $('#image-detail .el-image__inner').top
      //   if (self.ai.isAiMoving) {
      //     // 停止移动
      //     self.stopAiMoving(offsetX, offsetY, nameIndex, tag)
      //   } else {
      //     // 开始移动
      //     self.startAiMoving(offsetX, offsetY, nameIndex, tag)
      //   }
      // },
      document.getElementById("image-detail").appendChild(div);
      self.aiLineStartMiddleInfo[nameIndex + tag] = {'offsetX': offsetX, 'offsetY': offsetY}
    },
    startAiMoving(offsetX, offsetY, nameIndex, tag) {
      const self = this
      // 说明鼠标刚刚从原来位置up,不需要开始
      if (offsetX === self.lastAiX && offsetY === self.lastAiY) {
        return false
      }
      self.ai.isAiMoving = true
      self.ai.nameIndex = nameIndex
      self.ai.tag = tag
      self.lastAiX = offsetX
      self.lastAiY = offsetY
    },
    aiMoving(event) {
      const self = this
      const nameIndex = self.ai.nameIndex
      let imageHeight = $('#image-detail').height()
      if (!this.ai.isAiMoving) return;
      // const len = Object.keys(self.aiDrawInfo).length
      // 由于之前在开始结束位置新增了点的宽高均为4导致
      // 解决开始端移动点上移问题，原因未知, 由多点规律推断而来
      // if (self.ai.tag === 'start') {
      //   $('#marker' + nameIndex + 'ai' + self.ai.tag).css({
      //     'left': event.offsetX,
      //     'top': (event.offsetY + 4 * (len - nameIndex) * 2 - imageHeight)
      //   })
      // } else {
      //   $('#marker' + nameIndex + 'ai' + self.ai.tag).css({
      //     'left': event.offsetX,
      //     'top': (event.offsetY + 4 * ((len - nameIndex) * 2 - 2) - imageHeight)
      //   })
      // }
      $('#marker' + nameIndex + 'ai' + self.ai.tag).css({
        'left': event.offsetX,
        'top': (event.offsetY - imageHeight)
      })
      const lineRef = self.aiDrawInfo['marker' + nameIndex + 'ai']
      lineRef.position()
    },
    stopAiMoving(currOffsetX, currOffsetY, nameIndex, tag) {
      const self = this
      nameIndex = Number(nameIndex)
      // 说明鼠标刚刚从原来位置up,不需要结束
      if (currOffsetX === self.lastAiX && currOffsetY === self.lastAiY) {
        return false
      }
      self.ai.isAiMoving = false
      self.ai.nameIndex = 0
      self.ai.tag = ''
      let offsetX
      let offsetY
      if (tag === 'start') {
        offsetX = self.aiLineStartMiddleInfo[nameIndex + 'middle']['offsetX']
        offsetY = self.aiLineStartMiddleInfo[nameIndex + 'middle']['offsetY']
      } else {
        offsetX = self.aiLineStartMiddleInfo[nameIndex + 'start']['offsetX']
        offsetY = self.aiLineStartMiddleInfo[nameIndex + 'start']['offsetY']
      }
      const currDistance = Math.sqrt((currOffsetX - offsetX) ** 2 + (currOffsetY - offsetY) ** 2)
      let currRealDistance = (self.rulerRealDistance * 100 / self.rulerDistance * currDistance / 100).toFixed(1)
      // 判断是否为标尺移动
      if (nameIndex === 0) {
        self.rulerDistance = currDistance
        // 重新计算其他所有的画线距离
        this.recalculateAiByRuler()
      } else {
        const lineRef = self.aiDrawInfo['marker' + nameIndex + 'ai']
        lineRef.setOptions({'endLabel': currRealDistance + 'mm'})
      }++-
      // 同时更新坐标信息
      self.aiLineStartMiddleInfo[nameIndex + tag]['offsetX'] = currOffsetX
      self.aiLineStartMiddleInfo[nameIndex + tag]['offsetY'] = currOffsetY
      self.lastAiX = currOffsetX
      self.lastAiY = currOffsetY
    },
    // 重新计算其他所有的画线距离
    recalculateAiByRuler() {
      const self = this
      for (let nameIndex = 0; nameIndex < Object.keys(this.aiLineStartMiddleInfo).length / 2; nameIndex++) {
        // 标尺信息不重新计算
        if (nameIndex === 0 || nameIndex === 5) {
          continue
        }
        const middleOffsetX = this.aiLineStartMiddleInfo[nameIndex+'middle']['offsetX']
        const middleOffsetY = this.aiLineStartMiddleInfo[nameIndex+'middle']['offsetY']
        const startOffsetX = this.aiLineStartMiddleInfo[nameIndex+'start']['offsetX']
        const startOffsetY = this.aiLineStartMiddleInfo[nameIndex+'start']['offsetY']
        const currDistance = Math.sqrt(( middleOffsetX - startOffsetX) ** 2 + (middleOffsetY - startOffsetY) ** 2)
        let currRealDistance = ( this.rulerRealDistance * 100 / this.rulerDistance * currDistance / 100).toFixed(1)
        const lineRef = self.aiDrawInfo['marker' + nameIndex + 'ai']
        lineRef.setOptions({'endLabel': currRealDistance + 'mm'})
      }
    },
    drawAiLine(color, x1, y1, x2, y2, index, tag, rulerRealDistance) {
      const self = this
      const nameIndex = self.aiIndex
      // 由于图片自适应，等比例缩放
      let imageHeight = $('#image-detail').height()
      let imageWidth = $('#image-detail .el-image__inner').width()
      const widthRatio = self.other.aiWidth / imageWidth
      const heightRatio = widthRatio
      x1 /= widthRatio
      y1 /= heightRatio
      x2 /= widthRatio
      y2 /= heightRatio
      this.markPointPlus(x1, y1, 'start', nameIndex)
      this.markPointPlus(x2, y2, 'middle', nameIndex)
      const dom31 = document.getElementById('marker' + nameIndex + 'ai' + "start")
      const dom32 = document.getElementById('marker' + nameIndex + 'ai' + "middle")
      let lineRef3 = new LeaderLine(dom31, dom32, {'color': color, 'path': 'straight'});
      lineRef3.show()
      self.aiDrawInfo['marker' + nameIndex + 'ai'] = lineRef3
      const currDistance = Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2)
      const currRealDistance = (rulerRealDistance * 100 / self.rulerDistance * currDistance / 100).toFixed(1)
      lineRef3.setOptions({'endLabel': currRealDistance + 'mm'})
      self.$emit('updateResult', {'index': index, 'tag': tag, 'value': currRealDistance})
    },
    drawByAi() {
      ...
    }
  }
}
</script>

<style lang="scss" scoped>
.line-block {
  height: 90vh;

  .one {
    display: flex;
    justify-content: space-around;
    // height: 100px;
  }

  .two {
    margin-top: 100px;
    display: flex;
    justify-content: space-around;
  }

  .iframe-block {
    margin-top: 50px;
  }

  .target {
    display: inline-block;
    background-color: #9ee7ea;
    padding: 12px;
  }

  .block-one {
    border: 1px solid blue;
    padding: 10px;
  }

  .block-two {
    border: 1px solid blue;
    padding: 10px;
  }

  .block-three {
    border: 1px solid blue;
    padding: 10px;
  }

  .block-four {
    border: 1px solid blue;
    padding: 10px;
  }
}
</style>

欢迎关注公众号 算法小生