chap7_图片位控

[wm_tips]图片元素不仅可以添加给舞台,也可以将元素添加给另一个元素 多个元素之间将产生关联,进而达到操控一张图片就可以控制多张图片位置的效果[/wm_tips]

一、元素组合

将独立的多个元素合并到一起,视为一个整体,便于程序对多个元素的统一处理 在程序中可以将一个元素添加到另外一个中,合并为一个整体

示例

//创建图片元素(主站机图片)
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 );

[wm_warn]注意:辅元素添加到主元素中时,辅元素的默认起始位置等于主元素的锚点 当为辅元素设置位置时(x,y),x与y表示的是辅元素与主元素之间的距离[/wm_warn]

如下图所示

[wm_notice]此时僚机的x与y将作为与主战机的距离,向左、向上移动可以使用负数 设置好距离后移动主元素(主战机),辅元素(僚机)也会一起移动并保持一定距离(辅元素 x,y决定)[/wm_notice]

二、图片图层

图片图层:图片在应用窗口的层级 默认图层效果:先插入的元素低于后插入的元素(后插入的元素会遮盖先插入的元素) 合并元素图层效果:辅元素会与主元素图层一致并将主元素向下压一级(辅元素会遮盖主元素) 原来遮盖主元素的其他元素,现在将同时遮盖主元素与辅元素

示例

代码示例

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);

效果

[wm_notice]注意:当两个元素合并时,辅元素的默认宽高会受到主元素的影响,如果不希望辅元素受到影响,需要 为辅元素单独设置宽高。[/wm_notice]

发表评论