ios - 如何让 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 呢?
解决方案
在 SwiftUI 视图中,将 ignoresSafeArea() 修饰符添加到 ContentView。
var body: some View {
ContentView().ignoresSafeArea()
}
推荐阅读
- docker - docker-compose 启动单个容器
- python - 将特定公式应用于熊猫数据框
- html - 如何在高度为 100Vh 的页面上添加 100vh 的标题图像?
- windows - PowerShell中的管道:不将参数绑定到参数
因为它是空的 - c++ - 给定一个非空整数数组 nums,每个元素出现两次,除了一个。使用散列找到那个单一的
- php - 未捕获的错误:调用未定义的方法 mysqli_stmt::fetchAll()
- css - NextJS 的自定义 CSS 支持
- reactjs - 反应路由器 CSSTransition
- python-3.x - Python while 循环仅检查第一个 if 语句 (discord.py)
- javascript - 基于另一列的值着色标记 - plotly.js