自己实现的一个标签云。

预览

原理

1. 首先肯定是利用canvas得到标签的像素排列。
2. 然后看标签的像素是否不和已经渲染的像素重叠。
3. 否则便换一个位置重试是否重叠，直到找到不会重叠的位置。

实现

1. 首先要确定一个合适的数据结构来存储像素，因为ImageData包含了rgba4个长度的数据，而且数量有可能十分庞大，所以可以将rgba四位数据合成一位有效数据。并且考虑使用位操作来提高性能。
   • 考虑使用位操作来提高性能，所以采用数字二维数组的数据结构来取代ImageData。每个数字代表32个基本像素的数据。然后二维数组代表xy两个维度。
   • 由于实现的精度不一定要为1px，并且精度太高十分损耗性能，所以设置一个分辨率参数pixelRatio。它表示一个基本像素代表长宽为pixelsRatio的原生像素中是否有至少一个被渲染过的像素。
2. 将整个画布的ImageData遍历，得到基本像素的二维数组。
3. 将tag文字携带着旋转以及大小属性渲染在canvas，获取到tag文字对应的基本像素的二维数组。
4. 从整个画布中心开始找一个点，然后用&运算对比当前tag的基本像素和画布的基本像素是否有重叠。
   • 如果没有重叠便存下当前坐标，供后面渲染在该坐标渲染tag。
   • 如果重叠便以螺旋（就近）的顺序找下一个坐标直到找到位置或者遍历整个画布都没找到合适的位置。
5. 收集完所有tag的坐标，便可以在canvas上渲染或者使用dom来展示排列好位置的tag。
6. 源码