如何调整 CALayer 大小以适应父视图

Posted

技术标签:

【中文标题】如何调整 CALayer 大小以适应父视图【英文标题】:How to adjust CALayer size in order to fit the parent view 【发布时间】:2020-07-29 20:13:06 【问题描述】:

我创建了一个与父级大小相同的分层视图(使用 PocketSVG 的 SVGImageView):

var body: some View 
            GeometryReader  reader in
                SVGImageLayered("world", width: reader.size.width, height: reader.size.height)
                    .frame(width: reader.size.width, height: reader.size.height, alignment: .center)
...

SVGImageLayered 定义如下:

struct SVGImageLayered: UIViewRepresentable 
    var resourcePath: String
    var frameWidth: CGFloat
    var frameHeight: CGFloat
    init(_ resourceName: String, width: CGFloat, height: CGFloat) 
        resourcePath = resourceName
        frameWidth = width
        frameHeight = height
    
    func makeUIView(context: Context) -> UIView 
        let svgView = UIView(frame: UIScreen.main.bounds)
        let url = Bundle.main.url(forResource: resourcePath, withExtension: "svg")!
        
        let paths = SVGBezierPath.pathsFromSVG(at: url)
        let imageLayer = CALayer()
        for (index, path) in paths.enumerated() 
            let shapeLayer = CAShapeLayer()
            shapeLayer.path = path.cgPath
            imageLayer.addSublayer(shapeLayer)
        
        imageLayer.frame = CGRect(x: 0, y: 0, width: frameWidth, height: frameHeight)
        svgView.layer.addSublayer(imageLayer)
        
        return svgView
    
    func updateUIView(_ view: UIView, context: Context) 
        
    

问题在于源 SVG 图像比父视图大,因此只有一部分可见。我希望源图像适合框架;与具有以下设置的 UIImageView 的情况相同:

imageView.frame = svgView.bounds
imageView.contentMode = .scaleAspectFit

有谁知道如何缩放源图像以适应框架?

【问题讨论】:

这无关紧要,但请注意,在 ios 14 中,您可以直接在资产目录中使用 SVG 并像任何其他图像一样显示它。 【参考方案1】:

问题在于您使用的是形状图层。形状图层具有路径。路径对层的大小一无所知!即使是零大小的形状图层也会以完全相同的方式显示其路径。

你需要调整的是路径。如果这是 UIBezierPath,applying a transform 可以轻松完成。

【讨论】:

谢谢。不过,我想,我必须以某种方式读取图像的大小来计算比例变换比,以便调整路径以适应屏幕。 是的,我的意思是图层的任何魔法属性都不会产生任何影响。形状将根据您提供的说明绘制。如果您不喜欢它的大小,您将不得不更改说明或不使用形状图层。

以上是关于如何调整 CALayer 大小以适应父视图的主要内容,如果未能解决你的问题,请参考以下文章

如何在不破坏图像纵横比的情况下调整 QImage 或 QML 图像的大小以适应父容器

如何调整我的堆栈视图的分布以适应不相等的视图大小?

如何调整标签大小以适应任何屏幕尺寸

如何在 React Native for Android 中调整字体大小以适应视图?

将 Xib 的大小调整为 swift 4 的屏幕大小

如何使用 Xcode 8 上的自动布局调整对象的大小以适应不同的屏幕尺寸?