Com base no Vue3+LeaderLine, a ampliação do ponto correspondente e a função de seleção precisa do ponto podem ser realizadas ao desenhar uma linha

Quando traçamos uma linha, a seleção das posições inicial e final pode ser imprecisa, resultando em desvios nos resultados da medição, por isso é adicionada a nova função de zoom, conforme mostrado abaixo

Código-fonte principal:

<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>

• Entre eles, use UseMouseInElement para obter a posição atual do mouse em tempo real e retornar os pontos de coordenadas positionX, positionY
• Para mapeamento de posição, como -positionY*(1066/711)+210, você pode clicar na posição inicial e final da imagem original Y para imprimir o ponto de coordenada atual para calcular a distância e, em seguida, de acordo com a posição final do original imagem, encontre a posição da imagem original após a posição real ampliada pode

Bem-vindo a prestar atenção ao nicho oficial do algoritmo da conta