pixi.js 改变层级

已于 2023-09-26 12:06:11 修改
阅读量947 收藏 3
点赞数
文章标签： 前端
于 2022-04-26 00:27:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37550593/article/details/121368408
版权

setChildIndex 层级调整 UI布局 drag and drop getChildIndex
关键词由CSDN通过智能技术生成

说下在尝试后用setChildIndex 去改变层级(改变父元素中children数组中的位置)，还会用到getChildIndex获取父元素中当前元素所在层级。

Container.getChildIndex(child) 传入当前父元素中获取子元素所在层级

Container.setChildIndex(child, 指定index层级)

如果是是多个元素拖拽，让当前元素在最上面(如果不是拖拽，可直接setChildIndex设置层级)

// 先判断当前元素是否在最上面
if(Container.getChildIndex(child) === Container.children.length -1) return
// 这里让层级在最上面
Container.setChildIndex(child, Container.children.length - 1 )

海之蓝心
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PixiJS 6.2.0 图层层级 zindex
zwz1110的博客
11-24 878
//设置APP Apps.stage.sortableChildren = true let container = new Container(); container.zIndex=10000;
设置精灵层级
weixin_44414034的博客
11-15 266
foreach (var spriterender in patona.GetComponentsInChildren<SpriteRenderer>()) { spriterender.sortingOrder = spriterender.sortingOrder + 200; }
PixiJS学习（5）几何图形
幻蝶
12-20 3562
简介： 几何图形其实说的简单一点就是在数学上的：点、线、面。 点： 在平面几何图形中一般把点认为是一个质点，只表示为笛卡尔坐标系中的一个坐标点，因此没有画一个点这样的方法；在实践中一般用圆表示一个点。 线： 在平面几何图形中的线一般可以分为两种：直线和曲线。直线，在数学中的定义是一条无限长的线段，这里的可以将此直线认为是一条线段线段，它有自己的起点和终点，而且还会有宽度、样式、线段节点的...
PixiJS超级详细教程【从入门到入土-上】
烟溪彭于晏的博客
10-10 9598
来自GitHub教程
js pixi框架 极其详细到位(入门)-----转载
热门推荐
chao2458的博客
09-06 1万+
pixi是一个js 的轻量级的游戏类库框架，很适用于做H5的一些canvas动画特效。 这篇文章是关于pixi的入门教程 ，里面的讲解非常的到位细致，是我看到过的文章里讲解的算是最好的了。  去年快过年看的教程 ，今天再想看的时候发现没找到，不过经过不懈的搜索还是找到 ，那就赶紧给转过来吧。   pixi(入门) Pixi教程 基于官方教程翻译；水平有限，如有错误欢迎提PR，转载请注明...
pixi-ease:使用缓动函数的pixi.js动画库
05-06
一个简单而强大的pixi.js缓动/补间/动画库 特征 缓解任何pixi.js参数，包括色调（使用混合功能或阶梯式） 按名称使用任何Penner函数或任何用户定义的函数 支持通用数字参数 使用一个参数更改比例或偏斜度（例如，...
TowerDefense:使用pixi.js制作的塔防游戏
06-18
Pixi.js是一款轻量级的JavaScript库，专为2D游戏和交互式应用设计。它提供了高效的图形渲染和动画性能，支持纹理 atlases、精灵、粒子系统等功能，使得开发者能够轻松地创建复杂的2D游戏场景。 首先，我们需要理解...
tiled.js:使用 PIXI.js 平铺地图
07-13
`tiled.js`是一个强大的地图编辑器，它允许开发者轻松地设计2D游戏地图，而`PIXI.js`则是一个流行的2D渲染引擎，用于处理JavaScript中的图形和动画。 首先，让我们理解`tiled.js`。这个库是专门为游戏开发者设计的...
pixi.min.js
04-30
PixiJS 会帮助你用 JavaScript 或者其他 HTML5 技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的 API 接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵...
puckpuck:使用Pixi.js和Matter.js的游戏
05-11
PuckPuck-游戏 您可以在玩游戏 从战略上在板子周围发射冰球，同时管理其反射矢量以击中目标。 如果计时器为零，则您会迷失方向。 您从20秒开始，通过成功地将冰球降落到目标... Matter.js Node.js MongoDB的 语义UI
z-game:使用纯 pixi.js 和 box2d 测试项目
07-12
本项目“z-game”就是一个利用纯JavaScript库Pixi.js和Box2D物理引擎构建的Web游戏测试案例，它为我们展示了如何在浏览器环境中实现复杂的游戏逻辑和物理模拟。 Pixi.js，全称为“2D WebGL渲染器”，是一个强大的...
spine:支持Spine的Pixi.js插件
05-13
pixi-spine 适用于PixiJS v5和v6的Spine 3.7、3.8、4.0实现。 Typescript定义是PixiJS v6的最新版本。 对于spine <3.7，支持是有限的，但接受runtime...import * as PIXI from 'pixi.js' ; import { Spine } from
thing-editor:基于pixi.js的视觉游戏编辑器
04-28
编辑器pixi.js的视觉游戏编辑器5。 正在测试Beta版的项目。安装请检查您是否有最新的NodeJS，NPM，Chrome和ffmpeg的计算机上，installlation之前。 使用下一个脚本来安装编辑器和示例项目。 成功安装后，编辑器应...
PIXI.TextInput:pixi.js插件，提供了一种向pixijs阶段添加文本输入的便捷方法
05-08
PIXI.TextInput-pixi.js的插件 关于 pixi.js的此插件提供了一种将文本输入添加到pixijs阶段的便捷方法。 输入本身是一个HTML <input>元素，根据PIXI-DisplayObject给出的转换，该元素位于舞台的上方。 该框在...
interaction:pixi.js 的交互插件
05-31
pixi.js 的交互插件。 安装 npm i @iro/interaction 为什么使用它 统一事件类型，仅限Pointer事件。 Pointerout和Pointerupoutside有target 。 用法 // webpack.config.js plugins: [ new webpack . ...
前端游戏引擎之PIXIJS小demo
xuchangqi的博客
10-17 578
前言 Pixi.js使用WebGL，是一个超快的HTML5 2D渲染引擎。作为一个Javascript的2D渲染器，Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动。 Pixi渲染器可以使开发者享受到硬件加速，但并不需要了解WebGL。 准备工作 1. 创建一个vue项目，这里就不做过多讲...
uni-app中使用pixijs绘制兼容H5和微信小程序大转盘游戏
最新发布
lyj168997的博客
12-07 1198
上边的文件是使用的pixi-miniprogram。代码中的data.js为mock数据如下。
css2.2 层叠顺序 z-index
yuliying的专栏
01-07 319
来自: https://www.w3.org/TR/CSS22/visuren.html#z-index Within each stacking context, the following layers are painted in back-to-front order: the background and borders of the element fo
pixi.js教程中文版--基础篇
weixin_30652271的博客
11-10 956
前言 Pixi.js使用WebGL，是一个超快的HTML5 2D渲染引擎。作为一个Javascript的2D渲染器，Pixi.js的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动。 Pixi渲染器可以开发者享受到硬件加速，但并不需要了解WebGL。 网上暂时没有找到关于 pixi.js的中文说明文档，我这里仅是记录项目中使用...
uniapp pixi.js
08-24
＊＊＊于Vue.js的跨平台应用开发框架，而Pixi.js是一个强大的2D WebGL渲染引擎。结合使用UniApp和Pixi.js可以在UniApp中创建高性能的跨平台2D游戏或应用。 要在UniApp中使用Pixi.js，首先需要安装Pixi.js库。可以通过npm或者yarn来安装： ``` npm install pixi.js ``` 安装完成后，在需要使用Pixi.js的页面或组件中引入Pixi.js库： ```javascript import * as PIXI from 'pixi.js'; ``` 然后就可以在Vue组件中使用Pixi.js的功能了，比如创建画布、绘制图形、添加交互等。以下是一个简单的例子： ```html <template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> import * as PIXI from 'pixi.js'; export default { mounted() { const app = new PIXI.Application({ width: 300, height: 300, view: this.$refs.canvas, }); const graphics = new PIXI.Graphics(); graphics.beginFill(0xFF0000); graphics.drawRect(0, 0, 100, 100); graphics.endFill(); app.stage.addChild(graphics); }, }; </script> ``` 以上代码在mounted钩子函数中创建了一个300x300的画布，然后绘制了一个红色的矩形，并将其添加到舞台中。最后将画布绑定到ref="canvas"的元素上。 这只是一个简单的示例，你可以根据自己的需求使用Pixi.js的更多功能和特性来开发复杂的UniApp应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值