官方文档传送门
版本信息
v2.11
以vue2为例
<template>
<div class="world-cloud-3d" ref="wordCloud">
<canvas
id="world-cloud-canvas"
width="470"
height="250"
style="width: 100%;"
>
</canvas>
<div style="display: none" id="weightTags"></div>
</div>
</template>
<script>
import "./tagcanvas.min.js";
export default {
data() {
return {
wordArr:[
{
name:'词云1',
color: '#ffffff',
is_bold: false
},
{
name:'词云1',
color: '#ffffff',
is_bold: true
},
{
name:'词云1',
color: '#ffffff',
is_bold: true
},
{
name:'词云1',
color: '#ffffff',
is_bold: true
},
{
name:'词云1',
color: '#ffffff',
is_bold: true
},
{
name:'词云1',
color: '#ffffff',
is_bold: true
},
{
name:'词云1',
color: '#ffffff',
is_bold: true
},
{
name:'词云1',
color: '#000000',
is_bold: true
},
]
};
},
async mounted() {
this.startWorldCloud();
},
methods:{
// 启动词云
startWorldCloud: function (updateFlag) {
this.createTagListDom();
let o = {
maxSpeed: 0.01, // 添加最大的运动速度
minSpeed: 0.01, // 添加最小的运动速度这样就可以保证一直运动，不会停止
textHeight: 25,
outlineMethod: "colour", // tag hover 之后的 轮廓效果
fadeIn: 800,
outlineColour: "#fff456aa", //hover颜色
outlineOffset: 0,
depth: 0.97,
minBrightness: 0.2,
wheelZoom: false,
reverse: true, // 运动方向与鼠标移动方向相反
shadowBlur: 2,
shuffleTags: true,
shadowOffset: [1, 1],
stretchX: 1.5, // Stretch or compress the cloud horizontally. 水平拉伸词云
initial: [0.1, 0.1], // 给词云添加一个初始的运动方向
textFont: null, // 字体设置为 null 就会继承 每个 tag的a 标签的字体
textColour: null, // 字体颜色设置为 null 就会继承 每个 tag的a 标签的字体颜色
weight: true, // weight 打开，就可以根据默认的字体的大小作为权重，对tag 的样式进行调整
weightMode: "size", // 样式调整的方式
weightSize: .5, // 调整 tag 字体的大小，加个 权重
};
try {
// 如果不是更新，说明是第一次渲染，就启动 tagcanvas, 否则就代表更新
if (!updateFlag) {
TagCanvas.Start("world-cloud-canvas", "weightTags", o);
} else {
TagCanvas.Update("world-cloud-canvas");
}
} catch (e) {}
},
// 根据wordArr 创建 TagList Dom列表，放到页面中供canvas 渲染
// 数据结构根据项目需求，要自定义颜色，文字大小直接设置a标签的style属性
createTagListDomDeath: function () {
let res = [...this.wordArr];
let fragment = new DocumentFragment();
for (let i = 0; i < res.length; i++) {
let a = document.createElement("a");
a.innerHTML = res[i].name;
a.href = "javascript:void(0)";
a.style.color = res[i].color || '#ffffff';
a.style.fontWeight = res[i].is_bold || '400';
a.style.fontSize = res[i].is_bold?'46px':'26px';
fragment.append(a);
}
// 更新 tagContainer中的 tag元素
let tagsContainer = document.querySelector("#weightTags");
tagsContainer.innerHTML = "";
tagsContainer.append(fragment);
}
}
</script>
文档翻译
internet Explorer 8 及以下版本不支持 canvas 元素.但是，由于 ExplorerCanvas Javascript 包含文件将画布功能转换为 IE 的 VML，上面的标签云应该可以在 IE 中运行。它有点慢，但确实有效。
- image
TagCanvas 1.3 是第一个支持图像链接的版本——将使用链接内找到的第一张图像，而不是任何文本。大概意思就是可以使用图片来渲染词云
- Tag weighting
从 1.6 版本开始，TagCanvas 支持标签的权重。
- 配置项（谷歌翻译得来部分配置项未实际调用仅供参考）持续更新中
| 配置项 | 默认值 | 说明 |
|---|---|---|
| activeAudio | "" | 鼠标进入标签时播放的音频文件，留空表示没有音频.要为各个标签使用不同的音频文件，请添加音频元素到对应的a标签中 |
| activeCursor | "pointer" | 鼠标悬停在标签上时使用的 CSS 光标类型 |
| altImage | false | 设置为 true 以在标签处于活动状态时交换到 元素中的第二张图像 |
| animTiming | "Smooth" | 与 RotateTag 和 TagToFront 函数一起使用的动画,可选值 "Smooth" and "Linear". |
| audioIcon | true | 设置为 false 以在音频可用时隐藏静音图标 |
| audioIconDark | false | 设置为 true 以使用白底黑字而不是黑底白字绘制静音图标 |
| audioIconSize | 20 | 静音图标的大小（以px为单位） |
| audioIconThickness | 2 | 静音图标线的粗细（以px为单位） |
| audioVolume | 1.0 | 音频音量，介于 0.0 和 2.0 之间 |
| bgColour | null | 标签的背景颜色，null 表示没有背景。字符串“tag”表示使用原始链接背景色 |
| bgOutline | null | 标记背景轮廓的颜色。使用 null 与文本颜色相同，使用“标签”作为原始链接文本颜色 |
| bgOutlineThickness | 0 | 标记背景轮廓的厚度（以px为单位），0 表示没有轮廓 |
| bgRadius | 0 | 背景圆角半径（以px为单位） |
| centreFunc | null | 在云中心绘图的功能。该函数按顺序传入这些参数：canvas 2D context；画布宽度；画布高度；中心 X; center Y，详见center回调函数 |
