关键词搜索

源码搜索 ×
×

计算机图形学&Web前端笔记-图形平移放缩原理及实现（two.js鼠标事件适用所有渲染）

发布2020-07-10浏览1379次

详情内容

在two.js中，只提供了svg渲染时的鼠标事件，而canvas和webgl并没有提供，这样就对本人造成了很大的困扰，因此学习了下计算机图形学相关的知识，实现了利用two.js绘图在canvas、svg、webgl渲染方式下，放缩或移动场景，还能使用鼠标对其进行点击交互。

 

下面先演示下截图：

点击绿色的矩形：

从上面的图可以看出变色了。

下面滚动滚轮及拖动下场景：

同样点击刚刚那个矩形：

还是可以被找到，并且改变颜色。

 

下面先来说下2d图形中平移和放缩的原理（非常重要，下面的代码实现都需要用到）：

平移：

放缩：

放缩+平移：

可见是先放缩，然后再进行平移。

总结下：

  1. a b c
  2. d e f
  3. g h i

其中a为：水平放缩；

其中c为：水平位移；

其中e为：垂直放缩；

其中f为：垂直位移。

 

下面来看下代码是如何实现的：

在two.js，two对象：

在scene中存在_matrix里面存储了Float32Array(9)，这里就对应了上面的3*3矩阵，上面的就是单位矩阵，

  1. 1 0 0
  2. 0 1 0
  3. 0 0 1

 

当放缩或移动后：

创建这几个矩形的代码：

代码如下：

  1. function createBtn(id, x, y, weight, color) {
  2.  
  3.   rect = two.makeRectangle(x, y, 200, 200);
  4.   rect.noStroke();
  5.   rect.fill = color;
  6.   rect.myId = id;
  7.  
  8.   map.set(rect, weight);
  9. }
  10. 这些rect都存储在map中，如何在：
  11. $stage.bind('mousedown', function(event){
  12.  
  13.   isPressed = true;
  14.   originalPositionX = event.clientX;
  15.   originalPositionY = event.clientY;
  16.  
  17.   let x = event.clientX;
  18.   let y = event.clientY;
  19.  
  20.   let letX = (rect._translation._x / 2 * (two.scene._matrix.elements[0]) + two.scene._matrix.elements[2]);
  21.   let letY = (rect._translation._y / 2 * (two.scene._matrix.elements[4]) + two.scene._matrix.elements[5]);
  22.   let letWidth = rect._width * two.scene._matrix.elements[0];
  23.   let letHeight = rect._height *two.scene._matrix.elements[4];
  24.  
  25.   // if(x > letX &&
  26.   //   y > letY &&
  27.   //   x < letX + letWidth &&
  28.   //   y < letY + letHeight
  29.   // ){
  30.   //
  31.   //   console.log("find it");
  32.   // }
  33.  
  34.   // console.log("坐标 x=" + x + "  y=" + y);
  35.  
  36.   console.log(two);
  37.   for(let value of map){
  38.  
  39.     let xOffset = value[0]._width / 2;
  40.     let yOffset = value[0]._height / 2;
  41.     // console.log("xOffset:" + xOffset);
  42.     // console.log("yOffset:" + yOffset);
  43.  
  44.     // console.log(value[0])
  45.     let letX = ((value[0]._translation._x - xOffset) * (two.scene._matrix.elements[0]) + two.scene._matrix.elements[2]);
  46.     let letY = ((value[0]._translation._y - yOffset) * (two.scene._matrix.elements[4]) + two.scene._matrix.elements[5]);
  47.     let letWidth = value[0]._width * two.scene._matrix.elements[0];
  48.     let letHeight = value[0]._height * two.scene._matrix.elements[4];
  49.  
  50.     // console.log("id:" + value[0].myId);
  51.     // console.log("letX:" + letX + "  letY:" + letY);
  52.     // console.log("letWidth: " + letWidth + "  letHeight:" + letHeight);
  53.     // console.log("");
  54.  
  55.     if(x > letX &&
  56.       y > letY &&
  57.       x < letX + letWidth &&
  58.       y < letY + letHeight
  59.     ){
  60.  
  61.       let r = Math.round(Math.random() * 255);
  62.       let g = Math.round(Math.random() * 255);
  63.       let b = Math.round(Math.random() * 255);
  64.  
  65.       let rgbStr = "rgb(" + r + "," + g + "," + b + ")";
  66.       value[0].fill = rgbStr;
  67.       console.log("find it " + value[0].myId);
  68.       break;
  69.     }
  70.   }
  71.  
  72.   // console.log("---------------------------------");
  73.  
  74. });

代码按下时对map进行遍历，如何将其进行转换后的坐标以及宽度进行矩阵变化即可：

这里有一点要说明的two.js中画矩形如果是从200, 200开始,那么这个200,200将会是矩形的

中心点,并不是左上角的点,所以这里有功offset.

 

鼠标拖动,滚轮放缩相关的代码:

  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);

整个项目打包下载地址:

https://github.com/fengfanchen/frontUI/tree/master/mouseDemo

相关技术文章

最新源码

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

提示信息

×

选择支付方式

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