精华内容
下载资源
问答
  • UGUI做的反向遮罩,导入资源资源包即可使用,适应于新手引导及各种场合,有什么需要请在下方留言,更多有趣资源请关注我的博客
  • 1 .创建两个材质球 分别是遮罩和背景 参数值如下设置 2 创建两个image 放在同一层级 3 把材质托给 image 效果实现

    unity实现如图所示的遮罩效果
    1 .创建两个材质球 分别是遮罩和背景 参数值如下设置

    背景参数设置
    遮罩参数设置

    2 创建两个image 放在同一层级
    遮罩image  放到背景image 上方
    3 把材质托给 image 效果实现
    拖给遮罩图
    拖给背景图

    展开全文
  • egret新手引导反向遮罩

    千次阅读 2019-05-06 19:48:23
    新手引导的遮罩效果 最近的功能是做一个新手遮罩的功能 之前的游戏,新手引导都相对简单,简单到什么程度呢 emmmmmmmmmmm 策划拼个图,在合适位置直接调用图片就行… 因为有些游戏的新手引导位置是固定的,所以图片...

    五一快乐

    新手引导的遮罩效果

    最近的功能是做一个新手遮罩的功能
    之前的游戏,新手引导都相对简单,简单到什么程度呢
    emmmmmmmmmmm
    策划拼个图,在合适位置直接调用图片就行…
    因为有些游戏的新手引导位置是固定的,所以图片可以由美术来出,直接当成资源在合适时机调用和删除就行,但是有些特效的遮罩,并不是固定的位置,参考开心消消乐,新手引导挖洞的位置取决于棋盘背景的布局,就有了不确定性,为了尽可能的增加用户的自定义性,所有就有了现在的功能。

    废话不多说,先放效果图

    在这里插入图片描述
    上方镂空补位即为自己绘制自定义位置。
    在绘制中需要注意的思路是在绘制过程中, 先标记需要的点,然后将这些点使用nextTo方法连线,连线完成后得到图形A,再反向绘制出了出了A之外的遮罩。

    	/**
         * 根据显示对象的 Alpha 值擦除背景。Alpha 值不为0的区域将被擦除。
         * @version Egret 2.4
         * @platform Web,Native
         * @language zh_CN
         */
        static ERASE: string;
    

    改属性可擦除绘制完成的图形A,就可将A部分镂空处理,下面上详细代码,注释很详细了。

    class drawGuideUtilView extends eui.Component {
    	private closeBtn: eui.Button;
    	private oneX: any = null;
    	private oneY: any = null;
    	public constructor() {
    		super();
    		this.skinName = "drwaGuideUtilSkin";
    		this.init();
    	}
    
    	public init() {
    		this.closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.close, this);
    	}
    
    	//释放资源
    	public close() {
    		this.parent.removeChild(this);
    	}
    
    
    
    	/**
    	 * 绘制想要的镂空区域
    	 */
    	public draw(params: any = [], paramsNo: any = []) {
    
    		params = [14, 16, 36, 33, 23, 24,];
    		//长和宽除9
    		this.oneX = this.width / 9;
    		this.oneY = this.height / 9;
    
    		let sp: egret.Sprite = new egret.Sprite();
    		sp.graphics.beginFill(0xff0000);
    		let start = params[0];
    		sp.graphics.moveTo(this.reToLocal(start)[0], this.reToLocal(start)[1]);
    
    		for (let k in params) {
    			let v = params[k];
    			if (k == "0") {
    				continue;
    			}
    			sp.graphics.lineTo(this.reToLocal(v)[0], this.reToLocal(v)[1])
    		}
    
    		sp.graphics.endFill();
    		this.drawReverse(sp, this.width, this.height);
    
    		//将无遮罩部分的可点击内容中不可点击区域置为不可点击
    		paramsNo = [[14, 16, 36, 35, 25, 24]];
    
    		for (let k in paramsNo) {
    			let paramIndex = paramsNo[k];
    			let ss: egret.Sprite = new egret.Sprite();
    			ss.graphics.beginFill(0xff0000, 0);
    			let start1 = paramIndex[0];
    			ss.graphics.moveTo(this.reToLocal(start1)[0], this.reToLocal(start1)[1]);
    
    			for (let k in paramIndex) {
    				let v = paramIndex[k];
    				if (k == "0") {
    					continue;
    				}
    				ss.graphics.lineTo(this.reToLocal(v)[0], this.reToLocal(v)[1])
    			}
    
    			ss.graphics.endFill();
    			ss.blendMode = egret.BlendMode.ERASE;
    			ss.touchEnabled = true;
    			this.addChild(ss);
    		}
    	}
    
    	/**
    	 * 	 转换坐标
    	 */
    	public reToLocal(i: string) {
    		let y = Math.floor((parseInt(i) / 10));
    		let x = (parseInt(i)) % 10;
    		return [x * this.oneX, y * this.oneY]
    	}
    
    
    	/**
    	 * 进行反向遮罩
    	 */
    	public drawReverse(dp: egret.DisplayObject, w: number, h: number): void {
    
    		let container = new egret.DisplayObjectContainer();
    		let bg: egret.Shape = new egret.Shape();
    		bg.graphics.beginFill(0x000000, 0.8);
    		bg.graphics.drawRect(0, 0, w, h);
    		bg.graphics.endFill();
    
    		container.addChild(bg);
    		container.addChild(dp);
    		dp.blendMode = egret.BlendMode.ERASE;
    		let renderTexture: egret.RenderTexture = new egret.RenderTexture();
    		renderTexture.drawToTexture(container);
    
    		let bitmap: egret.Bitmap = new egret.Bitmap(renderTexture);
    		this.addChildAt(bitmap, 0);
    		bitmap.touchEnabled = true;  //允许点击
    		bitmap.pixelHitTest = true;  //镂空区域不响应点击,这样可以穿透点击到下面的背景
    	}
    }
    

    完成!,其中反向遮罩方法是核心, 但是在draw方法中 还可重复使用透明遮罩用来遮挡图形A的部分位置达到想要的效果!

    展开全文
  • 结构是这样子的 关键代码: this.tipBoxMask.blendMode = "destination-out"; this.tipMaskSprite.cacheAs = "bitmap";

    结构是这样子的

     

    关键代码:

     

    this.tipBoxMask.blendMode = "destination-out";

    this.tipMaskSprite.cacheAs = "bitmap";

    展开全文
  • JS+CSS实现反向遮罩

    2020-03-19 18:46:35
    公司项目需要在界面上做多种不规则纹理的镂空效果,css的mask可以实现正向遮罩,直接使用的话只会显示不规则纹理区域内的内容。目前我想要的的效果与之相反——不规则图形区域内不显示,其他区域显示。 二. 实现 ...

    一. 需求

    公司项目需要在界面上做多种不规则纹理的镂空效果,cssmask可以实现正向遮罩,直接使用的话只会显示不规则纹理区域内的内容。目前我想要的的效果与之相反——不规则图形区域内不显示,其他区域显示。

    二. 思路

    于是我就想到了利用canvas,先利用canvas获取不规则纹理的像素数据,再把需要遮罩的dom元素和不规则纹理绘制到同一个canvas,根据事先获取的像数数据对不规则纹理内的不透明像素的变成透明,最后把canvas转换成base64的url,设置mask属性,大功告成。

    三.准备

    由于要把dom转换为canvas,使用了html2canvas,
    网址:html2canvas官网

    四.实现

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          div {
            text-align: center;
            background: black;
            border: 2px solid #143182;
            border-radius: 10px;
            width: 250px;
            height: 150px;
            margin: 2px;
          }
        </style>
      </head>
      <body>
        有遮罩的
        <div></div>
        没遮罩的
        <div></div>
        遮罩纹理<br />
        <img src="sheep.png" alt="" />
        <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
        <script>
          const img = document.querySelector("img");
          img.onload = function(e) {
            const div = document.querySelector("div");
            addMask(div, img, 20, 0);
          };
    
          // 添加mask
          function addMask(dom, mask, x = 0, y = 0) {
            html2canvas(dom).then(canvas => {
              const ctx = canvas.getContext("2d");
              // 先用一个新的canvas获取图片的像素数据
              const maskcvs = document.createElement("canvas"),
                maskctx = maskcvs.getContext("2d");
              maskcvs.width = mask.width;
              maskcvs.height = mask.height;
              maskctx.drawImage(mask, 0, 0);
              const maskdata = maskctx.getImageData(0, 0, mask.width, mask.height);
    
              // 再从画布上获取对应像素区域
              const maskdataOnCVS = ctx.getImageData(x, y, mask.width, mask.height);
              // 根据图片的像素数据把图片的不透明像素转换成透明像素
              for (let i = 0, len = maskdataOnCVS.data.length; i < len; i += 4) {
                if (maskdata.data[i + 3] > 0) {
                  maskdataOnCVS.data[i + 3] = 0;
                }
              }
              // 把图片放回画布上
              ctx.putImageData(maskdataOnCVS, x, y);
              dom.style["mask"] = dom.style[
                "-webkit-mask"
              ] = `url(${canvas.toDataURL("image/png")})`;
            });
          }
        </script>
      </body>
    </html>
    

    五.效果图

    在这里插入图片描述

    展开全文
  • Unity3D UGUI mask反向遮罩 局部看图

    千次阅读 2020-06-29 11:56:36
    图片局部正常显示,其他地方有半透明遮罩,无需创建代码就可以实现。 创建两个材质球,参数如下: 然后创建两个Image,注意层级注意层级关系和对应材质球: 最终效果: 可以随便移动mask图片。 .....
  • Egret 使用反向遮罩做新手引导功能

    千次阅读 2018-11-02 15:31:21
    新手引导最复杂的部分就是要将部分东西显示出来,其他部分遮挡,在cocos...我们将上面显示白鹭时代那个遮罩显示出来,其他部分遮挡起来。 2、在createGameScene() 函数下方添加如下代码, /** * 创建场景界面 * ...
  • 使用RenderTexture创建反遮罩或橡皮擦 一、首先创建一个背景 let bg:eui.Image = new eui.Image(RES.getRes("bg_jpg")); this.addChild(bg); 二、创建一个圆 let sp:egret.Sprite = new egret....
  • 不需要编写额外的shader和任何代码,只使用自带的功能 新建一个材质球,取名为mask,选择自带的UI/Default,调节参数如下图...遮罩图为Image_m 注意层级关系! 即可实现 来源:https://answers.unit...
  • Cesium地图反选遮罩,支持自定义遮罩颜色
  • Unity Mask反向遮罩,微信扫扫功能 情景复原: 在程序开发中,需要开发一些 类似扫描二维码的功能。如图 由图所示,其中UI 中间是空的。其他地方是黑色的。而Unity的遮罩组件Mask是无法实现这个效果的。所以查找了...
  • 用unity做类似新手引导的功能的时候发现,自带的Mask组件是不能进行反向遮罩的,就找到了一篇文章,我完美实现了自己想要的效果, 可以实现根据需求调整位置 ![在这里插入图片描述]...
  • unity反向椭圆遮罩shader

    千次阅读 2019-02-22 09:43:56
    改的一个从椭圆遮罩变为反向椭圆遮罩,椭圆部分alpha为0,可以实现新手引导使用,增加了一点边缘alpha过渡,看起来没毛刺. //对图片的mask处理,只有椭圆部分 Shader &amp;amp;amp;quot;Unlit/Transparent Colored ...
  • 这两天实现了下新手引导需要的遮罩镂空shader效果,记录一下。 1、圆形镂空shader代码:  //计算片元世界坐标和目标中心位置的距离 float dis = distance(IN.worldPosition.xy, _Center.xy); //过滤掉距离小于...
  • canvas实现遮罩效果

    2015-08-11 19:14:22
    这是自己做的一个小Demo,实现平行四边形的图片效果。通过canvas和css来实现的。
  • Laya 版本1.7.20 1: 遮罩显示,例如显示...2.反向遮罩显示,例如在 某个图片基础上显示另一张图片 结构如下 mapBg: 为被挖的图片(要在此图基础上显示其他图片) 1中bg为 在mapBg 上显示的图片 2.的ren...
  • 在使用瓦片地图的时候,可以通过加入特殊的层实现行政区域遮罩和反遮罩 获取行政区域轮廓数据:http://datav.aliyun.com/tools/atlas/index.html#&lat=30.37018632615852&lng=106.68898666525287&zoom=...
  • 关于Leaflet 地图 遮罩反选

    千次阅读 2019-02-13 16:17:19
    关于Leaflet 地图 遮罩反选 最近项目用到leaflet作为地图开发插件,需要将某个区域突出显示,其余部分隐藏,之前做过百度地图的开发,有过类似的经验,就简单写一下作为记录。 leaflet 地图插件 leaflet:...
  • Cesium反选遮罩

    千次阅读 2020-11-29 22:24:10
    Cesium反选遮罩 效果图 详情参见 Cesium实战专栏
  • Unity中uGUI元素的反向掩码。 <<| | | >> 描述 取消遮罩提供以下功能: 反面罩 射线穿过未遮盖的矩形 跟随另一个对象 支持嵌套 零件 产品特点 屏幕截图 揭露 父蒙版组件的反向蒙版。 适合目标/适合于后期...
  • cocos creator,挖洞遮罩

    千次阅读 2018-12-24 18:58:31
    先来张效果图,⑧是你找的东西的话就阔以先溜了 不需要写脚本,实现方法如下: ...1.创建空节点,绑定遮罩组件,勾选反向遮罩(Inverted) 2.创建单色图片精灵,设置大小远大于第一步创建的节点。 完成...
  • 遮罩层失效的问题

    2019-07-09 18:45:03
    遮罩层失效的问题 background:#66666688 background: rgba(0, 0, 0, 0.3)是有区别的
  • html遮罩实现

    千次阅读 2019-07-19 22:52:08
    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo</title> <style type="text/css">... /* 半透明的遮罩层 */ ...
  • 百度地图区域 反向 遮盖

    千次阅读 2017-07-12 10:13:32
    function getBoundary() { var bdary = new BMap.Boundary(); if ($("#sel_Area").val() != "") { ... bdary.get($("#sel_Area").find(... 地图api有过变化 之前的反向遮盖 代码有bug了,这个是 修改后的;
  • 实现 ugui 中 Mask 组件的反向功能

    千次阅读 2020-02-05 01:32:14
    当我们拿 ReverseMaskedImage 去代替 Image 挂好图片放到 Mask 的子节点下后,惊奇的发现,Mask 组件再影响我们时,实现的正好是相反的效果,变成反向掏洞了。 但是这样不算完,虽然视觉效果对了,但是我们发现...
  • (我太菜了,哭了)如何实现遮罩就是其中一个非常值得记录的小坑。 首先来看一下我为什么用到遮罩。。。嵌入到项目中后flappybird的游玩界面是这样子的: ![在这里插入图片描述](https://img-blog.csdnimg.cn/201...
  • 组件GComponent关于溢出部分处理,选择“可见”模式,再指定遮罩层,就实现了遮罩功能;如果设定成滚动,则变成了滚动视图。 导出资源 代码实现 using System.Collections; using System.Collections....
  • 这个是简单的局部效果,更炫酷的可以看下https://blog.csdn.net/caozl1132/article/details/107999544
  • cocos creator Mask(遮罩)的使用

    千次阅读 2020-08-31 17:08:34
    目的是要在某个特定的图像或不动的动画上加一个遮罩。 我先是在可点击的空节点上加上了Mask组件,但是毫无反应。 又试了试在这个不动的动画上加Mask组件也没有用。 后来发现是要在额外的创建一个空节点,我命名为...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,848
精华内容 739
关键字:

反向遮罩