关键词搜索

源码搜索 ×
×

Web前端笔记-圆环随时间逐渐缩小（使用two.js）

发布2020-07-14浏览979次

详情内容

这里给出效果图：

这里就给出截图，不搞gif了：

运行时：

这里主要是使用了setInterval去操作的，并且设置的timeout为0，这样的效果是比较好的。

关键代码如下：

画图相关文件：

  1. ;
  2.  
  3. import * as Two from "JS/two";
  4. import * as $ from "JS/jquery";
  5.  
  6. let two;
  7. let mouse;
  8. let isPressed = false;
  9. let originalPositionX = 0;
  10. let originalPositionY = 0;
  11. let map = new Map();
  12. let rect;
  13.  
  14. export function drawGraphic(){
  15.  
  16.   let elem = document.getElementById("draw-shapes");
  17.   let params = {
  18.  
  19.     type: Two.Types['canvas'],
  20.     fullscreen: true,
  21.     autostart: true
  22.   };
  23.  
  24.   two = new Two(params).appendTo(elem);
  25.   mouse = new Two.ZUI(two.scene);
  26.   mouse.addLimits(0.01, 10);
  27.  
  28.   let $stage = $(two.renderer.domElement);
  29.   $stage.bind('mousewheel wheel', function(event){
  30.  
  31.     let e = event.originalEvent;
  32.     e.stopPropagation();
  33.     e.preventDefault();
  34.  
  35.     let dy = (e.wheelDeltaY || -e.deltaY) / 1000;
  36.     // console.log(e.clientX + "   " + e.clientY)
  37.     mouse.zoomBy(dy, e.clientX, e.clientY);
  38.   });
  39.  
  40.   $stage.bind('mouseup', function(event){
  41.  
  42.     isPressed = false;
  43.   });
  44.   $stage.bind('mouseout', function(event){
  45.  
  46.     isPressed = false;
  47.   });
  48.  
  49.   $stage.bind('mousedown', function(event){
  50.  
  51.     isPressed = true;
  52.     originalPositionX = event.clientX;
  53.     originalPositionY = event.clientY;
  54.  
  55.     let x = event.clientX;
  56.     let y = event.clientY;
  57.  
  58.     for(let value of map){
  59.  
  60.       let xOffset = value[0]._width / 2;
  61.       let yOffset = value[0]._height / 2;
  62.  
  63.       let letX = ((value[0]._translation._x - xOffset) * (two.scene._matrix.elements[0]) + two.scene._matrix.elements[2]);
  64.       let letY = ((value[0]._translation._y - yOffset) * (two.scene._matrix.elements[4]) + two.scene._matrix.elements[5]);
  65.       let letWidth = value[0]._width * two.scene._matrix.elements[0];
  66.       let letHeight = value[0]._height * two.scene._matrix.elements[4];
  67.  
  68.       if(x > letX &&
  69.         y > letY &&
  70.         x < letX + letWidth &&
  71.         y < letY + letHeight
  72.       ){
  73.  
  74.  
  75.         let rgbStr = getRandColor();
  76.         value[0].fill = rgbStr;
  77.         break;
  78.       }
  79.     }
  80.  
  81.   });
  82.  
  83.   $stage.bind('mousemove', function(event){
  84.  
  85.     if(isPressed){
  86.  
  87.       let boolX = event.clientX - originalPositionX;
  88.       let boolY = event.clientY - originalPositionY;
  89.       mouse.graphicMove(boolX, boolY);
  90.       originalPositionX = event.clientX;
  91.       originalPositionY = event.clientY;
  92.     }
  93.   });
  94.  
  95.   for(let i = -5000; i < 5000; i += 200){
  96.  
  97.     for(let j = -5000; j < 5000; j += 200){
  98.  
  99.       let rgbStr = getRandColor();
  100.       createBtn(1001, i, j, 500, rgbStr);
  101.     }
  102.   }
  103. }
  104.  
  105. function createBtn(id, x, y, weight, color) {
  106.  
  107.   rect = two.makeRectangle(x, y, 200, 200);
  108.   rect.noStroke();
  109.   rect.fill = color;
  110.   rect.myId = id;
  111.  
  112.   map.set(rect, weight);
  113. }
  114.  
  115. function getRandColor(){
  116.  
  117.   let r = Math.round(Math.random() * 255);
  118.   let g = Math.round(Math.random() * 255);
  119.   let b = Math.round(Math.random() * 255);
  120.   let rgbStr = "rgb(" + r + "," + g + "," + b + ")";
  121.   return rgbStr;
  122. }
  123.  
  124. //计算当前屏幕圆心 对应的 图形坐标
  125. function getScreenOriginal(){
  126.  
  127.   let original = {
  128.     x: 0,
  129.     y: 0
  130.   };
  131.  
  132.   original.x = two.width / 2;
  133.   original.y = two.height / 2;
  134.  
  135.   // console.log(two.scene._matrix.elements)
  136.  
  137.   //获取水平位移及垂直位移
  138.   //将浏览器上界面坐标转换为two.js的场景坐标,也就是 cirX和cirY为当前界面中点的场景坐标
  139.   let cirX = (original.x - two.scene._matrix.elements[2]) / two.scene._matrix.elements[0];
  140.   let cirY = (original.y - two.scene._matrix.elements[5]) / two.scene._matrix.elements[4];
  141.  
  142.   console.log("当前圆心 cirX:" + cirX + "  cirY:" + cirY);
  143.  
  144.   original.x = cirX;
  145.   original.y = cirY;
  146.  
  147.   return original;
  148. }
  149.  
  150. export function flyToPosition(x, y){
  151.  
  152.   //当前屏幕中点 对应的 场景坐标
  153.   let dot = getScreenOriginal();
  154.   console.log("dot:" + dot);
  155.  
  156.   //屏幕中心点坐标
  157.   let original = {
  158.     x: 0,
  159.     y: 0
  160.   };
  161.  
  162.   original.x = two.width / 2;
  163.   original.y = two.height / 2;
  164.  
  165.   let c = two.makeCircle(x, y, 10);
  166.   c.fill = "red";
  167.  
  168.   let differenceValueX = (dot.x - x) * two.scene._matrix.elements[0];
  169.   let differenceValueY = (dot.y - y) * two.scene._matrix.elements[4];
  170.   console.log(two.scene._matrix.elements);
  171.   console.log("差值："+ differenceValueX + "  " + differenceValueY);
  172.  
  173.   let currentStep = 0;
  174.   let browX = 0;
  175.   let browY = 0;
  176.   let time = setInterval(function(){
  177.  
  178.     //先把scale设置为最小
  179.     if(currentStep == 0){
  180.  
  181.       if(mouse.scale <= 0.02){
  182.  
  183.         currentStep = 1;
  184.         console.log("over1");
  185.       }
  186.       else{
  187.  
  188.         mouse.zoomBy(-0.05, original.x, original.y)
  189.       }
  190.     }
  191.  
  192.     //当界面最小时，计算x，y,在屏幕上的坐标
  193.     if(currentStep == 1){
  194.  
  195.       browX = (x * two.scene._matrix.elements[0]) + two.scene._matrix.elements[2];
  196.       browY = (y * two.scene._matrix.elements[4]) + two.scene._matrix.elements[5];
  197.  
  198.       console.log("note: browX:" + browX + "  browY:" + browY);
  199.       currentStep = 2;
  200.     }
  201.  
  202.     //慢慢放大
  203.     if(currentStep == 2){
  204.  
  205.       if(mouse.scale >= 2){
  206.  
  207.         currentStep = 3;
  208.       }
  209.       else{
  210.  
  211.         mouse.zoomBy(0.05, browX, browY)
  212.       }
  213.     }
  214.  
  215.  
  216.     if(currentStep == 3){
  217.  
  218.       console.log("over exit")
  219.       clearInterval(time);
  220.     }
  221.  
  222.   }, 0);
  223.  
  224.  
  225.   //飞到对应x,y坐标点，这个x, y将会变成新的屏幕中心点
  226.   //mouse.graphicMove(differenceValueX, differenceValueY);
  227.  
  228.   // originalPositionX = differenceValueX;
  229.   // originalPositionY = differenceValueY;
  230.  
  231. }
  232.  
  233.  
  234. export function waterWave(x, y) {
  235.  
  236.   let repeat = 1000;
  237.   let radius = 1000;
  238.   let cir = two.makeCircle(0, 0, radius);
  239.   cir.noFill();
  240.   cir.linewidth = 3;
  241.   cir.stroke = "rgba(255, 255, 0, 0.5)";
  242.  
  243.   let radiusTime = setInterval(function(){
  244.  
  245.     radius -= 10;
  246.     if(radius <= 0){
  247.  
  248.       radius = 1000;
  249.       cir.radius = radius;
  250.     }
  251.     cir.radius = radius;
  252.   }, 1);
  253.   let time = setInterval(function(){
  254.  
  255.     if(repeat < 0){
  256.  
  257.       cir.remove();
  258.       clearInterval(radiusTime);
  259.       clearInterval(time);
  260.     }
  261.  
  262.  
  263.     repeat--;
  264.   }, 0);
  265.  
  266. }

