计算机图形学Web前端笔记-浏览器中心点转场景坐标理论及实现（two.js）

实现的功能是这样的：

输入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";
}

计算机图形学Web前端笔记-浏览器中心点转场景坐标理论及实现（two.js）相关推荐

计算机图形学Web前端笔记-定位并移动到指定坐标点（two.js理论及实现）
这里先演示下效果笔记毕竟这是给理论及实践的博文. 当按下回车后会到场景600,600中画个圆并且浏览器会移动到场景600,600的位置,并且这个位置将会是圆心. 同样,滑动滚轮进行放缩后,还是能进行 ...
计算机图形学Web前端笔记-图形平移放缩原理及实现（two.js鼠标事件适用所有渲染）
在two.js中,只提供了svg渲染时的鼠标事件,而canvas和webgl并没有提供,这样就对本人造成了很大的困扰,因此学习了下计算机图形学相关的知识,实现了利用two.js绘图在canvas.sv ...
Web前端笔记-浏览器控制台调用js函数及vue函数
界面是这样的源码如下: index.html <html> <head> </head><body> <h1>Hello World< ...
Web前端笔记-字符串自适应tip提示框（适应大小自动换行JS中静态工具类实现）思路
程序运行截图如下: 下面提几个知识点. 第一个是JS中实现静态类,如下utils.js export let HHUtils = {}HHUtils .StaticClass = (function( ...
Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
web前端关于浏览器兼容性
web前端关于浏览器兼容性所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登 ...
计算机图形学基础学习笔记-其一：向量与线性代数
计算机图形学基础学习笔记-其一:向量与线性代数前言计算机图形学概述向量(矢量) 点乘叉乘点乘,叉乘与直角坐标系矩阵前言 GAMES101现代计算机图形学入门的学习笔记正在为TA实习攒作 ...
Web前端笔记-2D图形平面内平移定位（two.js）
此处是在控制台中输入了window.mainPage.flyToPosition(-1000, 500),他是经过平移过去的. 整个坐标盘是这样的: 这里使用two.bind('update', fu ...

计算机图形学Web前端笔记-浏览器中心点转场景坐标理论及实现（two.js）

计算机图形学Web前端笔记-浏览器中心点转场景坐标理论及实现（two.js）相关推荐

最新文章

热门文章