ActionScript
TypeScript
JavaScript

给显示对象设置遮罩

发布时间:2017-03-15

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

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

代码示例:

(function()
{
    var Sprite    = Laya.Sprite;
    var Handler = Laya.Handler;
    var Texture = Laya.Texture;
    var Loader = Laya.Loader;
	(function()
	{
			Laya.init(1000, 900);
			//加载引擎需要的资源
			Laya.loader.load([{url: "res/atlas/comp.json", type: Loader.ATLAS}], Handler.create(this, onLoaded));
           
	})();

	function onLoaded()
		{
			//不带遮罩的显示对象
			var sprite0 = new Sprite();
			sprite0.graphics.drawTexture(Loader.getRes("comp/image.png"));
			sprite0.pos(100, 100);	
			Laya.stage.addChild(sprite0);
			
			
			//带遮罩的显示对象
			var sprite1 = new Sprite();
			sprite1.graphics.drawTexture(Loader.getRes("comp/image.png"));
			sprite1.pos(300, 100);	
			Laya.stage.addChild(sprite1);
			
			//创建遮罩对象
			var 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