CAGradientLayer 旋转后边缘像素化

问题描述 投票:0回答:1

所以我基本上试图创建一个带有渐变层的旋转视图,但是在转换(也称为旋转)视图后,边缘似乎相当像素化。一旦我注释掉旋转线,一切似乎都工作得很好。

任何关于我做错了什么/可以采取哪些措施来解决这个问题的见解都将非常感激。

渐变视图类:

import UIKit.UIView

class GradientView: UIView {
    
    // MARK: Layers
    lazy var gradientLayer: CAGradientLayer = {
        let l = CAGradientLayer()
        l.frame = self.bounds
        l.cornerRadius = 10
        l.colors = [UIColor.red.cgColor,
                    UIColor.orange.cgColor,
                    UIColor.yellow.cgColor]
        layer.insertSublayer(l, at: 0)
        return l
    }()
    
    // MARK: Lifecycle
    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }
    
    // MARK: Init
    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        commonInit()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    // MARK: Helpers
    private func commonInit() {
        clipsToBounds = true
        backgroundColor = .clear
        layer.masksToBounds = true
    }
}

视图控制器:

import UIKit

class ViewController: UIViewController {
    
    // MARK: Subviews
    private let gradientView = GradientView()
    
    // MARK: Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        configureSubviews()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        rotateView()
    }
    
    // MARK: Helpers
    private func configureSubviews() {
        configureGradientview()
        setLayout()
    }
    
    private func configureGradientview() {
        view.addSubview(gradientView)
        gradientView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    private func setLayout() {
        NSLayoutConstraint.activate([
            gradientView.centerXAnchor.constraint(
                equalTo: view.centerXAnchor
            ),
            gradientView.centerYAnchor.constraint(
                equalTo: view.centerYAnchor
            ),
            gradientView.widthAnchor.constraint(
                equalTo: view.widthAnchor,
                multiplier: 0.8
            ),
            gradientView.heightAnchor.constraint(
                equalTo: gradientView.widthAnchor,
                multiplier: 0.4
            )
        ])
    }
    
    private func rotateView() {
        let angleInDegrees = 10.0
        let angleInRadians = CGFloat(angleInDegrees * .pi / 180)
        gradientView.transform = CGAffineTransform(
            rotationAngle: angleInRadians
        )
    }
}

目前结果:

swift uiview uikit cagradientlayer
1个回答
0
投票

根据OP的评论...

为了解决“锯齿状边缘”,我们需要在视图的“根层”上启用抗锯齿功能:

gradientView.layer.allowsEdgeAntialiasing = true

顺便说一句,这与渐变层没有任何关系——我们可以用普通的

UIView
看到同样的问题。

© www.soinside.com 2019 - 2024. All rights reserved.