实现的功能是这样的：
输入window.mainPage.flyTo(xxx,xxx)
后会在浏览器中心点画个圆心，使用鼠标及滚轮滚动后。
再次运行：
前一篇博文已经说了3*3变化矩阵实现图形放缩及平移，这里不再多谈，此处只记录下，将屏幕中心点坐标，转换为two.js的场景坐标点：
这里的two.scene._matrix就是3*3的矩阵。
cirX=（屏幕坐标X点-水平位移）/水平缩放
cirY=（屏幕坐标Y点-垂直位移）/垂直缩放
源码如下：
;import * as Two from "JS/two";import * as $ from "JS/jquery";let two;let mouse;let isPressed = false;let originalPositionX = 0;let originalPositionY = 0;let map = new Map();let rect;export function drawGraphic(){let elem = document.getElementById("draw-shapes");let params = {type: Two.Types['webgl'],fullscreen: true,autostart: true};two = new Two(params).appendTo(elem);mouse = new Two.ZUI(two.scene);mouse.addLimits(0.1, 10);let $stage = $(two.renderer.domElement);$stage.bind('mousewheel wheel', function(event){let e = event.originalEvent;e.stopPropagation();e.preventDefault();let dy = (e.wheelDeltaY || -e.deltaY) / 1000;mouse.zoomBy(dy, e.clientX, e.clientY);});$stage.bind('mouseup', function(event){isPressed = false;});$stage.bind('mouseout', function(event){isPressed = false;});$stage.bind('mousedown', function(event){isPressed = true;originalPositionX = event.clientX;originalPositionY = event.clientY;let x = event.clientX;let y = event.clientY;for(let value of map){let xOffset = value[0]._width / 2;let yOffset = value[0]._height / 2;let letX = ((value[0]._translation._x - xOffset) * (two.scene._matrix.elements[0]) + two.scene._matrix.elements[2]);let letY = ((value[0]._translation._y - yOffset) * (two.scene._matrix.elements[4]) + two.scene._matrix.elements[5]);let letWidth = value[0]._width * two.scene._matrix.elements[0];let letHeight = value[0]._height * two.scene._matrix.elements[4];if(x > letX &&y > letY &&x < letX + letWidth &&y < letY + letHeight){let r = Math.round(Math.random() * 255);let g = Math.round(Math.random() * 255);let b = Math.round(Math.random() * 255);let rgbStr = "rgb(" + r + "," + g + "," + b + ")";value[0].fill = rgbStr;break;}}});$stage.bind('mousemove', function(event){if(isPressed){let boolX = event.clientX - originalPositionX;let boolY = event.clientY - originalPositionY;mouse.graphicMove(boolX, boolY);originalPositionX = event.clientX;originalPositionY = event.clientY;}});createBtn(1001, 200, 200, 500, "red");createBtn(1002, 400, 400, 500, "green");createBtn(1003, 600, 600, 500, "blue");createBtn(1004, 800, 800, 500, "black");createBtn(1005, 1000, 1000, 500, "yellow");createBtn(1006, 400, 800, 500, "purple");}function createBtn(id, x, y, weight, color) {rect = two.makeRectangle(x, y, 200, 200);rect.noStroke();rect.fill = color;rect.myId = id;map.set(rect, weight);}//计算当前屏幕圆心 对应的 图形坐标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;}export function flyToPosition(x, y){let dot = getScreenOriginal();let circle = two.makeCircle(dot.x, dot.y, 10);circle.fill = "red";}