鼠标滚轮及放缩相关：

  1. (function(Two){
  2.  
  3.   let _ = Two.Utils;
  4.  
  5.   let Surface = function(object) {
  6.  
  7.     this.object = object;
  8.  
  9.   };
  10.  
  11.   _.extend(Surface.prototype, {
  12.  
  13.     limits: function(min, max) {
  14.  
  15.       let min_exists = !_.isUndefined(min);
  16.       let max_exists = !_.isUndefined(max);
  17.  
  18.       if (!max_exists && !min_exists) {
  19.         return { min: this.min, max: this.max };
  20.       }
  21.  
  22.       this.min = min_exists ? min : this.min;
  23.       this.max = max_exists ? max : this.max;
  24.  
  25.       return this;
  26.  
  27.     },
  28.  
  29.     apply: function(px, py, s) {
  30.       this.object.translation.set(px, py);
  31.       this.object.scale = s;
  32.       return this;
  33.     }
  34.  
  35.   });
  36.  
  37.   let ZUI = Two.ZUI = function(group, domElement) {
  38.  
  39.     this.limits = {
  40.  
  41.       scale: ZUI.Limit.clone(),
  42.       x: ZUI.Limit.clone(),
  43.       y: ZUI.Limit.clone()
  44.     };
  45.  
  46.     this.viewport = domElement || document.body;
  47.     this.viewportOffset = {
  48.       matrix: new Two.Matrix()
  49.     };
  50.  
  51.     this.surfaceMatrix = new Two.Matrix();
  52.  
  53.     this.surfaces = [];
  54.     this.reset();
  55.     this.updateSurface();
  56.  
  57.     this.add(new Surface(group));
  58.  
  59.   };
  60.  
  61.   _.extend(ZUI, {
  62.  
  63.     Surface: Surface,
  64.  
  65.     Clamp: function(v, min, max) {
  66.       return Math.min(Math.max(v, min), max);
  67.     },
  68.  
  69.     Limit: {
  70.  
  71.       min: -Infinity,
  72.       max: Infinity,
  73.       clone: function() {
  74.  
  75.         let result = {};
  76.         for (let k in this) {
  77.  
  78.           result[k] = this[k];
  79.         }
  80.         return result;
  81.       }
  82.     },
  83.  
  84.     TranslateMatrix: function(m, x, y) {
  85.  
  86.       m.elements[2] += x;
  87.       m.elements[5] += y;
  88.       return m;
  89.     },
  90.  
  91.     PositionToScale: function(pos){
  92.  
  93.       return Math.exp(pos);
  94.     },
  95.  
  96.     ScaleToPosition: function(scale){
  97.  
  98.       return Math.log(scale);
  99.     }
  100.  
  101.   });
  102.  
  103.   _.extend(ZUI.prototype, {
  104.  
  105.     constructor: ZUI,
  106.  
  107.     add: function(surface){
  108.  
  109.       this.surfaces.push(surface);
  110.       let limits = surface.limits();
  111.       this.addLimits(limits.min, limits.max);
  112.       return this;
  113.     },
  114.  
  115.     addLimits: function(min, max, type) {
  116.  
  117.       type = type || 'scale';
  118.  
  119.       if (!_.isUndefined(min)){
  120.  
  121.         if(this.limits[type].min){
  122.  
  123.           this.limits[type].min = Math.max(min, this.limits[type].min);
  124.         }
  125.         else{
  126.  
  127.           this.limits[type].min = min;
  128.         }
  129.       }
  130.  
  131.       if(_.isUndefined(max)){
  132.  
  133.         return this;
  134.       }
  135.  
  136.       if(this.limits[type].max){
  137.  
  138.         this.limits[type].max = Math.min(max, this.limits[type].max);
  139.       }
  140.       else{
  141.  
  142.         this.limits[type].max = max;
  143.       }
  144.  
  145.       return this;
  146.  
  147.     },
  148.  
  149.     clientToSurface: function(x, y) {
  150.  
  151.       this.updateOffset();
  152.       let m = this.surfaceMatrix.inverse();
  153.       let n = this.viewportOffset.matrix.inverse().multiply(x, y, 1);
  154.       return m.multiply.apply(m, _.toArray(n));
  155.     },
  156.  
  157.     surfaceToClient: function(v) {
  158.  
  159.       this.updateOffset();
  160.       let vo = this.viewportOffset.matrix.clone();
  161.       let sm = this.surfaceMatrix.multiply.apply(this.surfaceMatrix, _.toArray(v));
  162.       return vo.multiply.apply(vo, _.toArray(sm));
  163.     },
  164.  
  165.     graphicMove: function(clientX, clientY){
  166.  
  167.       let dx = clientX;
  168.       let dy = clientY;
  169.       this.translateSurface(dx, dy);
  170.       return this;
  171.     },
  172.  
  173.     zoomBy: function(byF, clientX, clientY){
  174.  
  175.       let s = ZUI.PositionToScale(this.zoom + byF);
  176.       this.zoomSet(s, clientX, clientY);
  177.       return this;
  178.     },
  179.  
  180.     zoomSet: function(zoom, clientX, clientY) {
  181.  
  182.       let newScale = this.fitToLimits(zoom);
  183.       this.zoom = ZUI.ScaleToPosition(newScale);
  184.  
  185.       if (newScale === this.scale) {
  186.  
  187.         return this;
  188.       }
  189.  
  190.       let sf = this.clientToSurface(clientX, clientY);
  191.       let scaleBy = newScale / this.scale;
  192.  
  193.       this.surfaceMatrix.scale(scaleBy);
  194.       this.scale = newScale;
  195.  
  196.       let c = this.surfaceToClient(sf);
  197.       let dx = clientX - c.x;
  198.       let dy = clientY - c.y;
  199.       this.translateSurface(dx, dy);
  200.  
  201.       return this;
  202.     },
  203.  
  204.     translateSurface: function(x, y) {
  205.  
  206.       ZUI.TranslateMatrix(this.surfaceMatrix, x, y);
  207.       this.updateSurface();
  208.       return this;
  209.     },
  210.  
  211.     updateOffset: function() {
  212.  
  213.       let rect = this.viewport.getBoundingClientRect();
  214.       _.extend(this.viewportOffset, rect);
  215.  
  216.       this.viewportOffset.left -= document.body.scrollLeft;
  217.       this.viewportOffset.top -= document.body.scrollTop;
  218.  
  219.       this.viewportOffset.matrix
  220.         .identity()
  221.         .translate(this.viewportOffset.left, this.viewportOffset.top);
  222.  
  223.       return this;
  224.  
  225.     },
  226.  
  227.     updateSurface: function() {
  228.  
  229.       let e = this.surfaceMatrix.elements;
  230.       for(let i = 0; i < this.surfaces.length; i++){
  231.  
  232.         this.surfaces[i].apply(e[2], e[5], e[0]);
  233.       }
  234.       return this;
  235.     },
  236.  
  237.     reset: function() {
  238.       this.zoom = 0;
  239.       this.scale = 1.0;
  240.       this.surfaceMatrix.identity();
  241.       return this;
  242.     },
  243.  
  244.     fitToLimits: function(s) {
  245.       return ZUI.Clamp(s, this.limits.scale.min, this.limits.scale.max);
  246.     }
  247.  
  248.   });
  249.  
  250. })
  251. ((typeof global !== 'undefined' ? global : (this || window)).Two);

 

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载