Egret--拼接Rect实现用于新手引导的扣洞
这次的游戏项目需求与上次的不太一样
新手引导部分需要使用拼接Rect的方式实现
这种方式局限于只能扣出矩形的洞
还有一种比较麻烦的扣洞方法 用到的是 擦除+renderTexture的方式 可以用于扣出形状的洞
namespace Yui { export class GuideMask extends eui.Component { public _area; public RectList = []; public _alpha; public _fillColor = 0x000000; /** * 拼接方式实现新手引导遮罩层. * 可以修改实例的 fillColor属性 修改遮罩颜色(默认为: 0x000000) * 可以修改实例的 alpha属性 修改遮罩颜色(默认为: 0.7) * 可以修改实例的 area属性 修改扣洞区域(格式为:{x:?,y:?,w:?,h:?}); * @author 前端法师 * @param x 扣洞左上角x轴坐标 * @param y 扣洞左上角y轴坐标 * @param w 扣洞矩形宽度 * @param h 扣洞矩形高度 * @param alpha 遮罩部分透明度 */ constructor(x, y, w, h, alpha = 0.7) { super(); this.area = { x, y, w, h }; this.alpha = alpha this.addEventListener(egret.Event.ADDED_TO_STAGE, this.UIInit, this); } private UIInit() { let sw = this.stage.stageWidth let sh = this.stage.stageHeight this.width = sw; this.height = sh; this.verticalCenter = 0; if (this.area) { this.RectList = []; let PointList = { top: [0, 0, sw, this.area.y], bottom: [0, this.area.y + this.area.h, sw, sh - this.area.y - this.area.h], left: [0, this.area.y, this.area.x, this.area.h], right: [this.area.x + this.area.w, this.area.y, sw - this.area.x - this.area.w, this.area.h] } for (var key in PointList) { let maskItem = new eui.Rect(PointList[key][2], PointList[key][3], this.fillColor); maskItem.x = PointList[key][0]; maskItem.y = PointList[key][1]; maskItem.alpha = this.alpha; this.RectList.push(maskItem) this.addChild(maskItem) } } Log('mask', this); } get alpha() { return this._alpha; } set alpha(v) { for (let item of this.RectList) { item.alpha = v; } this._alpha = v; } get area() { return this._area; } set area(v) { this._area = v; if (this.RectList.length > 0) { for (let item of this.RectList) { item.parent.removeChild(item); } this.UIInit() } } get fillColor() { return this._fillColor; } set fillColor(v) { for (let item of this.RectList) { item.fillColor = v; } this._fillColor = v; } } }
本文作者:博客园-前端法师
版权所有,转载请标明出处。