egret 实现刮刮乐效果

使用egret mask实现刮刮乐效果

想要实现刮的效果，还得有个遮罩mask

class GuaGuaLe extends eui.Component {

	private i0: eui.Image;//结果层
	private i3: eui.Image;//刮层
	private maskGroup: eui.Group;//遮罩层，当然也可以是egret.DisplayObjectContainer

	//第一个绘制图形点
	private starPointX: number;
	private starPointY: number;
	//第二个绘制点
	private middlePointX: number;
	private middlePointY: number;
	//绘制间隔
	private readonly drawInterval: number = 30;
	//上个绘制时间点
	private lastDrawTime: number;
	//绘制的share数组
	private shares: egret.Shape[];
	//绘制的次数
	private drawTime: number;
	//绘制的线宽
	private lineWidth: number = 30;
	public constructor() {
		super();
		this.skinName = "";//关联对应的exml
		this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
	}
	//显示对象添加到舞台的后的操作
	private addToStage(): void {
		//初始化mask层
		this.maskGroup = new eui.Group();
		this.maskGroup.x = this.i0.x;
		this.maskGroup.y = this.i0.y;
		this.maskGroup.width = this.i0.width;
		this.maskGroup.height = this.i0.height;
		this.addChild(this.maskGroup);
		this.i0.mask = this.maskGroup;//设置遮罩层
		//对刮层进行监听
		this.i3.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.touchBegin, this);
		this.i3.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.touchMove, this);
		this.i3.addEventListener(egret.TouchEvent.TOUCH_END, this.touchEnd, this);
	}
	//鼠标或手指按下
	private touchBegin(e: egret.TouchEvent): void {
		if (!this.shares)
			this.shares = [];
		if (this.shares.length > 0) {
			this.shares[this.shares.length - 1].graphics.endFill()
		}
		//按下开始绘制
		this.starPointX = this.middlePointX = e.stageX;//给第一点和第二点赋初值
		this.starPointY = this.middlePointY = e.stageY;

		let shareLine = new egret.Shape();
		this.shares.push(shareLine);
		this.maskGroup.addChild(shareLine);
		shareLine.graphics.lineStyle(this.lineWidth, 0);//开始绘制线
		shareLine.graphics.moveTo(this.starPointX, this.starPointY);
		this.drawTime = 0;
		this.lastDrawTime = egret.getTimer();
	}
	//鼠标或手指移动
	private touchMove(e: egret.TouchEvent): void {
		if (egret.getTimer() - this.lastDrawTime < this.drawInterval)
			return;
		this.lastDrawTime = egret.getTimer();
		this.drawTime++;//每次间隔记录点，三点绘制一个曲线
		let yushu = this.drawTime % 2;

		if (yushu == 0) {//持续绘制
			let shapes = this.shares[this.shares.length - 1];
			shapes.graphics.curveTo(this.middlePointX, this.middlePointY, e.stageX, e.stageY);
			this.starPointX = this.middlePointX;
			this.starPointX = this.middlePointY;
			this.middlePointX = e.stageX;
			this.middlePointY = e.stageY;
		} else if (yushu == 1) {//点的坐标赋值
			this.starPointX = this.middlePointX;
			this.starPointX = this.middlePointY;
			this.middlePointX = e.stageX;
			this.middlePointY = e.stageY;
		}
	}
	//鼠标或手指抬起
	private touchEnd(e: egret.TouchEvent): void {
		if (this.shares.length > 0) {//结束绘制
			this.shares[this.shares.length - 1].graphics.endFill()
		}
	}
}

最终效果：

使用mask 和 egret.shape来实现还是比较耗性能的，fps下降到40级。