Cuando dibujamos la línea, es posible que las posiciones inicial y final no se seleccionen correctamente, lo que genera desviaciones en los resultados de la medición, por lo que se agrega la nueva función de zoom, como se muestra a continuación.
Código fuente 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 ellos, use useMouseInElement para obtener la posición actual del mouse en tiempo real y devolver los puntos de coordenadas positionX, positionY
- Para el mapeo de posición como -posición Y*(1066/711)+210, puede hacer clic en la posición inicial y final de la imagen original Y para imprimir el punto de coordenadas actual para calcular la distancia, y luego de acuerdo con la posición final del original imagen, encuentre la posición de la imagen original después de que la posición real ampliada pueda
Bienvenido a prestar atención al nicho de algoritmo de cuenta oficial