需求
* 点击图片展示弹窗
* 要找到各个部分的点位
业务逻辑
*把图片当作一整个坐标轴,在屏幕的这个相对位置不会因为屏幕大小而改变
*图片的点击的部分是不固定
*图片的被点击的部分是固定
*用一只四个点位或多个点位,求下一个点位是否在当前区域内
代码
<template>
<container-wrap-com ref="containerWrapComDom" class="ganz-card-defalt">
<img
ref="img"
id="imageId"
src="../../../../assets/images/fourColorChart.png"
alt=""
@click="handleClick"
/>
<Read ref="read"></Read>
</container-wrap-com>
</template>
//事先在
import {
//弹窗要展示的数据
car,
//图片各部分固定区域的点位致 这个得一个个点求的对应的值
carList,
//已知四个点位求,下一个点是否在此区域内
import { isPointInPolygon } from "./modules/utilofMap";
export default {
data() {
return {
count: 0,
};
},
methods: {
//获取点击事件的相对坐标
handleClick(event) {
const x2 = event.offsetX;
const y2 = event.offsetY; //这个坐标都是新的 x轴和Y轴
console.log(x2, y2);
if (this.isPointInPolygon(carList,{longitude:x2,latitude:y2})) {
this.$refs.read.open = true;
this.$refs.read.formData = car;
this.$refs.read.open = true;
}
},
};
</script>
已知四个点的区域求第五个点的位置是是否在此区域内
//首先定义了一个计数器
function isPointInPolygon(points, p) {
// 定义计数器 count,初始值为 0
let count = 0;
// 遍历每一条边,计算交点个数
for (let i = 0; i < points.length; i++) {
let p1 = points[i];
let p2 = points[(i + 1) % points.length];
// 判断点是否在该点与另一个点之间
if ((p1.latitude > p.latitude) !== (p2.latitude > p.latitude) &&
p.longitude < (p2.longitude - p1.longitude) * (p.latitude - p1.latitude) / (p2.latitude - p1.latitude) + p1.longitude) {
count++;
}
}
// 判断 count 的奇偶性,返回结果
return count % 2 === 1;
}