首页 > 解决方案 > 如何让 SwiftUI Canvas 像普通的 ViewController 一样绘制顶部和底部?

问题描述

我有一个如下的画布视图

class Canvas: UIView {
    
    override func draw(_ rect: CGRect){
        super.draw(rect)
        
        guard let context = UIGraphicsGetCurrentContext() else { return }
        
        paths.forEach { path in
            switch(path.type) {
            case .move:
                context.move(to: path.point)
                break
            case .line:
                context.addLine(to: path.point)
                break
            }
        }
        
        context.setLineWidth(10)
        context.setLineCap(.round)
        context.strokePath()
    }
    
    var paths = [Path]()
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let point = touches.first?.location(in: self) else { return }
        paths.append(Path(type: .move, point: point))
        setNeedsDisplay()
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let point = touches.first?.location(in: self) else { return }
        paths.append(Path(type: .line, point: point))
        setNeedsDisplay()
    }
}

class Path {
    let type: PathType
    let point: CGPoint
    
    init(type: PathType, point: CGPoint) {
        self.type = type
        self.point = point
    }
    
    enum PathType {
        case move
        case line
    }
}

当我使用普通 ViewController 将其包装如下

class ViewController: UIViewController {
    
    let canvas = Canvas()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(canvas)
        canvas.backgroundColor = .white
        canvas.frame = view.frame
    }
}

我可以绘制到设备的顶部和底部,如下图所示

在此处输入图像描述

但是,如果我将它包装在 SwiftUI 中,如下所示

struct ContentView : UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        Canvas()
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        uiView.backgroundColor = .white
    }
}

我无法再在设备的顶部和底部进行绘制,如下图所示

在此处输入图像描述

我怎么能改变它,使它允许我绘制到顶部和底部的 SwiftUI 呢?

标签: iosswiftswiftui

解决方案


在 SwiftUI 视图中,将 ignoresSafeArea() 修饰符添加到 ContentView。

var body: some View {
    ContentView().ignoresSafeArea()    
}

推荐阅读