2分钟教你快速绘制热力图
利用这个工具，可以快速的绘制热力图，甚至是热力图动画
大家好，我是灰色执照。
最近有群友问我，有没有什么比较好绘制热力图的工具。
经过一番折腾后，我们居然发现：并没有找到比较适合UI设计师使用的称手的工具。
因为我自己也有绘制热力图的需求，所以我直接做了一款绘制热力图的工具
废话不多说，直接上才艺，上干货！
我们先来看看都有些什么功能吧。
01 上传背景图功能
通常绘制之前需要上传一个背景图，多数时候是一个地图的底图。
▲ 你在底图上绘制，才知道具体要画在什么地方。深色背景的地图你可以使用高德开放平台去自己定义修改颜色
02 画笔功能
点击鼠标可以绘制热力图的点。也可以按住左键在画面上涂抹。
▲ 除了简单的涂抹绘制，你还可以点击画笔右侧小箭头，调整的大小和绘制的力度
03 抓手功能
画板比较大的时候，你可能看不全，使用抓手可以移动画板。
▲ 类似PS中按住了空格键，拖动画板。其实就是借（chao）鉴(xi)了PS里面的抓手功能。
04 橡皮擦
通过点击鼠标，可以让热力值变小。
▲ 做动画的时候很需要橡皮擦功能，有的地方的值会变大，但是有的地方会变小。
05 模糊功能
调整热力图渐变周边的模糊值。
▲ 通过调整，可以让热力图看起来更虚一点儿
06 随机功能
可以调整随机多少个点
▲ 点击随机图标右侧的小箭头，可以让设置随机的数量。画板大则要求数量大一点，热力图的点多一些则更好看
07 回退功能
画错的时候可以返回上一步。
▲ 画错了，或者不小心清空了画板不用担心，咱们有历史记录功能，可以回退。
08 清空画板功能
将画板上你绘制的全部都删掉。
▲ 折腾半天不满意，咱们直接一键清空。重新再来~
09 侧边栏属性
打开侧边栏，你可以调整画板的宽度和高度。
▲ 画到一半，发现画板设置得太小了，不够用。打开右侧属性面板，可以随时修改宽高
鼠标移动到画板上，你也可以看到对应的热力值。
▲ 画面上每个点都对应一个热力值，方便你及时查看
10 热力图颜色修改功能
点击后你可以调整热力图的颜色。
▲ 调整颜色，可以制作出各种个性化的热力图
11 添加动画关键帧
点击后，当前页面加入动画关键帧
▲ 制作逐帧动画少不了这个功能
12 播放动画
设置多个关键帧后，你可以设置每帧之间播放速度，设置好后就可以播放动画了。
热力图制作好以后，对着界面 右键 就可以 另存图片 了。
存储的都是透明背景的png图片。
你下载图片后可以自行加工，做成gif动图或者叠加到你要设计的界面上即可。
温馨提醒：经过测试safari浏览器似乎没有右键保存功能，请下载chrome浏览器试试。
以上就是热力图的所有功能了。
灰大热力图生成器 的入口就在「灰大导航」的左上角了。
入口链接：
https://www.pslkzs.com/nav.php
希望你会喜欢我开发的这个小工具，谢谢大家~
Powered by Froala Editor