Pixi.js: 提供一个在容器上设置固定范围的选项

创建于 2016-09-23  ·  15评论  ·  资料来源: pixijs/pixi.js

我遇到了一个问题,我在容器内绘制了一些东西,然后立即重新计算了容器的边界。 尽管该特定示例当然是人为设计的-实际上,我只会绘制一次这样的内容,但我可以看到很多来自此行为的潜在问题(例如,假设我将一些屏幕外项目放到了容器中,用户可以从侧面轻扫,这将完全破坏我现在在那里的捕捉逻辑)。

💾 v4.x (Legacy) 🤔 Question

最有用的评论

@megakoresh ,我想我知道是什么在引起混乱。 由于pixi的主要目的是渲染2D对象,因此几乎所有API都为此目的而设计。 界限可能会特别令人困惑。

在pixi中,Sprite的边界由纹理定义。 即,渲染对象的最终结果的大小。 同样,由于容器不是“绘制”的,因此容器的边界由其包含的子代定义。 特别是受那些孩子们的限制。 对于Graphics对象,边界由您在其中绘制的几何定义。 如果在图形对象中在当前边界之外绘制另一个矩形,则边界会扩展为包括新绘制的几何图形。

希望这是有道理的,并且可以让您快速了解Pixi如何构造边界。

现在,专门针对您的示例,我相信您的问题是由于对图形对象的边界如何工作的误解引起的。 我认为您不知道绘制网格会更改包含绿色矩形( wonderfulRectangle )的Graphics对象( desktop1 )的边界。

您可以看到,在第一次绘制后,您的网格超出了视口的大小:

image

这扩展了父Graphics对象( desktop1 )的边界,以包括视口外几何图形。 这会使您的宽度变大,从而使您无法进行下一次网格计算,并且循环继续进行。 请记住,线条有粗细,因此占用宽度。

有几种方法可以解决此问题,想到的是,由于网格填满了视口的整个大小,因此仅使用视口的大小而不是父代的大小即可。 这意味着/当您在视口外绘制更多几何图形时,网格计算永远不会改变。 因为渲染视口不会更改大小。

如果这不是一个选项,例如您的网格区域不是视口的大小。 您可以根据网格区域的“已知大小”进行计算。 我想这就是Ivan想要说的关于使用静态Rectangle实例的内容。 基本上,确定您的网格为800x600,然后根据该网格进行计算,而是运行场景中对象的实际渲染范围。

我已经更新了Codepen以使用我描述的视口方法。 如果您还有其他问题,请告诉我!

http://codepen.io/anon/pen/yarVwm?editors=0010

所有15条评论

容器没有面积和固定范围,它只是子代的集合,这是PIXI的默认行为。 如果要修复边界,请扩展自己的容器,重写“ calculateBounds”方法。

如果它没有面积和固定范围,并且本质上只是一个数据结构,那么它就不会影响渲染(类似于如果将太大的对象放入iframe中,iframe不会变大) 。 在示例中,它确实可以做到,我发现很难将其归咎于示例的错误逻辑。 也许没有固定的边界选项并不能解决问题的根源,但是问题肯定存在。

您如何建议我实施“屏幕外”元素?

您为什么仍然需要界限?

您看过这个例子了吗? 奇怪的行为是由于以下事实导致的:每次drawDebugLines被执行并在“ icon's”容器中绘制线条时,该容器就会变大。 这反过来又使捕捉点混乱,因为捕捉点取决于容器的尺寸(宽度/列,高度/行)。

如果将贴图映射到呈现2个问题的渲染元素:渲染器取决于屏幕尺寸,方向,像素密度和用户指定的绘画元素尺寸。 它可以包含大于它的项目(例如,可以滑入屏幕外),也可以包含较小的项目(例如,如果我同时显示Desktop 1和Desktop2。在所有这些情况下,必须保留捕捉和其他约束) 。

lel.width = wonderfulRectangle.width * 0.8;
lel.height = wonderfulRectangle.height * 0.9;

为什么不使用它作为常量? 您可以像这样设置全局的东西吗?

var globalRect = new PIXI.Rectangle(0, 0, renderr.width/renderer.resolution, renderer.height/renderer.resolution);

每次调整大小时都更新该矩形,并使用该矩形。 为什么需要“ lel.width”和“ lel.height”?

LEL。 那与任何东西都无关,它只是一个可以移动的Sprite,我设置宽度和高度是因为原始图像太大,我需要将其调整为矩形。 如果您在中查看代码,您将看到该“图标”的主要容器是desktop1,这是我尝试将其图标捕捉到的容器。 那个属于desktopLayer,而desktopLayer是我登上舞台的那个。

我要模拟的是具有多个可滑动视图和桌面背景上的图标网格的Android启动器屏幕的行为。

return new PIXI.Point(snapPosX.clamp(0, target.parent.width), snapPosY.clamp(0, target.parent.height));

我还是不明白你想要什么。 PIXI容器边界的工作原理与预期的完全相同。 您不是第一个犯此错误的人。

造物主的呼吸,我不能再这样做了。 任何人都可以看一下示例,随意走动,告诉我为什么这样的废话正在发生,这是PIXI中的错误/缺失功能还是我的代码有误?

