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

_ThinkPad
  • 206

图片描述

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

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

回复
阅读 7.4k
3 个回答

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

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

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

宣传栏