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）相关推荐

Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
计算机图形学Web前端笔记-图形平移放缩原理及实现（two.js鼠标事件适用所有渲染）
在two.js中,只提供了svg渲染时的鼠标事件,而canvas和webgl并没有提供,这样就对本人造成了很大的困扰,因此学习了下计算机图形学相关的知识,实现了利用two.js绘图在canvas.sv ...
Web前端笔记(标签)
目录 Web前端知识点 HTML 标签的语法 html标签主体框架常用标签标题标签段落标签字体倾斜.加粗.下划线强调内容预设标签字体标签分割线实体字符图片标签视频标签音频标签 ...
WEB前端笔记第一天
什么是WEB前端? 简单来说就是网页,只是这个网页它是由多种技术参与制作的,用来向用户展示的页面. HTML(hyperText mark-up language):它决定了网页的结构. CSS:网页 ...
计算机图形学Web前端笔记-浏览器中心点转场景坐标理论及实现（two.js）
实现的功能是这样的: 输入window.mainPage.flyTo(xxx, xxx) 后会在浏览器中心点画个圆心,使用鼠标及滚轮滚动后. 再次运行: 前一篇博文已经说了3*3变化矩阵实现图形放缩及 ...
Web前端笔记（1）
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...
Web前端笔记-two.js图形旋转动画的2种实现方式
这里有两种方式! 第一种是使用setInterval: 代码如下: let time = setInterval(function(){if(sun.sun.rotation >= TWO_PI ...
web前端笔记1-hml，css部分
这里写目录标题一.基础内容 1.网页 1.1什么是网页 1.2什么是HTML 1.3网页的形成 2.常用浏览器 2.1常用的浏览器 2.2浏览器内核 3.web标准 3.1为什么需要web标准 3. ...

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

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

最新文章

热门文章