基于Vue3+LeaderLine实现画线时对应点放大精确选点功能

我们在画线时，可能开始结束位置选择不准，导致测量结果会有偏差，所以新增放大功能，如下所示

核心源码：

<template>
  ...
      <el-col :span="2" v-if="largeImageSelected">
        <!-- 显示在右侧的放大之后的区域 -->
                <div class="large" v-if="selectedInsoleUrl" :style="[{'backgroundImage':'url('+selectedInsoleUrl+')'}, {'background-position-x': + -positionX*(800/400)+200 + 'px'}, {'background-position-y': + -positionY*(1066/711)+210 +'px'}]" style="text-align: center; color: red; vertical-align: middle">
                  <div style="margin-top:200px">+</div>
                </div>
      </el-col>
...
</template>

<script>
import $ from 'jquery'
import {
    
    useMouseInElement} from "@vueuse/core";

export default {
    
    
  ...
  setup () {
    
    
    const curIndex = ref(0)
    function mouseenter (index) {
    
    
      curIndex.value = index
    }
    const target = ref(null)

    const {
    
     elementX, elementY, isOutside } = useMouseInElement(target)
    // 监听
    const left = ref(0)
    const top = ref(0)
    // 定位位置
    const positionX = ref(0)
    const positionY = ref(0)
    watch([elementX, elementY], () => {
    
    
      positionX.value = elementX.value
      positionY.value = elementY.value
    })
    return {
    
    
      curIndex,
      mouseenter,
      target,
      left,
      top,
      isOutside,
      positionX,
      positionY
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.large {
    
    
  position: absolute;
  top: 0;
  right: 12px;
  width: 400px;
  height: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-repeat: no-repeat;
  background-size: 1600px 1600px;
  background-color: #f8f8f8;
}
.el-upload-dragger {
    
    
  height: 100%;
}
</style>

• 其中使用useMouseInElement来实时获取当前鼠标位置并返回坐标点positionX、positionY
• 对于位置映射如-positionY*(1066/711)+210，则可以点击原图Y开始结束位置打印当前坐标点计算距离，然后根据原图结束位置，在实际放大后显示的位置反找原图位置即可

欢迎关注公众号算法小生