Есть ли способ реализовать border-image по краю слоя (например, CSS border-image)? - PullRequest
Новая
       24

Есть ли способ реализовать border-image по краю слоя (например, CSS border-image)?

0 голосов
/ 25 марта 2019

Я хотел бы реализовать слой с шаблоном изображения границы, например CSS, с помощью Swift4.2, но я понятия не имею, что делать.

Я видел приложение под названием "PriPara" https://itunes.apple.com/sg/app/pripara/id1039257927?mt=8, выпущенное в Гонконгском магазине приложений, в котором есть UITabBar и UINavigationBar, которые имеют сложные контуры и некоторые графические шаблоны вдоль них. Следующим образом:

Весь экран , UITabBar , UINavigationBar

UITabBar имеет кружевной рисунок на границе. У UINavigationBar есть изображение, похожее на ювелирные изделия, на его границе.

Я уже знаю, что могу изменить форму контура слоя, изменив свойство "path" класса CAShapeLayer, как говорится на веб-сайте https://medium.com/@philipp307/draw-a-custom-ios-tabbar-shape-27d298a7f4fa.

Но, что касается изображения границы, я понятия не имею. Хотя, похоже, что CSS имеет свойство border-image, как показывает страница https://css -generator.net / border-image / , Swift не имеет. Нужно ли использовать какие-то внешние библиотеки или нет способа реализовать это?

1 Ответ

0 голосов
/ 04 апреля 2019

Я в основном решил проблему.

Я выбрал способ использовать простое изображение, как говорит ДонМаг. Может быть, это слишком просто, но это все, что я могу.

Используется CAShapeLayer, UIBezierPath.

В исходном подклассе UITabBarController выполните следующий код: 

let shapeLayer = CAShapeLayer()

//Get CGPath.Original Layer will be expanded lengthwise.
shapeLayer.path = self.createLengthExpandShape()

//Set image
shapeLayer.fillColor = UIColor.init(patternImage: UIImage.init(named: "MyImage.png")!).cgColor

//Set layer
self.tabBar.layer.insertSublayer(shapeLayer, at: 0)

Самым сложным моментом является UIImage.init (colorPattern :). Вы можете использовать эту функцию, чтобы установить изображение в CAShapeLayer. Файл изображения используется вверх ногами во время выполнения. Таким образом, вы должны перевернуть его заранее с помощью краски или чего-то в этом роде. Также обратите внимание, что изображение помещено в верхний левый угол ОРИГИНАЛЬНОГО (до развернутого) слоя. Если вы изменили способ расширения CAShapeLayer, вам также следует настроить содержимое файла изображения.

Файл изображения: https://i.imgur.com/BYnkuXQ

Для всего проекта см. https://github.com/Satoru-PriChan/ChangeUITabBarAppearance

Если вам это нравится, нажмите Star в проекте GitHub.

...