tagCanvas实现词云图

  • TagCanvas是一个基于HTML5
    Canvas技术开发的标签云动画。

  • 还提供一个以jQuery插件形式实现的版本。tagCanvas可以引入到vue项目中,也可以引入html页面中使用。

  • 它支持文本和图片两种格式,能够以Sphere, hcylinder 或 vcylinder三种形状显示

  • 官方链接:https://www.goat1000.com/tagcanvas-weighted.php

以下是html页面的用法,文档中提及需要jquery文件,如果没有请自行下载并在项目中引入。
官网提供两个类型的插件版本:

  1. 项目已经有jquery,直接引入的版本;
  2. 项目无jquery,引入带jquery配置的版本。

方式1: 原生js创建创建及实现


DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-1.12.4.js">script>
    <script src="./js/tagcanvas.min.js" type="text/javascript">script>
    <script type="text/javascript">
      window.onload = function () {
        try {
          TagCanvas.Start("myTag", "tags", {
            textColour: "#63cdff",
            outlineColour: "#63cdff",
            reverse: true,
            textHeight: 16,
            shape: "sphere",
            depth: 0.8,
            decel: 0.99,
            padding: 0,
            wheelZoom: true,
            dragControl: false,
            fadeIn: 0,
            freezeActive: false,
            outlineMethod: "outline",
            outlineOffset: "5",
            outlineRadius: "0",
            outlineThickness: "2",
            maxSpeed: 0.05,
            initial: [0.1, -0.2], // 配置旋转速度
          });
        } catch (e) {
          // something went wrong, hide the canvas container
          document.getElementById("myCanvasContainer").style.display = "none";
        }
      };
    script>
    <title>Documenttitle>
  head>
  <body>
    <div id="myCanvasContainer">
      <canvas width="600" height="350" id="myTag">
        <p>
          Anything in here will be replaced on browsers that support the canvas
          element
        p>
      canvas>
    div>
    <div id="tags">
      <ul>
        <li><a href="#" style="font-size: 30px">认证考试a>li>
        <li><a href="#">UMTS OMSTAR a>li>
        <li><a href="#">客户经理角色认知a>li>
        <li><a href="#">PM角色a>li>
        <li><a href="#">维修a>li>
        <li><a href="#">信息安全a>li>
        <li><a href="#">UMTS OMSTAR a>li>
        <li><a href="#">客户经理角色认知a>li>
        <li><a href="#">PM角色a>li>
        <li><a href="#">维修a>li>
      ul>
    div>
  body>
html>

方式2: JQuery方式创建及实现


DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="jquery-1.12.4.js">script>
    <script src="./js/jquery.tagcanvas.min.js" type="text/javascript">script>
    <script type="text/javascript">
      $(function () {
        $(document).ready(function () {
          update();
        });
      });
      function update() {
        if (
          !$("#myCanvas").tagcanvas({
            textColour: "#000",
            outlineColour: "#ff00ff",
            outlineThickness: 1,
            maxSpeed: 0.02,
            minSpeed: 0.01,
            depth: 0.75,
            initial: [0.8, -0.2],
            freezeActive: true,
          })
        ) {
          $("#myCanvasContainer").hide();
        }
      }
    script>
    <title>Documenttitle>
  head>
  <body>
    <div id="myCanvasContainer">
      <canvas width="300" height="300" id="myCanvas">
        <p>
          Anything in here will be replaced on browsers that support the canvas
          element
        p>
        <ul>
          <li><a href="http://www.google.com" target="_blank">Googlea>li>
          <li><a href="/fish">Fisha>li>
          <li><a href="/chips">Chipsa>li>
          <li><a href="/salt">Salta>li>
          <li><a href="/vinegar">Vinegara>li>
        ul>
      canvas>
    div>
  body>
html>

其他

<canvas id="canvas" style="background: #000000;"></canvas>
<div id="tags" style="display: none;">
<a href="#">helloWord</a><!-- 插入文字的用法 -->
<a href="#">
<img src="xxx"/><!-- 插入图片的用法 -->
</a>
</div>

参数说明:

