Web前端笔记-画布拖动及放缩(two.js)
程序运行截图如下:
结构图如下:
关键代码如下:
界面调用
HelloWorld.vue
<template><div><div id="draw-shapes"></div></div>
</template><script>import "JS/two"import "JS/zui";import {demo1} from "JS/test1";export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}},mounted() {demo1();}}
</script><style scoped></style>
js关键代码如下:
zui.js
(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);
test1.js
;import * as Two from "JS/two";
import * as $ from "JS/jquery"export function demo1(){let elem = document.getElementById('draw-shapes');let params = {type: Two.Types['webgl'],fullscreen: true,autostart: true}let two = new Two(params).appendTo(elem);let circle = two.makeCircle(0, 0, 50);let rect = two.makeRectangle(2000, 2000, 100, 100);circle.fill = '#FF8000';circle.stroke = 'orangered';circle.linewidth = 5;rect.fill = 'rgb(0, 200, 255)';rect.opacity = 5;rect.noStroke();two.update();let zui = new Two.ZUI(two.scene);zui.addLimits(0.06, 8);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;zui.zoomBy(dy, e.clientX, e.clientY);});let isPressed = false;let originalPositionX = 0;let originalPositionY = 0;$stage.bind('mouseup', function(event){isPressed = false;});$stage.bind('mousemove', function(event){if(isPressed){let boolX = event.clientX - originalPositionX;let boolY = event.clientY - originalPositionY;zui.graphicMove(boolX, boolY);originalPositionX = event.clientX;originalPositionY = event.clientY;}});$stage.bind('mousedown', function(event){isPressed = true;originalPositionX = event.clientX;originalPositionY = event.clientY;});
}
Web前端笔记-画布拖动及放缩(two.js)相关推荐
- Web前端 笔记 (21-45)
Web前端 笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例 未加语义化标签 添加语义化标签 23.表格属性 1.常见表格属 ...
- Web前端笔记(三)
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位 脱离文档流 使内联支持宽高 使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
- 计算机图形学Web前端笔记-图形平移放缩原理及实现(two.js鼠标事件适用所有渲染)
在two.js中,只提供了svg渲染时的鼠标事件,而canvas和webgl并没有提供,这样就对本人造成了很大的困扰,因此学习了下计算机图形学相关的知识,实现了利用two.js绘图在canvas.sv ...
- WEB前端笔记第一天
什么是WEB前端? 简单来说就是网页,只是这个网页它是由多种技术参与制作的,用来向用户展示的页面. HTML(hyperText mark-up language):它决定了网页的结构. CSS:网页 ...
- Web前端笔记(1)
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...
- Web前端笔记(标签)
目录 Web前端知识点 HTML 标签的语法 html标签 主体框架 常用标签 标题标签 段落标签 字体倾斜.加粗.下划线 强调内容 预设标签 字体标签 分割线 实体字符 图片标签 视频标签 音频标签 ...
- (web前端笔记)2020-12-23(ajax)
From web sites to web applications client/server bs架构带来了和cs架构完全不同的形式 basic three-tier(三次架构) user int ...
- Web前端开发入门教程,HTML5+CSS3+JS教程,达到web前端工程师的水平
Web前端开发是一个非常热门的职业,随着互联网的发展,越来越多的企业需要拥有自己的网站和应用程序.本文将介绍Web前端开发的入门教程,包括HTML5.CSS3和JS教程,帮助读者达到Web前端工程师的 ...
- WEB前端框架jQuery、VueJS、React.JS、Node.JS、Bootstrap解读
Web前端框架可以分为两类: 1)JS的类库框架 JQuery.JS Angular.JS(模型, scope作用域,controller,依赖注入,MVVM):前端MVC Vue.JS(MVVM) ...
最新文章
- Tensorflow—Fetch and Feed
- 三角形css_纯 CSS 实现绘制各种三角形(各种角度)
- 【面试题】Redis中是如何实现分布式锁的
- 3DSlicer26:Add Extension/Module filepath,no module named ...
- 2017.4.19 多项式输出 思考记录
- memcache/redis 缓存学习笔记
- 第十章 嵌入式linux的调试技术
- 北京信息科技北京化工计算机,【计算机考研】院校信息-北京化工大学
- ps神经网络滤镜用不了,ps神经网络滤镜安装包
- 最新调研-核心业务运营服务市场究分析报告
- 行为识别笔记:iDT算法用法与代码解析
- GDAL库扩展Landsat系列MTL文件格式支持
- 前端如何单枪匹马实现小程序页面级版本控制
- 获取手机的IMEI与IMSI
- LVS负载均衡和nat模式的实操
- php oss 断点续传,断点续传上传
- 阿哈罗诺夫——玻姆效应(AB效应)
- 杨老师课堂_Java教程第六篇之引用数据类型_类的运用
- 通达信python爬股票接口怎么获取?
- 使用Seq2seq框架搭建对联生成系统