javascript - uniapp小程序 图片热区怎么写？

Question

有坐标有图片但是图片缩放后就跑偏了

<template >
    <view >
        <view v-for="(item,index) in hot_list">
          <image :data-index="index" :src="item.img" @load="hotBindload"  @click="hotBindtap"></image>
        </view>
    </view>
</template>
 
<script>
    import {
        getHotArea
        } from "@/utils/requ.js"
export default {
    data() {
        return {
            
                hot_list: [{
                    id: 1,
                    img: "图片地址",
                    type: "usemap",
                    area: [{
                        shape: "rect",
                        coords: "100,85,220,190",
                        type: "path",
                        path: "/pages/xxxx"
                      },
                      {
                        shape: "rect",
                        coords: "470,95,645,220",
                        type: "path",
                        path: "/pages/xxxx"
                      },
                      {
                        shape: "rect",
                        coords: "58,380,240,510",
                        type: "path",
                        path: "/pages/xxxx"
                      },
                      {
                        shape: "rect",
                        coords: "485,396,645,515",
                        type: "path",
                        path: "/pages/xxxx"
                      },
                    ],
                    ratio: 0
                  },
                  {
                    id: 3,
                    img: "图片地址",
                    type: "path",
                    path: "/pages/xxxx",
                    ratio: 0
                  }
                ]

        };
    },
    onLoad(){},
    
    methods: {
          hotBindload(e) {
            var _this = this;
            console.log(e,"图片信息")
            let windowWidth = uni.getSystemInfoSync().windowWidth;
            let imgWidth = e.detail.width;
            let ratio = windowWidth / imgWidth;
            _this.hot_list[e.target.dataset.index].ratio = ratio
          },
          
          hotBindtap(e) {
            var _this = this;
            console.log(e,"点击后的数据")
            let hot_area = _this.hot_list[e.target.dataset.index]
            if (hot_area.type == "usemap") {
              let area = getHotArea(e.detail, hot_area.area, hot_area.ratio)
              if (area) {
            console.log(area.path,"跳转地址")
                uni.redirectTo({
                  url: area.path
                })
              }
            } else if (hot_area.type == "path") {
              console.log(hot_area)
              uni.redirectTo({
                url: hot_area.path
              })
            }
          }

        
    }
};
</script>
 
<style>
</style>

requ.js

function getHotArea(point, area, ratio){
    console.log(point,"坐标参数")
    console.log(area,"坐标数据")
    console.log(ratio,"缩放比")
  for (var i = 0; i < area.length; i++) {
    var coords = area[i].coords.split(",");
    var x1 = parseInt(coords[0] * ratio)
    var y1 = parseInt(coords[1] * ratio)
    var x2 = parseInt(coords[2] * ratio)
    var y2 = parseInt(coords[3] * ratio)

    if (point.x >= x1 && point.x <= x2 && point.y >= y1 && point.y <= y2) {
      return area[i]
    }
  }
}

module.exports = {
  getHotArea: getHotArea
}

Answer 1

应该是坐标转换问题

Answer 2

要解决图片缩放后热区位置跑偏的问题，你需要在图片加载后根据图片的实际宽度和显示容器的宽度计算出缩放比例，并应用这个比例来调整热区的坐标。你的代码中已经包含了这一逻辑，但需要注意的是，这个逻辑需要在图片完全加载后才能正确执行。

在你的代码中，你已经通过监听图片的 @load 事件来获取图片的宽度，并计算了缩放比例 ratio。接下来，你需要确保在点击事件中使用这个 ratio 来调整热区的坐标。从你给出的 getHotArea 函数来看，这部分逻辑是正确的。

然而，这里还有一些潜在的改进点和需要注意的地方：

1. 确保图片加载完成：你的代码已经处理了图片加载完成的情况，但请确保所有相关的逻辑（如设置热区坐标）都在图片加载完成后执行。
2. 热区坐标的更新：在你的代码中，ratio 是直接存储在 hot_list 数组的每个元素中的。这是可行的，但请确保在图片尺寸变化（如设备旋转）时重新计算这些比例。
3. 性能考虑：如果图片和热区很多，每次点击都重新计算热区可能会导致性能问题。你可以考虑在图片加载时就计算好所有热区的调整后的坐标，并存储在某个数据结构中，以便快速查找。
4. 错误处理：在实际应用中，应该添加错误处理逻辑，以处理图片加载失败、缩放比例计算错误等情况。
5. 样式和布局：确保图片的样式和布局（如宽度、高度、边距等）在图片加载后不会发生变化，这可能会影响到热区的位置。
6. 代码优化：你的 getHotArea 函数中，coords 的解析和计算可以封装成更小的函数，以提高代码的可读性和可维护性。

综上所述，你的代码在逻辑上是正确的，但可能需要根据实际情况进行一些调整和优化。如果你发现热区仍然跑偏，请检查是否有其他因素（如样式、布局、设备尺寸等）影响了热区的位置。