介绍
<李> ,, & lt; div id=& # 39;应用# 39;,在
,,,& lt; svg :宽度=& # 39;宽度# 39;,:身高=& # 39;高度# 39;,@mousemove=& # 39;侦听器(事件)& # 39;比;
,,,,,& lt; a https://www.yisu.com/zixun/: href=" tag.href rel=巴獠縩ofollow”v=氨昵┍昙恰?
赞
这篇文章将为大家详细讲解有关vue怎么实现标签云效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
最近想给自己的博客上加上一个3 d标签云的效果,用来表示自己博客文章的分组,网上找到了画布上实现的,还有一元素实现的解析3 d标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作一个标签导致性能问题,于是svg就成了一个不错的选择。
这里实现的核心主要是参考了前面的那篇解析3 d标签云的文章,作者给出了源码,讲解也比较通俗易懂。大体来说,整个代码分三步:
根据标签的数量,算出每个标签在球面上分布的x, y, z坐标
<李>根据标签的坐标,将标签绘制出来,x, y坐标通过标签的位置来表示,z坐标通过标签字体的大小和透明度来表示
<李>通过函数根据球的旋转<强>角速度强不断计算标签新的x, y坐标,制造出旋转效果
<李>通过mousemove事件,根据鼠标坐标值,改变球旋转的角速度,做出交互效果
贴上代码:
