Web前端笔记-圆环随时间逐渐缩小（使用two.js）

这里给出效果图：

这里就给出截图，不搞gif了：

运行时：

这里主要是使用了setInterval去操作的，并且设置的timeout为0，这样的效果是比较好的。

关键代码如下：

画图相关文件：

;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['canvas'],fullscreen: true,autostart: true};two = new Two(params).appendTo(elem);mouse = new Two.ZUI(two.scene);mouse.addLimits(0.01, 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;// console.log(e.clientX + "   " + e.clientY)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 rgbStr = getRandColor();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;}});for(let i = -5000; i < 5000; i += 200){for(let j = -5000; j < 5000; j += 200){let rgbStr = getRandColor();createBtn(1001, i, j, 500, rgbStr);}}
}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 getRandColor(){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 + ")";return rgbStr;
}//计算当前屏幕圆心 对应的 图形坐标
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();console.log("dot:" + dot);//屏幕中心点坐标let original = {x: 0,y: 0};original.x = two.width / 2;original.y = two.height / 2;let c = two.makeCircle(x, y, 10);c.fill = "red";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);let currentStep = 0;let browX = 0;let browY = 0;let time = setInterval(function(){//先把scale设置为最小if(currentStep == 0){if(mouse.scale <= 0.02){currentStep = 1;console.log("over1");}else{mouse.zoomBy(-0.05, original.x, original.y)}}//当界面最小时，计算x，y,在屏幕上的坐标if(currentStep == 1){browX = (x * two.scene._matrix.elements[0]) + two.scene._matrix.elements[2];browY = (y * two.scene._matrix.elements[4]) + two.scene._matrix.elements[5];console.log("note: browX:" + browX + "  browY:" + browY);currentStep = 2;}//慢慢放大if(currentStep == 2){if(mouse.scale >= 2){currentStep = 3;}else{mouse.zoomBy(0.05, browX, browY)}}if(currentStep == 3){console.log("over exit")clearInterval(time);}}, 0);//飞到对应x,y坐标点，这个x, y将会变成新的屏幕中心点//mouse.graphicMove(differenceValueX, differenceValueY);// originalPositionX = differenceValueX;// originalPositionY = differenceValueY;}export function waterWave(x, y) {let repeat = 1000;let radius = 1000;let cir = two.makeCircle(0, 0, 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(Two){let _ = Two.Utils;let Surface = function(object) {this.object = object;};_.extend(Surface.prototype, {limits: function(min, max) {let min_exists = !_.isUndefined(min);let max_exists = !_.isUndefined(max);if (!max_exists && !min_exists) {return { min: this.min, max: this.max };}this.min = min_exists ? min : this.min;this.max = max_exists ? max : this.max;return this;},apply: function(px, py, s) {this.object.translation.set(px, py);this.object.scale = s;return this;}});let ZUI = Two.ZUI = function(group, domElement) {this.limits = {scale: ZUI.Limit.clone(),x: ZUI.Limit.clone(),y: ZUI.Limit.clone()};this.viewport = domElement || document.body;this.viewportOffset = {matrix: new Two.Matrix()};this.surfaceMatrix = new Two.Matrix();this.surfaces = [];this.reset();this.updateSurface();this.add(new Surface(group));};_.extend(ZUI, {Surface: Surface,Clamp: function(v, min, max) {return Math.min(Math.max(v, min), max);},Limit: {min: -Infinity,max: Infinity,clone: function() {let result = {};for (let k in this) {result[k] = this[k];}return result;}},TranslateMatrix: function(m, x, y) {m.elements[2] += x;m.elements[5] += y;return m;},PositionToScale: function(pos){return Math.exp(pos);},ScaleToPosition: function(scale){return Math.log(scale);}});_.extend(ZUI.prototype, {constructor: ZUI,add: function(surface){this.surfaces.push(surface);let limits = surface.limits();this.addLimits(limits.min, limits.max);return this;},addLimits: function(min, max, type) {type = type || 'scale';if (!_.isUndefined(min)){if(this.limits[type].min){this.limits[type].min = Math.max(min, this.limits[type].min);}else{this.limits[type].min = min;}}if(_.isUndefined(max)){return this;}if(this.limits[type].max){this.limits[type].max = Math.min(max, this.limits[type].max);}else{this.limits[type].max = max;}return this;},clientToSurface: function(x, y) {this.updateOffset();let m = this.surfaceMatrix.inverse();let n = this.viewportOffset.matrix.inverse().multiply(x, y, 1);return m.multiply.apply(m, _.toArray(n));},surfaceToClient: function(v) {this.updateOffset();let vo = this.viewportOffset.matrix.clone();let sm = this.surfaceMatrix.multiply.apply(this.surfaceMatrix, _.toArray(v));return vo.multiply.apply(vo, _.toArray(sm));},graphicMove: function(clientX, clientY){let dx = clientX;let dy = clientY;this.translateSurface(dx, dy);return this;},zoomBy: function(byF, clientX, clientY){let s = ZUI.PositionToScale(this.zoom + byF);this.zoomSet(s, clientX, clientY);return this;},zoomSet: function(zoom, clientX, clientY) {let newScale = this.fitToLimits(zoom);this.zoom = ZUI.ScaleToPosition(newScale);if (newScale === this.scale) {return this;}let sf = this.clientToSurface(clientX, clientY);let scaleBy = newScale / this.scale;this.surfaceMatrix.scale(scaleBy);this.scale = newScale;let c = this.surfaceToClient(sf);let dx = clientX - c.x;let dy = clientY - c.y;this.translateSurface(dx, dy);return this;},translateSurface: function(x, y) {ZUI.TranslateMatrix(this.surfaceMatrix, x, y);this.updateSurface();return this;},updateOffset: function() {let rect = this.viewport.getBoundingClientRect();_.extend(this.viewportOffset, rect);this.viewportOffset.left -= document.body.scrollLeft;this.viewportOffset.top -= document.body.scrollTop;this.viewportOffset.matrix.identity().translate(this.viewportOffset.left, this.viewportOffset.top);return this;},updateSurface: function() {let e = this.surfaceMatrix.elements;for(let i = 0; i < this.surfaces.length; i++){this.surfaces[i].apply(e[2], e[5], e[0]);}return this;},reset: function() {this.zoom = 0;this.scale = 1.0;this.surfaceMatrix.identity();return this;},fitToLimits: function(s) {return ZUI.Clamp(s, this.limits.scale.min, this.limits.scale.max);}});})
((typeof global !== 'undefined' ? global : (this || window)).Two);

