图片元素不仅可以添加给舞台,也可以将元素添加给另一个元素
示例
//创建图片元素(主站机图片)var plane = new PIXI.Sprite.fromImage("img/plane_blue_01.png");plane.x = 200;plane.y = 400;//设置锚点plane.anchor.set(0.5,0.5);app.stage.addChild( plane );//创建图片元素(僚机)var liaoji1 = new PIXI.Sprite.fromImage("img/liaoji4.png");//将元素添加到另一个元素中(合并)plane.addChild( liaoji1 );
代码讲解
// plane : 主战机元素// addChild() : 添加元素// liaoji1 : 僚机元素plane.addChild( liaoji1 );
注意:辅元素添加到主元素中时,辅元素的默认起始位置等于主元素的锚点
如下图所示
此时僚机的x与y将作为与主战机的距离,向左、向上移动可以使用负数 设置好距离后移动主元素(主战机),辅元素(僚机)也会一起移动并保持一定距离(辅元素 x,y决定)
默认图层效果:先插入的元素低于后插入的元素(后插入的元素会遮盖先插入的元素) 合并元素图层效果:辅元素会与主元素图层一致并将主元素向下压一级(辅元素会遮盖主元素)
示例
代码示例
var app = new PIXI.Application(500,700);document.body.appendChild( app.view );//第一个元素,层级最低的元素 主元素var e1 = new PIXI.Sprite.fromImage("img/plane_blue_01.png");e1.x = 200;e1.y = 400;app.stage.addChild(e1);//第二个元素var e2 = new PIXI.Sprite.fromImage("img/img_plane_item_15.png");e2.x = 200;e2.y = 400;app.stage.addChild(e2);//第三个元素var e3 = new PIXI.Sprite.fromImage("img/liaoji1.png");e3.x = 200;e3.y = 400;//e1与e3合并后 e3的图层将与e1一致,e3会将e1压在底部e1.addChild(e3);
效果
注意:当两个元素合并时,辅元素的默认宽高会受到主元素的影响,如果不希望辅元素受到影响,需要
未经允许不得转载:作者:admin,
转载或复制请以 超链接形式 并注明出处 雪山'Blog。
原文地址:《chap7图片位控》 发布于2020-03-19