Как реализовать границу, заполненную изображением?

Question

[photosho]

Слева и справа по фрейму нужно провести границу, заполненную изображением. Заполнение только по вертикали и всегда должно быть по размеру фрейма - поэтому не делаю отдельным объектом, чтобы отдельно не пришлось менять высоту этого объекта в случае изменения размера фрейма. В фоновом изображении типа Tile не нашел, как включить заполнение только по одной оси. Подскажите, как такое реализовать.

Comments

[Pavel Designer]

Не совсем понял, что нужно.

В идеале покажите пример файла, где реализовано хоть как-то, пусть не так как нужно. И нарисуйте какой результат хочется получить.

[photosho]

Pavel Designer


Аналог на css - "background-repeat: repeat-y" и "background-position: left top". То есть, слева и справа полное заполнение фрейма фоном по вертикали, а по горизонтали заполнения быть не должно.

[Pavel Designer]

photosho, а ширина объекта с паттерном должна оставаться неизменной или меняется пропорционально изменению ширины основного фрейма? Под статичную ширину легко сделать и через компонент с tile внутри, выставив настройки constraints.
А вот если ширина меняется, нужно либо еще покрутить настройки, либо что-то альтернативное. Навскидку, для повторов сегмента можно сделать auto layout с рядом копий по вертикали (с запасом) чтобы при увеличении ширины открывалось больше видимых частей. Ну или сделать заранее большую по высоте картинку с вертикальным повтором сегментов и это одно изображение вставить в макет. В вёрстке-то всё равно будет иначе реализовано. Но не знаю на сколько большой может быть разница высоты фрейма и подойдёт ли такой вариант.

А про tile: использовать его по одной оси нельзя, как уже видно. Это противоречило бы самой сути инструмента.

[photosho]

Pavel Designer, интересовало именно, можно ли сделать автоматически заполняемые границы, которые сами будут масштабироваться. Если нет, придется делать по-другому. В Tile так сделать нельзя - это ясно, однако, явно, не хватает такого инструмента. Искал в настройках Stroke, но и там не нашел. В css есть специальное свойство "border-image" для подобных вещей, но здесь этого нет.

[photosho]

Pavel Designer, можно сделать через Auto Layout, как вы и говорили - по краям фреймы границ с фиксированной шириной, а в середине - контентный, с Fill. Но фоном было бы удобнее.

[Юрий Зеленковский]

photosho, измени тип заливки обводки с «Solid» на «Image».

[photosho]

Юрий Зеленковский, у Stroke только Solid, Dash и Custom. Ни в одном из вариантов нет возможности загрузить изображение.

[Юрий Зеленковский]

photosho, это стили обводки, а не тип заливки обводки.

Чтобы изменить тип заливки обводки, нужно открыть окно выбора цвета (color picker) и в верхней части этого окна выбрать необходимый тип.


Пожалуйста, ознакомься с этой статьёй справочного центра:
https://help.figma.com/hc/en-us/articles/360049283...

[photosho]

Юрий Зеленковский, да, похоже на то, что нужно, только изображение на правой границе выводится с середины - такое ощущение, что все равно при помощи Tile заполняется вся область фрейма, и какая часть изображения попадет на правую границу, та и выведется.