如何在 PIXI.Graphics 中强制执行基元（圆、矩形、...）的顺序答案

【问题标题】：How to enforce an order of primitives (circle, rect,...) in PIXI.Graphics如何在 PIXI.Graphics 中强制执行基元（圆、矩形、...）的顺序
【发布时间】：2019-03-01 18:11:36
【问题描述】：

我正在尝试使用 PIXI.Graphics 在彼此之上绘制多个圆（具有不同的半径）；它看起来像这样：

declare var PIXI:any;
const particle = new PIXI.Graphics();

particle.beginFill(0xFFFF00).drawCircle(0,0,5).endFill(); //yellow
particle.beginFill(0xFFA500).drawCircle(0,0,3).endFill(); //orange

黄色圆圈始终绘制在橙色的顶部

然而，经过一番摆弄，似乎两个绘图命令的顺序并不能确定两个图形中的哪一个被渲染在前景中（更多的是由于颜色？！）。这可能源于 GPU 实现 -> 我不知道细节；

任何想法如何在图形中强制执行正确的 z 顺序？

【问题讨论】：

标签： graphics pixi.js

【解决方案1】：

我不确定你的问题到底是什么，因为对我来说它们确实以正确的顺序呈现，你可以在线查看这个小提琴：

https://www.pixiplayground.com/#/edit/2f5I0uuKBDq1i7HOMUoXh

半径较小的橙色圆圈被绘制在半径较大的黄色圆圈之上。

【讨论】：

感谢您设置示例（不知道 pixi 有自己的“小提琴”）;)
虽然它似乎在这里按预期工作，但它不适用于我的本地代码
你用的是什么版本的PIXI？
版本 5.0.0 alpha 3。也许我在某处犯了错误，但我认为在 Graphics 对象中绘制两个圆圈应该表现得某种“原子”
我可能会尝试使用更新的版本重新生成此问题，但由于上述小提琴似乎工作正常，我认为它必须是 alpha 3 版本（现在已经过时）或我的代码中有一些错误。