tagcanvas3d词云: 数据大屏中使用echarts-wordcloud等插件生成的词云都是静态的，使用tagcanvas3d可以生成3d动态旋转的词云，效果炫酷

# tagcanvas

使用tagcanvas使用3d动态词云

## 官方文档传送门

[tagcanvas官网](https://www.goat1000.com/tagcanvas.php)

## 资源说明

- jquery.tagcanvas.min适用于jquery

- tagcanvas.min适用于vue

## 版本信息

v2.11

## 以vue2为例

```vue
<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 以在标签处于活动状态时交换到 <a> 元素中的第二张图像 |
| 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回调函数 |

##附录

- center回调函数

骑着小马去泡妞/tagcanvas3d词云

简介

发行版

贡献者

近期动态

骑着小马去泡妞/tagcanvas3d词云 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

骑着小马去泡妞/tagcanvas3d词云