ActionScript
TypeScript
JavaScript

容器与节点控制

发布时间:2017-01-13

        首先,我们先了解一下什么是容器。(提到容器必须要了解显示对象,未了解显示对象的可以先去了解显示对象相关的文档章节。)

        容器是一种可以包含显示子对象的对象,方便用来控制多个显示对象的位置,缩放,旋转等属性。LayaAir里,Sprite既是显示对象,也是容器,所以Sprite既可以显示一个图片,也可以作为容器添加别的Sprite。


一、显示对象的容器Sprite

        下面我们就通过一段代码,把其它的显示对象装载到Sprite内。

(function()
{
	var Sprite  = Laya.Sprite;
	var Stage   = Laya.Stage;
	var Event   = Laya.Event;
	var Browser = Laya.Browser;
	var WebGL   = Laya.WebGL;

	// 该容器用于装载4张猩猩图片
	var apesCtn;

	(function()
	{
		// 不支持WebGL时自动切换至Canvas
		Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);

		Laya.stage.alignV = Stage.ALIGN_MIDDLE;
		Laya.stage.alignH = Stage.ALIGN_CENTER;

		Laya.stage.scaleMode = "showall";
		Laya.stage.bgColor = "#232628";

		createApes();
	})();

	function createApes()
	{
		// 每只猩猩距离中心点150像素
		var layoutRadius = 150;
		var radianUnit = Math.PI / 2;

		apesCtn = new Sprite();
		Laya.stage.addChild(apesCtn);

		// 添加4张猩猩图片
		for (var i = 0; i < 4; i++)
		{
			var ape = new Sprite();
			ape.loadImage("../../res/apes/monkey" + i + ".png");

			ape.pivot(55, 72);

			// 以圆周排列猩猩
			ape.pos(
				Math.cos(radianUnit * i) * layoutRadius,
				Math.sin(radianUnit * i) * layoutRadius);

			apesCtn.addChild(ape);
		}

		apesCtn.pos(Laya.stage.width / 2, Laya.stage.height / 2);

		Laya.timer.frameLoop(1, this, animate);
	}

	function animate(e)
	{
		apesCtn.rotation += 1;
	}
})();

blob.png

扫描二维码查看代码运行效果



二、节点控制


了解完容器,我们通过控制容器改变自身以及子级外观,实现节点控制。

(function()
{
	var Sprite  = Laya.Sprite;
	var Stage   = Laya.Stage;
	var Event   = Laya.Event;
	var Browser = Laya.Browser;
	var WebGL   = Laya.WebGL;

	var ape1;
	var ape2;

	(function()
	{
		// 不支持WebGL时自动切换至Canvas
		Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);

		Laya.stage.alignV = Stage.ALIGN_MIDDLE;
		Laya.stage.alignH = Stage.ALIGN_CENTER;

		Laya.stage.scaleMode = "showall";
		Laya.stage.bgColor = "#232628";

		createApes();
	})();

	function createApes()
	{
		//显示两只猩猩
		ape1 = new Sprite();
		ape2 = new Sprite();
		ape1.loadImage("../../res/apes/monkey2.png");
		ape2.loadImage("../../res/apes/monkey2.png");

		ape1.pivot(55, 72);
		ape2.pivot(55, 72);

		ape1.pos(Laya.stage.width / 2, Laya.stage.height / 2);
		ape2.pos(200, 0);

		//一只猩猩在舞台上,另一只被添加成第一只猩猩的子级
		Laya.stage.addChild(ape1);
		ape1.addChild(ape2);

		Laya.timer.frameLoop(1, this, animate);
	}

	function animate(e)
	{
		ape1.rotation += 2;
		ape2.rotation -= 4;
	}
})();

blob.png

扫描二维码查看代码运行效果