ActionScript
TypeScript
JavaScript

给显示对象设置遮罩

发布时间:2017-01-21

一、通过引擎代码设置遮罩

        给显示对象设置遮罩可以让显示对象值显示其中的一部分,在LayaAir引擎中可以通过设置mask属性来设置遮罩。

代码示例:

package  
{
	import laya.display.Sprite;
	import laya.net.Loader;
	import laya.resource.Texture;
	import laya.utils.Handler;
	import laya.webgl.WebGL;
	/**
	 * ...
	 * @author ww
	 */
	public class MaskSample 
	{
		
		public function MaskSample() 
		{
			Laya.init(1000, 900);
			//加载引擎需要的资源
			Laya.loader.load([{url: "res/atlas/comp.json", type: Loader.ATLAS}], Handler.create(this, onLoaded));
		}
		private function onLoaded():void
		{
			//不带遮罩的显示对象
			var sprite0:Sprite;
			sprite0 = new Sprite();
			sprite0.graphics.drawTexture(Loader.getRes("comp/image.png"));
			sprite0.pos(100, 100);	
			Laya.stage.addChild(sprite0);
			
			
			//带遮罩的显示对象
			var sprite1:Sprite;
			sprite1 = new Sprite();
			sprite1.graphics.drawTexture(Loader.getRes("comp/image.png"));
			sprite1.pos(300, 100);	
			Laya.stage.addChild(sprite1);
			
			//创建遮罩对象
			var tMask:Sprite;
			tMask = new Sprite();
			//画一个圆形的遮罩区域
			tMask.graphics.drawCircle(0, 0, 80, "#ff0000");
			tMask.pos(80, 80);
			//给sprite1设置遮罩
			sprite1.mask = tMask;
			
			
		}
		
	}

}

blob.png


二、在IDE中设置遮罩

除了直接在代码中设置遮罩,也可以通过LayaAirIDE方便的给对象设置遮罩。


第一步:我们先创建一个Image。

blob.png

第二步:双击进入Image内部添加一个圆形blob.png

第三步:将圆形的renderType设置为mask。然后双击退出Image进入主场景即能预览看到结果。


blob.png