白鹭引擎图片浏览工具

白鹭引擎图片浏览工具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);
	}

}