admin

发表文章数:136

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

一、元素组合

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

示例

//创建图片元素(主站机图片)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表示的是辅元素与主元素之间的距离

如下图所示

chap7图片位控

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

chap7图片位控

二、图片图层

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

示例

chap7图片位控

代码示例

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

效果

chap7图片位控

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

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 雪山'Blog
原文地址:《chap7图片位控》 发布于2020-03-19

分享到:
打赏 生成海报

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
切换注册

登录

忘记密码 ?

切换登录

注册