Автоматизирую дизайн в Адобе и генерю полиграфический PDF в браузерах в @anycrafttech. Для связи: @turulin
Иронизирую про жизнь в городе тут: @brgmstr
Post #140
549
Элементы дизайна и барьеры
Проблема
Сейчас работаю над проектом, где надо генерить элементы по координатам. А ещё в этом проекте есть подписи списков, когда несколько элементов списка имеют один выносной заголовок. И в обоих этих случаях возможны наложения элементов друг на друга.
Пока эти случаи были единичными, я локально, то есть в самом месте рисования, смещал объекты на возможное расстояние. Но когда ситуация усложнилась (несколько «границ» в разных направлениях), появилось слишком много повторений кода, но с похожими действиями.
Поэтому сделал отдельный модуль «Элементы дизайна и барьеры». Уверен, что это не уникальная разработка, можно было бы нагуглить, но решил сделать свою, потому что в генерации дизайна она точно пригодится ещё не один раз.
Решение — новый модуль
Суть модуля простая: у документа, например pdf-файла, есть место, где возможно пересечение элементов. Я инициализирую модуль, передаю ему элементы дизайна (которые можно двигать), барьеры (которые нельзя двигать) и границы возможного смещения. Элементы дизайна, включая барьеры, не рисуются в этот момент, а как бы складываются в «память файла» — в кэш.
И когда все элементы дизайна созданы и переданы в модуль, выполняется главный метод — запустить смещения. Модуль перебирает все барьеры и элементы дизайна, определяет зоны пересечения. Согласно доступным границам и разрешённым направлениям смещения модуль сам решает, куда попытаться сместить элементы.
Если в результате смещения элементы дизайна всё равно не могут поместиться (например, находятся между двумя барьерами или близко от границы), то выполняется альтернативное (настраиваемое) решение. Зачастую это просто «Не рисовать объект», если разрешают правила дизайна. Но если надо обязательно отрисовать, то можно и сместить барьер, если у него выставлены свои границы смещения. Или «уместить» объект (такое можно делать с текстами — уменьшить размер шрифта).
И после этой всей логики мы рисуем объекты «из кэша». Готово.
Перспектива
Из интересных функций, которые удалось получить после создания модуля, стал механизм сортировки элементов дизайна по их пересечениям с барьерами. То есть чем больше пересекается элемент с барьером, тем раньше надо пытаться его смещать. И после удачного смещения превращать в барьер, чтобы уже следующие элементы не пересекали предыдущие.
В общем, очередная полезная функция, где сотня математических операций в циклах. Но главное — я сделал этот модуль универсальным. Можно запускать и в Адобе (Иллюстратор или Индизайн), и в браузерах. Потому что достаточно, чтобы у передаваемых элементов были свойства x, y, width, height и метод draw().
Проблема
Сейчас работаю над проектом, где надо генерить элементы по координатам. А ещё в этом проекте есть подписи списков, когда несколько элементов списка имеют один выносной заголовок. И в обоих этих случаях возможны наложения элементов друг на друга.
Пока эти случаи были единичными, я локально, то есть в самом месте рисования, смещал объекты на возможное расстояние. Но когда ситуация усложнилась (несколько «границ» в разных направлениях), появилось слишком много повторений кода, но с похожими действиями.
Поэтому сделал отдельный модуль «Элементы дизайна и барьеры». Уверен, что это не уникальная разработка, можно было бы нагуглить, но решил сделать свою, потому что в генерации дизайна она точно пригодится ещё не один раз.
Решение — новый модуль
Суть модуля простая: у документа, например pdf-файла, есть место, где возможно пересечение элементов. Я инициализирую модуль, передаю ему элементы дизайна (которые можно двигать), барьеры (которые нельзя двигать) и границы возможного смещения. Элементы дизайна, включая барьеры, не рисуются в этот момент, а как бы складываются в «память файла» — в кэш.
И когда все элементы дизайна созданы и переданы в модуль, выполняется главный метод — запустить смещения. Модуль перебирает все барьеры и элементы дизайна, определяет зоны пересечения. Согласно доступным границам и разрешённым направлениям смещения модуль сам решает, куда попытаться сместить элементы.
Если в результате смещения элементы дизайна всё равно не могут поместиться (например, находятся между двумя барьерами или близко от границы), то выполняется альтернативное (настраиваемое) решение. Зачастую это просто «Не рисовать объект», если разрешают правила дизайна. Но если надо обязательно отрисовать, то можно и сместить барьер, если у него выставлены свои границы смещения. Или «уместить» объект (такое можно делать с текстами — уменьшить размер шрифта).
И после этой всей логики мы рисуем объекты «из кэша». Готово.
Перспектива
Из интересных функций, которые удалось получить после создания модуля, стал механизм сортировки элементов дизайна по их пересечениям с барьерами. То есть чем больше пересекается элемент с барьером, тем раньше надо пытаться его смещать. И после удачного смещения превращать в барьер, чтобы уже следующие элементы не пересекали предыдущие.
В общем, очередная полезная функция, где сотня математических операций в циклах. Но главное — я сделал этот модуль универсальным. Можно запускать и в Адобе (Иллюстратор или Индизайн), и в браузерах. Потому что достаточно, чтобы у передаваемых элементов были свойства x, y, width, height и метод draw().
- 🔥 4
- 👏 2
- 👍 1
