有什么方法可以在层的边缘周围实现边框图像（如 CSS 边框图像）？

Question

我想用 Swift4.2 实现一个像 CSS 这样的边框图像图案的图层，但我不知道该怎么做。

我在香港应用商店看到一个名为"PriPara" app https://itunes.apple.com/sg/app/pripara/id1039257927?mt=8 的应用程序，它有一个UITabBar 和一个UINavigationBar，它们有复杂的轮廓和一些图像图案。如下：

Whole screen, UITabBar, UINavigationBar

UITabBar 的边框上有类似花边的图像图案。 UINavigationBar 的边框上有一个类似珠宝的图像。

我已经知道我可以通过修改 CAShapeLayer class 的 "path" 属性来改变图层轮廓的形状，正如网站所说 https://medium.com/@philipp307/draw-a-custom-ios-tabbar-shape-27d298a7f4fa 。

但是，对于边框图像，我没有任何线索。虽然看起来 CSS 有 border-image 属性页面显示 https://css-generator.net/border-image/ ， Swift 没有。我是否必须使用一些外部库，或者没有办法实现它？

Answer 1

我已经基本解决问题了。

我选择了DonMag所说的使用简单图像的方式。也许这太简单了，但这就是我所能做的。

它使用了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

喜欢的话就在GitHub项目里点个星吧

有什么方法可以在层的边缘周围实现边框图像（如 CSS 边框图像）？

Is there any way to implement border-image around the edge of layer (like CSS border-image)?

xcode

ios

swift4.2