Pixi.js: Дайте возможность установить фиксированные границы для контейнера

Контейнер не имеет площади и фиксированных границ, это просто набор дочерних элементов, и это поведение PIXI по умолчанию. Если вы хотите исправить границы, расширьте свой собственный контейнер, переопределив метод «calculateBounds».

Если у него нет области и фиксированных границ и по сути это просто структура данных, это не должно влиять на рендеринг (аналогично тому, как если вы поместите слишком большой объект в iframe, iframe не станет больше) . В примере это явно так, и мне трудно винить в этом ошибочную логику примера. Возможно, отсутствие опции фиксированных границ не рассматривает корень проблемы, но проблема определенно существует.

Как вы посоветуете реализовать элементы "вне экрана"?

Зачем вообще нужны границы?

Вы видели пример? Странное поведение вызвано тем фактом, что каждый раз, когда drawDebugLines запускается и рисует линии в контейнере «значка», этот контейнер становится больше. Что, в свою очередь, портит точки привязки, поскольку они зависят от размеров контейнера (ширина / столбцы, высота / строки).

Если я сопоставлю привязку с элементом визуализации, это вызовет 2 проблемы: средство визуализации зависит от размера экрана, ориентации, плотности пикселей и заданных пользователем размеров элемента рисования. Он может содержать элементы, которые как больше его (например, за пределами экрана, которые могут вставляться), так и меньше (например, если я делаю рабочий стол 1 и рабочий стол 2 видимыми одновременно. Во всех этих случаях привязка и другие ограничения должны быть сохранены .

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. Это не имеет ничего общего, это просто спрайт, который можно перемещать, и я устанавливаю ширину и высоту, потому что исходное изображение слишком велико, и мне нужно поместить его в прямоугольник. Если вы посмотрите код в, вы увидите, что основным контейнером для этого «значка» является desktop1, и именно к нему я пытаюсь привязать значок. Он принадлежит desktopLayer, а desktopLayer - это тот, который я поставил на сцену.

Я пытаюсь имитировать поведение экрана Android Launcher с несколькими прокручиваемыми представлениями и сеткой значков на фоне рабочего стола.

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. Если есть идеи, может быть дополнительный компонент для верстки, напишите, пожалуйста, сюда. Просто помните, что мы имеем дело с рендерингом сцены, а не с графическим интерфейсом, реальная проблема - производительность.

Привет, @megakoresh , думаю, я знаю, что здесь вызывает путаницу. Поскольку основная цель pixi - визуализировать 2D-объекты, почти весь API ориентирован на это. Границы могут быть особенно запутанными.

В pixi границы спрайта определяются текстурой. То есть размер конечного результата визуализированного объекта. Точно так же, поскольку Контейнер _не нарисован_, и поэтому его границы определяются дочерними элементами, которые он содержит. В частности, этими детьми. Для объекта Graphics границы определяются геометрией, которую вы в нем рисуете. Если вы рисуете другой прямоугольник в объекте Graphics за пределами текущих границ, границы расширяются и включают вновь нарисованную геометрию.

Надеюсь, это имеет смысл и дает вам быстрое представление о том, как структурированы границы в Pixi.

Теперь, конкретно для вашего примера, я считаю, что ваша проблема возникает из-за непонимания того, как работают границы для объекта Graphics. Я думаю, вам не хватает того, что рисование вашей сетки меняет границы объекта Graphics ( desktop1 ), который содержит зеленый прямоугольник ( wonderfulRectangle ).

Вы можете видеть, что после первого рисования ваша сетка выходит за пределы области просмотра:

Это расширяет границы родительского объекта Graphics ( desktop1 ), чтобы включить геометрию вне области просмотра. Это увеличивает вашу ширину, что исключает ваш следующий расчет сетки, и цикл продолжается. Помните, что линии имеют толщину и поэтому принимают ширину.

Есть несколько способов исправить это, один из которых приходит в голову: поскольку ваша сетка заполняет весь размер области просмотра, просто используйте размер области просмотра, а не размер вашего родителя. Это означает, что если / когда вы рисуете больше геометрии за пределами области просмотра, ваши расчеты сетки никогда не изменятся. Поскольку область просмотра рендеринга не меняет размер.

Если это не вариант, например, ваша область сетки не соответствует размеру области просмотра. Вы можете просто делать расчеты на основе «известного размера» области сетки. Я думаю, это то, что Иван пытался сказать об использовании статического экземпляра Rectangle . По сути, решите, что ваша сетка имеет размер 800x600, и выполните вычисления, основанные на этом, а не на реальных визуализированных границах объектов в сцене.

Я обновил код, чтобы использовать описанный мной метод области просмотра. Дайте мне знать, если у вас возникнут дополнительные вопросы!

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

LOL k. Итак, благодаря вашим совместным усилиям, я думаю, что понимаю суть проблемы: мне кажется, я думал, что если библиотека часто объединяется с библиотеками холста, я предполагал, что это то же самое, что явно не так. Я думаю, что тогда забота о группировке визуальных объектов и таких вещах, как переполнение, проста и не входит в объем (возможно, когда я изучу библиотеку больше, я могу сделать для этого плагин), и мне нужно позаботиться об этих вещах сам, в то время как сам PIXI позаботится о просто отображать вещи на экране. Дело закрыто, спасибо.

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.