uniapp,图片热区链接的实现问题汇总

前言

在最近开发uniapp小程序的时候，遇到了图片热区的问题，问度娘里面好多介绍的解决方案都不太完美。所以自己进行了一步步的解决

首先：我们现在看看如何获取coords坐标的问题，我这里用的是ps我们首先打开一个想要加热区链接的图片

然后选择如下图窗口-----信息

按照上面调整完毕后我们就可以看到在鼠标滑动的时候有xy的信息这个信息就是我们需要获取的点，这里需要说明的是仅仅以矩形rect为例，取值：rect（矩形）、circle（圆形）、polygon（多边形）如果需要别的形状请自行去修改代码即可

回到正题我们需要获取两个坐标（XY）也就是举行的左上角和右下角的坐标如下

这样我们就可以得到（107,102,299,189）这就是我们要获取的coords当然可以指定多个方式已经告诉大家了自行去扩展即可

有了坐标以后我们需要定义我们的函数和方法为了方便我们进行了封装
utils命名为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
}

然后我们在需要加载的页面利用

import { getHotArea } from "@/utils/requ.js"

废话不多说我们来看最终页面全部的代码

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

整体来说就是这么解决的，这样我们可以做更多的扩展例如多边形，原型，数据从后台调用等等根据自己的需求修改即可，唯一不好的地方就是坐标获取上不好把控，所以需要有一定的技术经验。

路虽远行则将至

新发现一个问题如果你的图片缩放了会影响准确度。目前没有解决