Web前端笔记-圆环随时间逐渐缩小（使用two.js）相关推荐

Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
Web前端笔记（1）
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...
Web前端笔记(标签)
目录 Web前端知识点 HTML 标签的语法 html标签主体框架常用标签标题标签段落标签字体倾斜.加粗.下划线强调内容预设标签字体标签分割线实体字符图片标签视频标签音频标签 ...
WEB前端笔记第一天
什么是WEB前端? 简单来说就是网页,只是这个网页它是由多种技术参与制作的,用来向用户展示的页面. HTML(hyperText mark-up language):它决定了网页的结构. CSS:网页 ...
web前端笔记1-hml，css部分
这里写目录标题一.基础内容 1.网页 1.1什么是网页 1.2什么是HTML 1.3网页的形成 2.常用浏览器 2.1常用的浏览器 2.2浏览器内核 3.web标准 3.1为什么需要web标准 3. ...
Web前端笔记-HTML加载SVG图片及简单修改
加载的用img标签,就可以了,就把他当成普通图片即可,如: <img src="icon/cash-coin.svg" /> 图片是这样的: 在前端的效果就这样了. 简 ...
Web前端笔记（6）
BFC规范: 格式化上下文(Formatting Context)是W3C规范中的一个概念,它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的相关和 ...
Web前端笔记（4）
前端完整页面设计: 1. PC端布局: 通栏:自适应浏览器的宽度版心 :固定一个宽度,并让容器居中页面中需要用到的图片:(由于本人未能找到原版的图片资源,所以只是利用截屏到的图片,进行简单截图后使 ...

Web前端笔记-圆环随时间逐渐缩小（使用two.js）

Web前端笔记-圆环随时间逐渐缩小（使用two.js）相关推荐

最新文章

热门文章