ios - 使用 PDF 矢量图像作为内容时 CALayer 模糊

Question

我正在尝试使用 PDF 矢量图像作为 CALayer 的内容，但是当它缩放到超过其初始大小 15x13 时，它看起来非常模糊。我在我的 Assets 目录中为相关图像打开了“保留矢量数据”。这是我的 View 的代码，如果 isComplete 属性设置为 真。

@IBDesignable
public class GoalCheckView: UIView {

    // MARK: - Public properties

    @IBInspectable public var isComplete: Bool = false {
        didSet {
            setNeedsLayout()
        }
    }

    // MARK: - Private properties

    private lazy var checkImage: UIImage? = {
        let bundle = Bundle(for: type(of: self))
        return UIImage(named: "check_event_carblog_confirm", in: bundle, compatibleWith: nil)
    }()

    private var checkImageSize: CGSize {
        let widthRatio: CGFloat  = 15 / 24 // Size of image is 15x13 when circle is 24x24
        let heightRatio: CGFloat = 13 / 24
        return CGSize(width: bounds.width * widthRatio, height: bounds.height * heightRatio)
    }

    private let circleLayer = CAShapeLayer()
    private let checkLayer = CALayer()
    private let lineWidth: CGFloat = 1

    // MARK: - View lifecycle

    public override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    public required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }

    public override func layoutSubviews() {
        super.layoutSubviews()

        // Layout circle
        let path = UIBezierPath(ovalIn: bounds.insetBy(dx: lineWidth / 2, dy: lineWidth / 2))
        circleLayer.path = path.cgPath

        // Layout check
        checkLayer.frame = CGRect(
            origin: CGPoint(x: bounds.midX - checkImageSize.width / 2, y: bounds.midY - checkImageSize.height / 2),
            size: checkImageSize
        )
        checkLayer.opacity = isComplete ? 1 : 0
    }

    // MARK: - Private methods

    private func setupView() {

        // Setup circle layer
        circleLayer.lineWidth = lineWidth
        circleLayer.fillColor = nil
        circleLayer.strokeColor = UIColor(named: "goal_empty", in: bundle, compatibleWith: nil)?.cgColor
        layer.addSublayer(circleLayer)

        // Setup check layer
        checkLayer.contentsScale = UIScreen.main.scale
        checkLayer.contentsGravity = .resizeAspect
        checkLayer.contents = checkImage?.cgImage
        layer.addSublayer(checkLayer)
    }
}

如果我将 View 的大小设置为 240x240，此代码会产生以下显示:

Answer 1

我能够为此创建一个解决方法。我可以在 layoutSubviews 中检查图像的预期大小，如果它与 UIImage 的大小不匹配，我可以使用 UIGraphicsImageRenderer 来创建一个缩放到正确大小的新图像。我创建了 UIImage 的扩展来促进这一点:

extension UIImage {

    internal func imageScaled(toSize scaledSize: CGSize) -> UIImage {
        let renderer = UIGraphicsImageRenderer(size: scaledSize)
        let newImage = renderer.image { [unowned self] _ in
            self.draw(in: CGRect(origin: .zero, size: scaledSize))
        }
        return newImage
    }
}

现在，我更新的 layoutSubviews 方法如下所示:

public override func layoutSubviews() {
    super.layoutSubviews()

    // Layout circle
    let path = UIBezierPath(ovalIn: bounds.insetBy(dx: lineWidth.mid, dy: lineWidth.mid))
    circleLayer.path = path.cgPath

    // Layout check
    if let checkImage = checkImage, checkImage.size != checkImageSize {
        checkLayer.contents = checkImage.imageScaled(toSize: checkImageSize).cgImage
    }
    let checkOrigin  = CGPoint(x: bounds.midX - checkImageSize.midW, y: bounds.midY - checkImageSize.midH)
    checkLayer.frame = CGRect(origin: checkOrigin, size: checkImageSize)
}

这会产生漂亮清晰的图像: