此處是在控制臺中輸入了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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。