白鹭引擎图片浏览工具

白鹭引擎图片浏览工具TS源码（原创）

注意事项：

1.需要引入白鹭的Tween缓动库

2.必选参数：图片路径数组；可选参数：当前图片路径

3.功能：双击放大缩小，双指放大缩小，左右滑动切换

4.关闭按钮皮肤需更换为自己的皮肤，loading组件需更换为自己封装的，代码中已标注

class ImagePreview extends egret.Sprite {public constructor(data: any[], current = null) {super();this._data = data;this.currentImage = current;this.init();}private _data: any[];private loading: LoadingMask;//更换loading组件private mask_bg: egret.Shape;private images: egret.Bitmap;private btn_close: eui.Button;private index: number;private moveStart: number;private moveStartY: number;private moveEnd: number;private lastX: number;private lastY: number;private tempWid: number;//图片初始宽度private tempHei: number;//图片初始高度private isEnlarge: boolean = false;//是否放大中private isNarrow: boolean = false;//是否缩小中private currentImage: string = null;//当前图片路径private touchPoints: Object = { names: [] };//存放当前触摸点private touchCon: number = 0; //当前触摸点个数private distance: number = 0; //两点间距离private pointOne: egret.Point; private pointTwo: egret.Point;private centerDot: egret.Point;//两指中心点private devX: number;//图片左边缘与屏幕左边缘的距离private devY: number;//图片上边缘与屏幕上边缘的距离（用来确定双指放大缩小时图片的锚点）private clickNum: number;//点击次数（判断双击）private checkDoubleTime: number = 0;private hasMoved: boolean = false;//手指是否移动（用来判断是否启用双击放大缩小）private init() {var tw = egret.Tween.get(this);tw.to({ alpha: 0 }).to({ alpha: 1 }, 300, egret.Ease.sineIn).call(async () => {this.touchEnabled = true;this.width = Main.gameScene.stage.stageWidth;this.height = Main.gameScene.stage.stageHeight;this.mask_bg = new egret.Shape();this.mask_bg.graphics.beginFill(0x000000);this.mask_bg.graphics.drawRect(0, 0, this.width, this.height);this.mask_bg.graphics.endFill();this.mask_bg.alpha = 0.7;this.addChild(this.mask_bg);this.index = 0;if (this.currentImage) {for (var i = 0; i < this._data.length; i++) {if (this._data[i] === this.currentImage) {this.index = i;break;}}}this.images = new egret.Bitmap();this.loading = new LoadingMask();  //更换loading组件Main.controlPanelScene.addChild(this.loading);this.images.texture = await RES.getResAsync(this._data[this.index]);this.calculateSize();this.images.x = this.width / 2;this.images.y = this.height / 2;this.addChild(this.images);this.loading.close();this.btn_close = new eui.Button();this.btn_close.skinName = "Button.CloseSkin";//替换为自己的按钮皮肤this.btn_close.x = this.width - 75;this.btn_close.y = 15;this.btn_close.alpha = 0.7;this.addChild(this.btn_close);this.btn_close.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onClose, this);this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouchBegin, this);});;}private onTouchBegin(evt: egret.TouchEvent) {if (this.touchPoints[evt.touchPointID] == null) {this.touchPoints[evt.touchPointID] = new egret.Point(evt.stageX, evt.stageY);this.touchPoints["names"].push(evt.touchPointID);}this.touchCon++;if (this.touchCon == 1) {this.pointOne = this.touchPoints[evt.touchPointID];}if (this.touchCon == 2) {this.pointTwo = this.touchPoints[evt.touchPointID];this.distance = this.getTouchDistance();this.centerDot = egret.Point.interpolate(this.pointOne, this.pointTwo, 0.5);if (this.images.y - this.images.anchorOffsetY < 0) {this.devY = Math.abs(this.images.y - this.images.anchorOffsetY);this.images.anchorOffsetY = this.centerDot.y + this.devY;} else {this.devY = (this.height - this.images.height) / 2;this.images.anchorOffsetY = this.centerDot.y - this.devY;}if (this.images.x - this.images.anchorOffsetX < 0) {this.devX = Math.abs(this.images.x - this.images.anchorOffsetX);this.images.anchorOffsetX = this.centerDot.x + this.devX;} else {this.devX = (this.width - this.images.width) / 2;this.images.anchorOffsetX = this.centerDot.x - this.devX;}this.images.x = this.centerDot.x;this.images.y = this.centerDot.y;}this.moveStart = evt.stageX;this.lastX = evt.stageX;this.lastY = evt.stageY;this.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.onMove, this);this.addEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this);}private onMove(evt: egret.TouchEvent) {if (!this.hasMoved) this.hasMoved = true;this.touchPoints[evt.touchPointID].x = evt.stageX;this.touchPoints[evt.touchPointID].y = evt.stageY;if (this.touchCon == 2) {let newdistance = this.getTouchDistance();let newScale = newdistance / this.distance;if (this.images.width * newScale < this.tempWid) {newScale = this.tempWid / this.images.width;this.images.x = this.centerDot.x;this.images.y = this.centerDot.y;this.isEnlarge = false;this.isNarrow = false;} else {this.isEnlarge = true;}if (newScale < 1) {this.isNarrow = true;} else {this.isNarrow = false;}this.images.scaleX = this.images.scaleY = newScale;} else if (!this.isEnlarge) {this.images.x += (evt.stageX - this.lastX);this.lastX = evt.stageX;} else {if (this.images.x - this.images.width / 2 <= 0 || this.images.x + this.images.width / 2 >= this.width) {this.images.x += (evt.stageX - this.lastX);if (this.images.x - this.images.width / 2 > 0) {this.images.x = this.images.width / 2;}if (this.images.x + this.images.width / 2 < this.width) {this.images.x = this.width - this.images.width / 2;}}if (this.images.y - this.images.height / 2 <= 0 || this.images.y + this.images.height / 2 >= this.height) {this.images.y += (evt.stageY - this.lastY);if (this.images.y - this.images.height / 2 > 0) {this.images.y = this.images.height / 2;}if (this.images.y + this.images.height / 2 < this.height) {this.images.y = this.height - this.images.height / 2;}}this.lastX = evt.stageX;this.lastY = evt.stageY;}}private getTouchDistance(): number {let _distance: number = 0;let names = this.touchPoints["names"];_distance = egret.Point.distance(this.touchPoints[names[names.length - 1]],this.touchPoints[names[names.length - 2]]);return _distance;}private onTouchEnd(evt: egret.TouchEvent) {this.onClickImage();this.hasMoved = false;if (this.touchCon == 1 && !this.isEnlarge) {this.moveEnd = evt.stageX;let distance = this.moveStart - this.moveEnd;if (Math.abs(distance) > 100) {if (distance > 0) {this.nextImg();} else if (distance < 0) {this.prevImg();}} else {let tw = egret.Tween.get(this.images);tw.to({ x: this.width / 2 }, 200, egret.Ease.quadOut);}} else {this.images.width *= this.images.scaleX;this.images.height *= this.images.scaleY;let tempAnx = this.images.anchorOffsetX * this.images.scaleX;let tempAny = this.images.anchorOffsetY * this.images.scaleY;this.images.scaleX = this.images.scaleY = 1;this.images.anchorOffsetX = this.images.width / 2;this.images.anchorOffsetY = this.images.height / 2;let tempdevx = tempAnx - this.images.anchorOffsetX;let tempdevy = tempAny - this.images.anchorOffsetY;if (!this.isEnlarge && !this.isNarrow) {this.images.x = this.width / 2;this.images.y = this.height / 2;} else if (this.isEnlarge) {this.images.x -= tempdevx;this.images.y -= tempdevy;} else {this.images.x = this.width / 2;this.images.y = this.height / 2;}}delete this.touchPoints[evt.touchPointID];this.touchCon = 0;this.moveStart = 0;this.moveEnd = 0;this.lastX = 0;this.lastY = 0;this.pointOne = null;this.pointTwo = null;this.centerDot = null;this.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.onMove, this)this.removeEventListener(egret.TouchEvent.TOUCH_END, this.onTouchEnd, this);}private onClickImage() {if (this.hasMoved) return;if (!this.checkDoubleTime) {this.clickNum = 1;this.checkDoubleTime = 1;setTimeout(() => {if (this.checkDoubleTime) {this.checkDoubleTime = 0;}}, 500);} else {if (++this.clickNum == 2) {this.hasMoved = false;var currentScale = this.images.width / this.tempWid;var tw = egret.Tween.get(this.images);if (this.isEnlarge || (this.isNarrow && currentScale >= 1.5)) {this.images.width = this.tempWid;this.images.height = this.tempHei;this.images.anchorOffsetX = this.images.width / 2;this.images.anchorOffsetY = this.images.height / 2;tw.to({ scaleX: currentScale, scaleY: currentScale, width: this.tempWid, height: this.tempHei });tw.to({ scaleX: 1, scaleY: 1, x: this.width / 2, y: this.height / 2 }, 200, egret.Ease.quadOut);this.isEnlarge = false;this.isNarrow = false;this.touchCon = 0;} else if ((this.isNarrow && currentScale < 1.5) || (!this.isEnlarge && !this.isNarrow)) {this.images.width = this.tempWid;this.images.height = this.tempHei;this.images.anchorOffsetX = this.images.width / 2;this.images.anchorOffsetY = this.images.height / 2;tw.to({ scaleX: currentScale, scaleY: currentScale });tw.to({ scaleX: 1.5, scaleY: 1.5, x: this.width / 2, y: this.height / 2 }, 200, egret.Ease.quadOut).call(() => {this.images.width = this.tempWid * 1.5;this.images.height = this.tempHei * 1.5;this.images.scaleX = this.images.scaleY = 1;this.images.anchorOffsetX = this.images.width / 2;this.images.anchorOffsetY = this.images.height / 2;this.images.x = this.width / 2;this.images.y = this.height / 2;}, this);this.isEnlarge = true;this.isNarrow = false;this.touchCon = 0;}}}}private prevImg() {let tw = egret.Tween.get(this.images);this.index--;if (this.index < 0) {this.index = 0;tw.to({ x: this.width / 2 }, 200, egret.Ease.quadOut);return;}tw.to({ x: this.width + this.images.width / 2, alpha: 0 }, 100, egret.Ease.sineIn).call(async () => {this.loading = new LoadingMask();//更换loading组件Main.controlPanelScene.addChild(this.loading);this.images.texture = await RES.getResAsync(this._data[this.index]);this.calculateSize();this.loading.close();}, this).to({ x: -this.images.width / 2, y: this.height / 2 }).to({ x: this.width / 2, alpha: 1 }, 200, egret.Ease.circOut);}private nextImg() {let tw = egret.Tween.get(this.images);this.index++;if (this.index == this._data.length) {this.index = this._data.length - 1;tw.to({ x: this.width / 2 }, 200, egret.Ease.quadOut);return;}tw.to({ x: -this.images.width / 2, alpha: 0 }, 100, egret.Ease.sineIn).call(async () => {this.loading = new LoadingMask();//更换loading组件Main.controlPanelScene.addChild(this.loading);this.images.texture = await RES.getResAsync(this._data[this.index]);this.calculateSize();this.loading.close();}, this).to({ x: this.width + this.images.width / 2, y: this.height / 2 }).to({ x: this.width / 2, alpha: 1 }, 200, egret.Ease.circOut);}private calculateSize() {this.images.width = this.images.texture.textureWidth;this.images.height = this.images.texture.textureHeight;let proportion = this.images.width / this.images.height;if (proportion > 1.7) {this.images.width = this.width;this.images.height = this.width / proportion;} else {this.images.height = this.height;this.images.width = this.height * proportion;}this.tempWid = this.images.width;this.tempHei = this.images.height;this.images.anchorOffsetX = this.images.width / 2;this.images.anchorOffsetY = this.images.height / 2;}private onClose(evt: egret.TouchEvent) {var tw = egret.Tween.get(this);tw.to({ alpha: 0 }, 300, egret.Ease.sineIn).call(() => {this.parent.removeChild(this);}, this);}}

白鹭引擎图片浏览工具相关推荐

解决Win7打不开新版安卓手机图片的痛点，发一个图片浏览工具
工具名称:PictureViewer 照片查看器 v1.0 工具介绍: 1.界面及操作方式借鉴 Windows7 中的照片查看器,对于不习惯 Windows10 默认图片浏览工具的用户,该软件上手使用 ...
制作动态相册的python知识点_动感网页相册 python编写简单文件夹内图片浏览工具...
不知道大家有没有这样的体验,windows电脑上查看一张gif图,默认就把IE给打开了,还弹出个什么询问项,好麻烦的感觉.所以为了解决自己的这个问题,写了个简单的文件夹内图片浏览工具. 效果图以E盘 ...
Xee³ for Mac v3.5.4 优秀的图片浏览工具
Xee 3 是一款Mac上优秀图片浏览软件,Xee能够解决Mac系统内置的图片预览程序的图片切换问题,如上一张.下一张功能,支持几乎所有常见的图片格式,还支持对图片进行简单的编辑,这是一款在Mac下非 ...
Ubuntu下几个命令行方式使用的图片浏览工具
想找几个Ubuntu下可以以命令行方式使用的图片浏览工具. Google了一些资料,找到下面几个web: 1.pho:轻巧的命令行图片查看器其中介绍了工具pho,其功能特点,见下面的转帖内容: ph ...
osx android png图片自动边,Mac/OSX上超好用的图片浏览工具iSee
A super fast image browser, browse large size images without latency! 一个超级快的图片浏览器,浏览大图片0卡顿! 支持一键变动态桌 ...
好用的mac图片浏览工具有哪款？看这里
GraphicConverter 11 mac版是Macos上一款受欢迎的图片浏览器软件,提供导入和导出功能.图片浏览和管理.影像处理.批量转换等实用的功能,GraphicConverter 11 m ...
python做动态相册_动感网页相册 python编写简单文件夹内图片浏览工具
''' template_body = '' # 如果指定乱序,就乱序列表中的数据 if shuffle == True: from random import shuffle shuffle(fil ...
python做相册_动感网页相册 python编写简单文件夹内图片浏览工具
''' template_body = '' # 如果指定乱序,就乱序列表中的数据 if shuffle == True: from random import shuffle shuffle(fil ...
白鹭引擎王泽：重度H5游戏性能优化技巧
9月15日,无惧17级台风"山竹",320名开发者齐聚广州贝塔空间共同探讨"怎样做一款赚钱的小游戏".针对众多开发者关心的重度H5游戏性能优化技巧,我们整理了现 ...

白鹭引擎图片浏览工具

白鹭引擎图片浏览工具相关推荐

最新文章

热门文章