Web前端笔记-移动端触屏移动视角（two.js）

这里主要是利用jquery，在移动端时也可以实现视角的移动效果。

程序运行截图如下：

这里用触屏操作与鼠标操作一样：

关键源码如下：

//移动端触碰开始$stage.bind('touchstart', function (event){originalPositionX = event.changedTouches[0].pageX;originalPositionY = event.changedTouches[0].pageY;isPressed = true;});$stage.bind('touchend', function(event){isPressed = false;});$stage.bind('touchmove', function(event){let currentX = event.changedTouches[0].pageX;let currentY = event.changedTouches[0].pageY;let boolX = currentX - originalPositionX;let boolY = currentY - originalPositionY;mouse.graphicMove(boolX, boolY);originalPositionX = currentX;originalPositionY = currentY;});//移动端触碰结束

程序结构图如下：

源码调用如下：

MainPage.vue

<template><div><div id="draw-shapes"></div></div></template><script>import "JS/two"import "JS/mouse"import {drawGraphic} from "JS/draw";export default {name: 'MainPage',mounted(){drawGraphic();},data () {return {msg: 'Welcome to Your Vue.js App'}}}</script><style scoped></style>

关键文件:draw.js

;import * as Two from "JS/two";import * as $ from "JS/jquery";let isPressed = false;let originalPositionX = 0;let originalPositionY = 0;let two;let mouse;export function drawGraphic(){let elem = document.getElementById("draw-shapes");let params = {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('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;}});$stage.bind('mousedown', function(event){isPressed = true;originalPositionX = event.clientX;originalPositionY = event.clientY;});//移动端触碰开始$stage.bind('touchstart', function (event){originalPositionX = event.changedTouches[0].pageX;originalPositionY = event.changedTouches[0].pageY;isPressed = true;});$stage.bind('touchend', function(event){isPressed = false;});$stage.bind('touchmove', function(event){let currentX = event.changedTouches[0].pageX;let currentY = event.changedTouches[0].pageY;let boolX = currentX - originalPositionX;let boolY = currentY - originalPositionY;mouse.graphicMove(boolX, boolY);originalPositionX = currentX;originalPositionY = currentY;});//移动端触碰结束let text = two.makeText("Hello", 0, 0);text.size = 20;text.fill = "red";text.rotation = 90 * Math.PI / 180;}

放缩移动相关文件：mouse.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);