swift - SwiftUI - 使用自定义绘图包装 UIView 时出现 UIViewRepresentable 故障

Question

我有一张在 PaintCode 中制作的图像，我想制作动画。PaintCode 为 UIKit 提供了绘图功能，而不是 SwiftUI。因此，为了进行测试，我可以使用以下 VC 在 UIKit 中实现它：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var paintCode: PaintCodeView!
    @IBOutlet weak var slider: UISlider!

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    @IBAction func sliderMoved(_ sender: Any) {
        paintCode.progress = CGFloat(slider.value)
    }

}

class PaintCodeView: UIView {

    private var _progress: CGFloat = 0.0

    var progress: CGFloat {
        set {
            if newValue < 0 {
                _progress = 0
            } else if newValue > 1 {
                _progress = 1
            } else {
                _progress = newValue
            }
            setNeedsDisplay()
        }
        get {
            return _progress
        }
    }

    override func draw(_ rect: CGRect) {
        LinkStyles.drawLogoAnimated(frame: self.bounds, resizing: .aspectFit, animationProgress: _progress)
    }

}

但是，如果我尝试将相同的绘图 UIView 包装在 UIViewRepresentable 中以在 SwiftUI 中使用，它不会按预期绘制它，而是具有黑色背景和故障动画。

import SwiftUI
import UIKit

struct TestView: View {

    @State var progress: Float = 0.0

    var body: some View {
        VStack {
            Logo(animationProgress: $progress)
                .frame(width: 300, height: 300)
            Text("\(progress)")
            Slider(value: $progress)
                .padding(.horizontal)
        }
    }
}

struct Logo: UIViewRepresentable {

    @Binding var animationProgress: Float

    func makeUIView(context: Context) -> PaintCodeView {
        print("LinkLogo Make: \(animationProgress)")
        let view = PaintCodeView()
        view.progress = CGFloat(animationProgress)
        return view
    }

    func updateUIView(_ logoView: PaintCodeView, context: Context) {
        logoView.progress = CGFloat(animationProgress)
    }
}

class PaintCodeView: UIView {

    private var _progress: CGFloat = 0.0

    var progress: CGFloat {
        set {
            if newValue < 0 {
                _progress = 0
            } else if newValue > 1 {
                _progress = 1
            } else {
                _progress = newValue
            }
            setNeedsDisplay()
        }
        get {
            return _progress
        }
    }

    override func draw(_ rect: CGRect) {
        LinkStyles.drawLogoAnimated(frame: self.bounds, resizing: .aspectFit, animationProgress: _progress)
    }

}

知道我做错了什么吗？

Answer 1

您需要在 UIView 子类（在下面的示例中class MyWidgetView）中将背景颜色设置为 .clear 以删除黑色背景。

import UIKit

class MyWidgetView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        super.backgroundColor = UIColor.clear
    }
    
    required init?(coder: NSCoder) {
        fatalError()
    }
    
    override func draw(_ rect: CGRect) {
        PaintCodeClass.drawWidget(frame: self.bounds)
    }
}

struct ObstacleView: UIViewRepresentable {
    func makeUIView(context: Context) -> some UIView {
        ObstacleUIView()
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {
        
    }
}