前端3D词云

最新推荐文章于 2024-04-19 23:16:02 发布

原创最新推荐文章于 2024-04-19 23:16:02 发布 · 1.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

安装TagCloud库

npm i TagCloud -S

初始化

    const container = '.tagcloud';
    const options = {
      useContainerInlineStyles: false,
      radius: 200,
      keep: true,
      // 词云动画速度模式 slow, normal, fast
      maxSpeed: 'normal',
      initSpeed: 'slow',
    };
    texts = ['txt1', 'txt2']
    tagCloud = TagCloud(container, texts, options);

修改文字颜色和大小

function RandomNumBoth(Min: number, Max: number) {
  var Range = Max - Min;
  var Rand = Math.random();
  var num = Min + Math.round(Rand * Range); //四舍五入
  return num;
}

const items: any = document.getElementsByClassName('tagcloud--item')
for (const item of items) {
  item.style.color = ['#20ACC4', '#E79C28'][RandomNumBoth(0, 1)]
  item.style.fontSize = ['12px', '16px', '20px', '28px'][RandomNumBoth(0, 1)]
}

给文字添加点击事件

    let rootEl: any = document.querySelector('.tagcloud');
    rootEl.addEventListener('click', function clickEventHandler(e: any) {
      if (e.target.className === `tagcloud--item ${style.tagcloud_item}`) {
        onChange?.({keyword: e.target.innerText})
      }
    });

当鼠标移上去时候暂停滚动，鼠标移除时候重新开始滚动

  rootEl.addEventListener('mouseover', function clickEventHandler(e: any) {
    if (e.target.className === `tagcloud--item ${style.tagcloud_item}`) {
      tagCloud.pause()
    }
  });
  rootEl.addEventListener('mouseout', function clickEventHandler(e: any) {
    if (e.target.className === `tagcloud--item ${style.tagcloud_item}`) {
      tagCloud.resume()
    }
  });