tagCould3d 移动端优化版

最新推荐文章于 2024-11-13 17:27:29 发布
最新推荐文章于 2024-11-13 17:27:29 发布
阅读量174 收藏
点赞数
文章标签： js javascript vue tiff dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1048956673/article/details/108678511
版权 
针对https://github.com/bitjjj/JS-3D-TagCloud这个版本的做了移动端性能优化(使用transform做偏移及缩放，优化帧)。基本原理一致。
class  TagCould {
     mcList = [];
     active =  false;  // 事件控制
     lasta =  1;
     lastb =  1;
     distr =  true;
     mouseX =  0;
     mouseY =  0;
     aA =  null;
     oDiv =  null;
     _now =  0;
     _then =  Date. now();
     _delta =  0;
     isStart =  false;
     defaultOptions = {
         dtr :  Math. PI /  180,
         d :  500,
         tspeed :  5,
         size :  250,
         howElliptical :  1,
         fps :  30,
         radius : ( window. innerWidth +  25) /  2 >  300 ?  300 : ( window. innerWidth +  25) /  2
    };
     constructor( container,  tags = [],  options = {}) {
         this. container =  container;
         this. tags =  tags;
         options =  Object. assign( this. defaultOptions,  options);
         for ( var  p  in  options) {
             this[ p] =  options[ p];
        }
         this. _interval =  1000 /  this. fps;
         window. requestAnimationFrame =
             window. requestAnimationFrame ||
             window. mozRequestAnimationFrame ||
             window. webkitRequestAnimationFrame ||
             window. msRequestAnimationFrame;
         this. init();
    }
     init() {
         this. createTag();
         this. setOffset();
         this. sineCosine( 0,  0,  0);
         this. positionAll();
         this. tick();
         this. bindEvent();
    }
     start() {
         this. isStart =  true;
    }
     pause() {
         this. isStart =  false;
    }
     createTag() {
         this. oDiv =  typeof  this. container ==  'string' ?  document. getElementById( this. container) :  this. container;
         for ( let  i =  0;  i <  this. tags. length;  i++) {
             const  item =  this. tags[ i];
             let  aElE =  document. createElement( 'a');
             aElE. innerHTML =  item. text;
             aElE. classList. add( `tag ${ i } `);
             aElE. classList. add( `tag`);
             item. className &&  aElE. classList. add( item. className);
             aElE. setAttribute( 'href',  item. url ||  'javascript:;');
             this. oDiv. appendChild( aElE);
        }
    }
     setOffset() {
         this. oDiv =  typeof  this. container ==  'string' ?  document. getElementById( this. container) :  this. container;
         let  i =  0,
             oTag =  null;
         this. aA =  this. oDiv. getElementsByTagName( 'a');
         for ( i =  0;  i <  this. aA. length;  i++) {
             oTag = {};
             oTag. offsetWidth =  this. aA[ i]. offsetWidth;
             oTag. offsetHeight =  this. aA[ i]. offsetHeight;
             this. mcList. push( oTag);
        }
    }
     bindEvent() {
         let  self =  this;
         document. addEventListener(
             'mouseover',
             function() {
                 self. active =  true;
            },
             false
        );
         document. addEventListener(
             'mouseout',
             function() {
                 self. active =  false;
            },
             false
        );
         document. addEventListener(
             'mousemove',
             function( evt) {
                 //var oEvent=window.event || evt;
                 self. onmove( window. event ||  evt);
            },
             false
        );
         document. addEventListener(
             'touchstart',
             function() {
                 self. active =  true;
            },
             false
        );
         document. addEventListener(
             'touchmove',
             function( evt) {
                 self. onmove( window. event ||  evt);
            },
             false
        );
         document. addEventListener(
             'touchend',
             function() {
                 self. active =  false;
            },
             false
        );
    }
     tick() {
         if ( window. requestAnimationFrame) {
             window. requestAnimationFrame( this. tick. bind( this));
             this. _now =  Date. now();
             this. _delta =  this. _now -  this. _then;
             if ( this. _delta >  this. _interval) {
                 // 这里不能简单then=now，否则还会出现上边简单做法的细微时间差问题。例如fps=10，每帧100ms，而现在每16ms(60fps)执行一次draw。16*7=112>100，需要7次才实际绘制一次。这个情况下，实际10帧需要112*10=1120ms>1000ms才绘制完成。
                 this. _then =  this. _now -  this. _delta %  this. _interval;
                 this. update();  // ... Code for Drawing the Frame ...
            }
        }  else {
             setTimeout( this. _tick,  this. _interval);
             this. update();
        }
    }
     onmove( oEvent) {
         oEvent. preventDefault();
         if ( oEvent. touches &&  oEvent. touches. length >  0) {
             oEvent. clientX =  oEvent. touches[ 0]. clientX;
             oEvent. clientY =  oEvent. touches[ 0]. clientY;
        }
         this. mouseX =  oEvent. clientX - ( this. oDiv. offsetLeft +  this. oDiv. offsetWidth /  2);
         this. mouseY =  oEvent. clientY - ( this. oDiv. offsetTop +  this. oDiv. offsetHeight /  2);
         this. mouseX /=  5;
         this. mouseY /=  5;
    }
     update() {
         if (! this. isStart) {
             return  false;
        }
         var  a,  b;
         if ( this. active) {
             a = - Math. min( Math. max(- this. mouseY, - this. size),  this. size) /  this. radius *  this. tspeed;
             b =  Math. min( Math. max(- this. mouseX, - this. size),  this. size) /  this. radius *  this. tspeed;
        }  else {
             a =  this. lasta *  0.999;
             b =  this. lastb *  0.999;
        }
         this. lasta =  a;
         this. lastb =  b;
         if ( Math. abs( a) <=  0.01 &&  Math. abs( b) <=  0.01) {
             return;
        }
         var  c =  0;
         this. sineCosine( a,  b,  c);
         for ( var  j =  0;  j <  this. mcList. length;  j++) {
             var  rx1 =  this. mcList[ j]. cx,
                 ry1 =  this. mcList[ j]. cy *  this. ca +  this. mcList[ j]. cz * - this. sa,
                 rz1 =  this. mcList[ j]. cy *  this. sa +  this. mcList[ j]. cz *  this. ca,
                 rx2 =  rx1 *  this. cb +  rz1 *  this. sb,
                 ry2 =  ry1,
                 rz2 =  rx1 * - this. sb +  rz1 *  this. cb,
                 rx3 =  rx2 *  this. cc +  ry2 * - this. sc,
                 ry3 =  rx2 *  this. sc +  ry2 *  this. cc,
                 rz3 =  rz2;
             this. mcList[ j]. cx =  rx3;
             this. mcList[ j]. cy =  ry3;
             this. mcList[ j]. cz =  rz3;
             var  per =  this. d / ( this. d +  rz3);
             this. mcList[ j]. x =  this. howElliptical *  rx3 *  per -  this. howElliptical *  2;
             this. mcList[ j]. y =  ry3 *  per;
             this. mcList[ j]. scale =  per;
             this. mcList[ j]. alpha =  per;
             this. mcList[ j]. alpha = ( this. mcList[ j]. alpha -  0.6) * ( 10 /  6);
        }
         this. doPosition();
         this. depthSort();
    }
     depthSort() {
         var  i =  0,
             aTmp = [];
         for ( i =  0;  i <  this. aA. length;  i++) {
             aTmp. push( this. aA[ i]);
        }
         aTmp. sort( function( vItem1,  vItem2) {
             if ( vItem1. cz >  vItem2. cz) {
                 return - 1;
            }  else  if ( vItem1. cz <  vItem2. cz) {
                 return  1;
            }  else {
                 return  0;
            }
        });
         for ( i =  0;  i <  aTmp. length;  i++) {
             aTmp[ i]. style. zIndex =  i;
        }
    }
     positionAll() {
         var  phi =  0,
             theta =  0,
             max =  this. mcList. length,
             i =  0,
             aTmp = [],
             oFragment =  document. createDocumentFragment();
         //随机排序
         for ( i =  0;  i <  this. aA. length;  i++) {
             aTmp. push( this. aA[ i]);
        }
         aTmp. sort( function() {
             return  Math. random() <  0.5 ?  1 : - 1;
        });
         for ( i =  0;  i <  aTmp. length;  i++) {
             oFragment. appendChild( aTmp[ i]);
        }
         this. oDiv. appendChild( oFragment);
         for ( var  i =  1;  i <  max +  1;  i++) {
             if ( this. distr) {
                 phi =  Math. acos(- 1 + ( 2 *  i -  1) /  max);
                 theta =  Math. sqrt( max *  Math. PI) *  phi;
            }  else {
                 phi =  Math. random() *  Math. PI;
                 theta =  Math. random() * ( 2 *  Math. PI);
            }
             //坐标变换
             this. mcList[ i -  1]. cx =  this. radius *  Math. cos( theta) *  Math. sin( phi);
             this. mcList[ i -  1]. cy =  this. radius *  Math. sin( theta) *  Math. sin( phi);
             this. mcList[ i -  1]. cz =  this. radius *  Math. cos( phi);
             this. aA[ i -  1]. style. webkitTransform =  `translate( ${ this. mcList[ i -  1]. cx +
                 this. oDiv. offsetWidth /  2 -
                 this. mcList[ i -  1]. offsetWidth /  2 +
                 'px' } , ${ this. mcList[ i -  1]. cy +
                 this. oDiv. offsetHeight /  2 -
                 this. mcList[ i -  1]. offsetHeight /  2 +
                 'px' } ) scale( ${ this. mcList[ i -  1]. scale ||  1 } )`;
        }
    }
     doPosition() {
         var  l =  this. oDiv. offsetWidth /  2,
             t =  this. oDiv. offsetHeight /  2;
         for ( var  i =  0;  i <  this. mcList. length;  i++) {
             this. aA[ i]. style. webkitTransform =  `translate( ${ this. mcList[ i]. cx +
                 l -
                 this. mcList[ i]. offsetWidth /  2 +
                 'px' } , ${ this. mcList[ i]. cy +  t -  this. mcList[ i]. offsetHeight /  2 +  'px' } ) scale( ${ this. mcList[ i]
                . scale } )`;
             this. aA[ i]. style. opacity =  this. mcList[ i]. alpha;
        }
    }
     sineCosine( a,  b,  c) {
         this. sa =  Math. sin( a *  this. dtr);
         this. ca =  Math. cos( a *  this. dtr);
         this. sb =  Math. sin( b *  this. dtr);
         this. cb =  Math. cos( b *  this. dtr);
         this. sc =  Math. sin( c *  this. dtr);
         this. cc =  Math. cos( c *  this. dtr);
    }
}
export  default  TagCould;
z1048956673
关注
JavaScript+CSS的移动端3D翻转刷新
09-20
JavaScript+CSS的移动端3D翻转刷新，很好的3D效果，兼容移动端
js实现3d标签云tag动画效果js特效代码
ICode联盟
01-05 983
下载地址JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时，当前标签静止，移出恢复滚动效果。tagcloud({ selector: ".tagcloud", //元素选择器 fontsize: 16, //基本字体大小, 单位px radius: 100, //滚动半径, 单位px mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast
纯JS实现的3D标签云，不依赖任何第三方库，支持移动页面
Challenge Next Challenge
07-17 6879
纯JS实现的3D标签云，不依赖任何第三方库，支持移动页面
tagcloud.js:用HTML5生成标签云的Javascript
04-29
tagcloud.js 使用HTML5生成标签云的Javascript。 这在蜥蜴（ ）项目中用作扩展来生成源代码的标签云。 （有关更多信息，请使用lizard -EWordCount命令。） 如何使用它 只有一个TagCloud类具有一个render方法。 基本上，您需要一个HTML5并传递画布的宽度，高度和2D上下文以创建TagCloud： function draw ( ) { var canvas = document . getElementById ( "canvas" ) ; if ( canvas . getContext ) { var ctx = canvas . getContext ( "2d" ) ; var tagCloud = new TagCloud ( canvas . width , canvas .
用tagcloud插件制作的超炫酷“云标签”（3D旋转和平铺），附前后台代码及标签配置页面
cc_blog的博客
11-29 7781
HTML:（下方有图）                                         全部工单 //为全面考虑加一个《全部XX》的标签                       {$vo} //后台查询所有标签，这里可以利用a标签写点击事件                                    全部
wp-cumulus(支持中文标签)
03-06
**wp-cumulus插件详解** `wp-cumulus`是一款专门为WordPress博客设计的炫酷三维标签云插件。这款插件以其独特的视觉效果和良好的用户体验，在众多的WordPress标签云插件中脱颖而出。通过使用`wp-cumulus`，用户可以...
666！让移动端也用上3D·VR特效
netease_im的博客
12-13 643
虽说近来势头被AI盖过了，但VR、AR技术自前年以来，一直在风口浪尖。HTC、SONY的VR眼镜，微软的HoloLens、苹果的ARkit，甚至连任天堂的五毛钱特效AR游戏Pokémon...
Unity3D_Could not produce Class With ID xxx
蹒跚路行
12-27 5769
以前遇到这个错误，折腾了一夜不知道，今天又遇到，OK 淡定的google ……………………………………………………………………………………………… BTW,我能fuck下GFW，我老老实实的google资料老断线，到时候浏览国内各种网页的时候各种不堪入目，少儿不宜的页面出现，能不能提高下保护青少年的水平啊，我们堕落就算了，下一代啊。郁闷，技术网站请不要屏蔽了好不好 ………………………………
打造离线版 123D Catch
zhazhiqiang2010的专栏
12-21 5204
【原文：http://www.didayin.com/archives/632】 （如果您在使用 123D Catch 的过程中遇到任何问题，欢迎加入 Autodesk 的官方 QQ 群：232449110，有专人为您解答问题哦） Autodesk 的 123D Catch 让我们能够很简单的根据一组照片构建3D物体，你只需要从各个角度拍摄希望建模的物体，然后通过 123D Cat
从2D图片生成3D模型（3D-GAN）
热门推荐
MachineLP的专栏
01-30 2万+
3D-GAN是使用生成对抗网络学习2D图像到3D模型的映射，生成网络负责生成3D模型，对抗网络判断这些模型是真是假。 3D-GAN：http://3dgan.csail.mit.edu/ 3D-GAN paper：https://arxiv.org/pdf/1610.07584v2.pdf 3D-GAN代码：https://github.com/zck119/3dgan-re
裸眼3D将是未来移动端的显示的主要技术
东方佑
08-02 822
为什么本人会谈这个， 因为近几天本人成功实现了眼球追踪，不是特别的精确， 但是面对裸眼3D的实现足够了，只要摄像头可以捕捉到你的眼睛就可以了 最后就是实现双眼投射，那么问题来了，投影如何调整自己的方向和位置，通过红外和光感解决距离计算，并计算焦距，其实通过摄像头也是可以计算的但是这个算的比较准确， 还有就是方向问题，这个其实问题不是特别重要只要能360度 偏转30度即可，还有就是自动调焦距，这个并不难对于今天的手机来说应该是 so easy 摄像头可以50倍变焦，还解决不了这个问题 好这些实现后就是手机要不
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 387
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
vue2面试题5|[2024-11-08]
m0_49474690的博客
11-08 968
关于vue2API的面试题
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 147
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Vue中的常用指令
m0_62388400的博客
11-12 973
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 739
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
如何编译 Cesium 源码
最新发布
ismartcube的博客
11-13 720
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 677
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
Vue常用加密方式
m0_51431448的博客
11-13 72
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值