前端如何实现不规则图形+热点区域

Question

类似于这样的效果，每个单独的小区域是可以点击的(类似于 html map那样)，是不是用图表组件来实现的呢？

我在群里看到有人说是用sketch画的，然后导出svg代码

Answer 1

1、打开 DW（如果不知道这个是什么，那就百度一下）；
2、新建一个页面；
3、插入一张图片；
4、选中图片；
5、点击属性面板；
6、找到图片热点；
7、开始绘制热区；
8、填写热区的 URL；
9、重复第七步操作，随时保存，直到完成；
10、结束……

Answer 2

这个基本就是地图，那就涉及到地图制图，其实就是绘制矢量图。做成svg，数据转换下，引入highmaps里面就能进行你要的操作了

Answer 3

你可以自己使用canvas或svg绘制容易形状的区域，然后再添加点击事件即可，怕麻烦的话可以借助这个库：https://yelloxing.github.io/i...