需求

* 点击图片展示弹窗
* 要找到各个部分的点位

业务逻辑

*把图片当作一整个坐标轴,在屏幕的这个相对位置不会因为屏幕大小而改变
*图片的点击的部分是不固定
*图片的被点击的部分是固定
*用一只四个点位或多个点位,求下一个点位是否在当前区域内

代码

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

posted on 2023-03-25 13:57  awite  阅读(5)  评论(0编辑  收藏  举报  来源