var options={
                //dragControl:false,//鼠标控制,true则鼠标点击可以拖动,不点击没效果,false则根据鼠标位置旋转
               //initial:[-0.2, 0],//初始旋转,水平和垂直为数组,这个是鼠标未进行操控时的旋转
               //freezeActive  :true,//设置为true以在突出显示标记时暂停移动。这个必须是在dragControl:false才有效
               //maxSpeed: 0.05,//最大旋转速度,设置小一点,转的慢一点
               //decel: 0.95,//鼠标离开画布时的减速率,设置0,鼠标离开就停止,设置1,鼠标离开还一直转
               //frontSelect:true,//设置为true以防止在云后面选择标记。
               //minSpeed:0.0,//鼠标离开画布时的最小旋转速度
               //interval:20,//动画帧之间的间隔,以毫秒为单位,这个东西设置大了速度会变快,但是会卡,基本20是最好的
               //minBrightness:0.1,//最远点的标签亮度(0.0-1.0)
               //textColour: '#fff',//标记文本的颜色,文字颜色和大小是没法用style控制的,得在这里写
               //textHeight:15,//标记文本字体的大小(以像素为单位)
               //depth:1,//控制透视图(0.0-1.0),you can try 一 try,1以内好像都没啥用,建议试试2和3
               //txtOpt:true,//文本优化,将文本标签转换为图像以获得更好的性能。
               //reverse:true,//设置为true以反转相对于鼠标位置的移动方向。这个还是true好呀,false鼠标都追不上标签
               //wheelZoom:false,//使用鼠标滚轮或滚动手势可以放大和缩小云。
               //shape:'Sphere',//目前支持的是Sphere,hcylinder 或vcylinder 三种形状显示,分别是圆形,立着的卷发棒,躺着的卷发棒
               //lock : 'x',//'x'只能竖着转,'y'只能横着转,但是我设置了'x'没用,只有'y'有用
               //outlineMethod: 'size',//鼠标指到的元素变化类型, /outline:显示边框线(有深度),classic:显示边框线,block:改变背景颜色为边框线颜色,colour:改变颜色,颜色属性为outlineColour:'#fff',size:改变文本大小,大小属性为outlineIncrease:20,none:不突出显示
               //activeCursor:'pointer',    //鼠标悬停在标签上时要使用的CSS光标类型,可选值auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ,太多了大家自行尝试吧
               //animTiming:'Smooth'    ,//与RotateTag和TagToFront函数一起使用的动画定时功能。可用的值为'Smooth' 和'Linear'.
               //bgColour:'tag',//标签的背景颜色,tag是标签本身的背景颜色(即加在tags的标签中的颜色)
               //bgOutline:'tag',//标签轮廓的背景颜色,tag是标签本身的背景颜色(即加在tags的标签中的颜色)
               //outlineColour:'#fff',//活动标签周围的框的颜色,可选值tag:标签的颜色,tagbg:标签的背景颜色
               //outlineThickness:2,//轮廓的粗细(以像素为单位)
               //outlineOffset:5,//轮廓与文本的距离,以像素为单位
               //bgRadius:5,//背景圆角的半径(以像素为单位)。
               //centreFunc:function (){},//中心绘图函数,具体参考: https://www.goat1000.com/tagcanvas-centre.php
               //centreImage:null,//在云的中心绘制的图像。使用内置的centreFunc回调函数在画布中间以全尺寸绘制图像。
               //clickToFront:0,//如果设置为数字,则选中的标签将在激活之前的这么多毫秒内移到最前面。
               //dragThreshold:4,//光标拖动这么多像素云才会移动
               //fadeIn:1000,//标签淡入的时间
               //freezeDecel:false,//设置为true时freezeActive变成减速而不是暂停
               //imageAlign:'centre',//水平图像对齐,可选值centre,left,right。
               //imageMode:null,//可选值null:有图片则图片,没图片则文本,image:仅显示图片,text:仅显示文本,both:文本和图像都使用该位置
               //imagePadding:2,//使用imageMode“ both”时图像和文本之间的距离。
               //imagePosition:'left',//当使用imageMode“ both”时,图像相对于文本的位置。可选值centre,left,right。
               //imageRadius:0,//图像角的半径,以像素为单位。还支持使用必须包含在字符串中的百分比,例如'20%'。
               //imageScale:1,//缩放图像的数量-默认值1使用图像在页面上显示的尺寸。如果不缩放(使用实际图像尺寸),请将其设置为null。
               //imageVAlign:'middle',//垂直图像对齐方式,可选值middle,top,bottom
               //maxBrightness:1.0,//云前端标签的亮度(不透明度)(0.0-1.0)。
               //minTags:200,//最少标记数,如果少于这个就会重复tags的内容
               //noMouse:false    ,//设置为true防止任何鼠标交互。该initial选项必须用于为云设置动画,否则它将一动不动。
               //noSelect:false,//    设置为true防止选择标签。
               //noTagsMessage:true,//当没有可用标签时,显示“无标签”而不是空白画布。
               //offsetX:0,//水平偏移云的中心(以像素为单位)
               //offsetY:0,//垂直偏移云的中心(以像素为单位)    当没有可用标签时,显示“无标签”而不是空白画布。
               //padding:0,//文本周围和背景内部的空间量。
               //pinchZoom:false,//设置为true通过捏合触摸屏设备来启用放大和缩小云。
               //outlineRadius:5,//轮廓框上的圆角半径(以像素为单位)
               //padding:0,//文本周围和背景内部的空间量。
               //pinchZoom:false,//设置为true通过捏合触摸屏设备来启用放大和缩小云。
               //repeatTags:0,//在云中重复标签列表的次数。支持的最大值为64。此选项将覆盖该minTags选项。
               //radiusX:1,//云整体倾斜的角度和方向
               //radiusY:1,//云整体倾斜的角度和方向
               //radiusZ:1,//云整体倾斜的角度和方向
               //scrollPause:0,//滚动页面时的动画延迟(以毫秒为单位)。适用于页面上的所有TagCanvas实例。
               //shuffleTags:false,//设置为true随机化标签的顺序。
               //splitWidth:0,//如果大于0,则当该行长于该值时,将标签在单词边界处分成多行。行在
标签处自动断开。
//stretchX:1,//水平拉伸或压缩云。 //stretchY:1,//垂直拉伸或压缩云。 //textAlign:'centre',//水平对齐文本,可选值centre,left,right。 //textVAlign:'middle',//垂直对齐文本,可选值middle,top,bottom //这后面的我基本都没用了,大家自行尝试哈 // textFont :'Helvetica, Arial, sans-serif',//标签文本的字体系列 // pulsateTo:1.0,//脉动轮廓不透明度(0.0 - 1.0),这两个东西没搞懂,设置后也没啥变化 // pulsateTime:300,//脉搏率,以每秒的秒数为单位 // txtScale:2,//在txtOpt模式下转换为图像时文本的缩放系数。 // hideTags :false,//如果TagCanvas成功启动,则设置为true以自动隐藏标记列表元素。 // zoom:1,//调整画布中标签云的相对大小。较大的值将放大到云,较小的值将缩小。跟depth差不多,不过这个看起来舒服点 // zoomStep:0.05,//每次移动鼠标滚轮时缩放变焦量。 // zoomMax:3,//最大缩放值。 // zoomMin:0.3,//最小缩放值。 // shadow: '#fff',//每个标签后面阴影的颜色。 // shadowBlur:100,//标记阴影模糊量,以像素为单位。 // shadowOffset: [5,0],//标记阴影的X和Y偏移量,以像素为单位。 // weight:false,//设置为true以打开标签的权重。 // weightMode: 'size',//用于显示标记权重的方法。应该是尺寸,颜色或两者之一。 // weightSize:1,//用于在使用大小或两者的重量模式时调整标签大小的乘数。 // weightGradient:{0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'},//使用颜色权重模式或两者时,用于着色标签的颜色渐变。 // weightFrom:null,//用于获取标记权重的link属性。默认值为null表示权重取自计算出的链接字体大小。 // outlineDash:0,//行进蚂蚁的大小用于轮廓/经典高光,0表示无破折号 // outlineDashSpace:0,//行进的破折号之间的距离大小,0等于 outlineDash // outlineDashSpeed:1,//行进蚂蚁动画的速度,0表示不移动,负号表示反向 //tooltip[3]:null,//设置工具提示显示方法:null无工具提示;native用于操作系统工具提示;div基于div的。 //tooltipClass[3]:'tctooltip',//工具提示div的类别。 //tooltipDelay[3]:300,//在显示工具提示div之前鼠标不移动时暂停的时间(以毫秒为单位)。 }

其他

tooltip提示:
http://t.csdn.cn/4NMBZ

https://blog.csdn.net/jinxi1112/article/details/101285998

你可能感兴趣的:(前端)