小程序热图替代方法clip-path替map

 问题

ps：在小程序开发的时候遇到的小困难，需求类似拼图游戏一样，用不规则的图片拼成一幅完成的图片。在各种事件完成后，出现了一个问题，在拖拽拼图的时候

 绿色就是整个图片的大小。ps（不是正方形的图片 png，但在用的时候他的大小是红色的区域），绿色就是拼图的大小在小程序显示的时候红色区域是看不见的。绿色的才是可见的），这就会出现一点问题在拖拽的时候虽然看不到红色的区域但是能够拖拽，就导致用户触摸到红色区域就能触发事件，（在用户看来红色是不可见）

 解决方法

我第一想到的是用热图map来解决。给照片的绿色区域加个热区，经过一番研究发现一个问题，微信小程序的map地图和map冲突。

于是便发现了CSS clip-path，（这个真的很方便）说一下clip-path  ：clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状 。

我们只需要在每个拼图上面放一个裁剪的盒子再用 z-index 提高一下层级，把盒子设置成透明。就OK了。提醒一下为了适配不要用px等单位 要用 %最好

 这些拐点数据可以用 Dreamweaver      图片少的话可以用PhotoShop来整 。拿钢笔工具抠下来

 还有可以用svg图我感觉会更快一点（将文件保存为svg, 可以看到相应的 path 代码） 基本上就这么弄完了