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

 

总结

以上是生活随笔为你收集整理的Web前端笔记-2D图形平面内平移定位（two.js）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。