Web前端笔记-2D图形平面内平移定位（two.js）

此处是在控制台中输入了window.mainPage.flyToPosition(-1000, 500)，他是经过平移过去的。

整个坐标盘是这样的：

这里使用two.bind(‘update’, function(frameCount){})用于平移时的绑定跟新，当平移结束后，使用two.unbind(‘update’);

平移相关的代码：

export function flyTo({x, y}){

  waterWave(x, y);

  //计算出目前中心点与x,y坐标的差值
  //当前屏幕中点 对应的 场景坐标
  let dot = getScreenOriginal();
  console.log("dot:" + dot);

  //屏幕中心点坐标
  let original = {
    x: 0,
    y: 0
  };

  original.x = two.width / 2;
  original.y = two.height / 2;

  let differenceValueX = (dot.x - x) * two.scene._matrix.elements[0];
  let differenceValueY = (dot.y - y) * two.scene._matrix.elements[4];
  console.log(two.scene._matrix.elements);
  console.log("差值："+ differenceValueX + "  " + differenceValueY);

  two.bind('update', function(frameCount){

    //判断方向
    if(differenceValueX >= 0){ //向左移动，x+


      if((differenceValueX <= 20 &&differenceValueX >= -20) && (differenceValueY) < 0){

        console.log("向正下方移动...");
        mouse.graphicMove(0, -10);
        differenceValueY += 10;
      }
      else if((differenceValueY >= -20 && differenceValueY <= 20)){

        console.log("向正左方向移动...");
        mouse.graphicMove(10, 0);
        differenceValueX -= 10;
      }
      else if(differenceValueY >=0){ //向上移动，y+

        console.log("向左上移动...")
        mouse.graphicMove(10, 10);
        differenceValueX -= 10;
        differenceValueY -= 10;
      }
    }
    else{   //向右移动 x-

      if(differenceValueY >=0 && (differenceValueX > -20 && differenceValueX < 20)) {

        console.log("向正上方移动...");
        mouse.graphicMove(0, 10);
        differenceValueY -= 10;
      }
      else if(differenceValueY < 0 && (differenceValueX > -20 && differenceValueX < 20)){   //垂直向下移动

        console.log("向正下方移动...");
        mouse.graphicMove(0, -10);
        differenceValueY += 10;
      }
      else if(differenceValueY > 0){  //向右上方移动

        mouse.graphicMove(-10, +10);
        differenceValueX += 10;
        differenceValueY -= 10;
      }
      else if(differenceValueX < 0 && (differenceValueY <= 20 && differenceValueY >= -20)){

        console.log("向正右方移动");
        mouse.graphicMove(-10, 0);
        differenceValueX += 10;
      }
      else if(differenceValueY < 0){

        console.log("向右下方移动...");
        mouse.graphicMove(-10, -10);
        differenceValueX += 10;
        differenceValueY += 10;
      }
    }

    // console.log("differenceValueX:" + differenceValueX + "  differenceValueY:" + differenceValueY);

    if(differenceValueX < 20 && differenceValueX > -20 &&
      differenceValueY < 20 && differenceValueY > -20 ){

      // console.log("differenceValueX:" + differenceValueX + "  differenceValueY:" + differenceValueY);
      console.log("update over");
      two.unbind('update');
    }

  }).play();
}

画圆波纹相关代码：

export function waterWave(x, y) {

  let repeat = 1000;
  let radius = 1000;
  let cir = two.makeCircle(x, y, radius);
  cir.noFill();
  cir.linewidth = 3;
  cir.stroke = "rgba(255, 255, 0, 0.5)";

  let radiusTime = setInterval(function(){

    radius -= 10;
    if(radius <= 0){

      radius = 1000;
      cir.radius = radius;
    }
    cir.radius = radius;
  }, 1);
  let time = setInterval(function(){

    if(repeat < 0){

      cir.remove();
      clearInterval(radiusTime);
      clearInterval(time);
    }


    repeat--;
  }, 0);

}

把浏览器中心点转换为场景坐标点：

//计算当前屏幕圆心 对应的 图形坐标
function getScreenOriginal(){

  let original = {
    x: 0,
    y: 0
  };

  original.x = two.width / 2;
  original.y = two.height / 2;

  // console.log(two.scene._matrix.elements)

  //获取水平位移及垂直位移
  //将浏览器上界面坐标转换为two.js的场景坐标,也就是 cirX和cirY为当前界面中点的场景坐标
  let cirX = (original.x - two.scene._matrix.elements[2]) / two.scene._matrix.elements[0];
  let cirY = (original.y - two.scene._matrix.elements[5]) / two.scene._matrix.elements[4];

  console.log("当前圆心 cirX:" + cirX + "  cirY:" + cirY);

  original.x = cirX;
  original.y = cirY;

  return original;
}