我认为那是因为您的线条实际上会影响容器的宽度和高度,并且您首先使用这些属性绘制线条。

Codepen也不再以某种方式为我工作。 有什么想法吗?

是的,它对我来说很糟糕,也是因为我不小心注释了初始化调用,不好,抱歉,已修复。 是的,您是正确的-这就是我的工作,我没有其他方法可以绘制这些线以直观地反映网格。 那么,您究竟会建议我画些什么? 设置某种单独的仅元数据的Rectangle对象,该对象始终复制其关联的渲染容器的尺寸,并使用该对象导出捕捉点和其他位置? 这似乎是围绕问题过度设计而不是解决问题。 有什么原因使得容器不能像普通DOM元素那样出现“溢出”?

我将其发布为问题不是因为没有解决方案,而是因为我看不到这种不合逻辑行为的正当性。 特别是因为这些线实际上并没有超出容器边界,所以它们从一条边到另一条边被绘制。 在我正在构建的产品中,希望用户与内容进行很多交互,我担心如果必须为场景中的每个对象设置“参考矩形”,则代码将非常混乱并且难以维护。

您提到我的代码中有一个“错误”。 那是什么错? 我进行了彻底的搜索,但找不到任何错误的逻辑。

使用一些全局变量代替正在更改的“宽度/高度”。 在需要时更新该变量。

var globalRect = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

如果要使用“局部”范围,则进行设置,但不要使用与pixi相同的变量:

container.myRect = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

错误是PIXI根本没有布局。 “宽度”和“高度”具有不同的含义。 您不能按父级宽度高度钳制子坐标,因为子级会影响它们。

PIXI无法知道您想要在图形内部绘制的某个矩形的宽度/高度,而不是整个图形范围(如果也有圆呢?),而不是子范围。 边界的唯一合理逻辑是将所有内容都带入边界。

想象一下,我们有两个精灵的容器,每个精灵都有(w = 10,h = 10),一个在(0,0)中,第二个在(100000,100000)中。 容器有什么宽度和高度? 另外,即使我们以某种方式修复了边界,它们也会影响什么?

如果我们想以某种方式更改宽度和高度,该更改将如何影响容器内的元素?

我不是在开玩笑,这让我很难想象其他API设计。 如果您有任何想法,可能是布局的附加组件,请在此处编写。 请记住,我们正在处理舞台渲染,而不是某些GUI,性能才是真正的问题。

@megakoresh ,我想我知道是什么在引起混乱。 由于pixi的主要目的是渲染2D对象,因此几乎所有API都为此目的而设计。 界限可能会特别令人困惑。

在pixi中,Sprite的边界由纹理定义。 即,渲染对象的最终结果的大小。 同样,由于容器不是“绘制”的,因此容器的边界由其包含的子代定义。 特别是受那些孩子们的限制。 对于Graphics对象,边界由您在其中绘制的几何定义。 如果在图形对象中在当前边界之外绘制另一个矩形,则边界会扩展为包括新绘制的几何图形。

希望这是有道理的,并且可以让您快速了解Pixi如何构造边界。

现在,专门针对您的示例,我相信您的问题是由于对图形对象的边界如何工作的误解引起的。 我认为您不知道绘制网格会更改包含绿色矩形( wonderfulRectangle )的Graphics对象( desktop1 )的边界。

您可以看到,在第一次绘制后,您的网格超出了视口的大小:

image

这扩展了父Graphics对象( desktop1 )的边界,以包括视口外几何图形。 这会使您的宽度变大,从而使您无法进行下一次网格计算,并且循环继续进行。 请记住,线条有粗细,因此占用宽度。

有几种方法可以解决此问题,想到的是,由于网格填满了视口的整个大小,因此仅使用视口的大小而不是父代的大小即可。 这意味着/当您在视口外绘制更多几何图形时,网格计算永远不会改变。 因为渲染视口不会更改大小。

如果这不是一个选项,例如您的网格区域不是视口的大小。 您可以根据网格区域的“已知大小”进行计算。 我想这就是Ivan想要说的关于使用静态Rectangle实例的内容。 基本上,确定您的网格为800x600,然后根据该网格进行计算,而是运行场景中对象的实际渲染范围。

我已经更新了Codepen以使用我描述的视口方法。 如果您还有其他问题,请告诉我!

http://codepen.io/anon/pen/yarVwm?editors=0010

哈哈k。 因此,在您的共同努力下,我认为我理解了问题的核心:我认为,如果该库经常与画布库放在一起,则我认为这是同一件事,但事实并非如此。 我想然后要照顾视觉对象分组,并且像溢出之类的事情很简单,不在范围内(也许当我学习更多的库时,我可以为此做一个插件),我需要自己照顾那些事情,而PIXI自己要照顾只是在屏幕上显示东西。 结案了,谢谢。

该线程已被自动锁定,因为它关闭后没有任何近期活动。 请为相关错误打开新一期。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

ppoliani picture ppoliani  ·  24评论

bigtimebuddy picture bigtimebuddy  ·  43评论

doebi picture doebi  ·  30评论

andrevenancio picture andrevenancio  ·  29评论

trusktr picture trusktr  ·  30评论