如何实现PKCanvasView在固定背景中悬浮平移与居中缩放？

完整修正代码 #

import SwiftUI
import PencilKit

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

struct CanvasView: UIViewRepresentable {
    // 自定义白色画布尺寸
    private let canvasContentSize = CGSize(width: 1500, height: 1000)
    // 背景灰色
    private let backgroundColor = UIColor(red: 0.9, green: 0.9, blue: 0.9, alpha: 1.0)
    // 白色画布颜色
    private let canvasColor = UIColor.white
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    func makeUIView(context: Context) -> PKCanvasView {
        let canvasView = PKCanvasView()
        
        // 基础画布配置
        canvasView.contentSize = canvasContentSize
        canvasView.drawingPolicy = .anyInput
        canvasView.minimumZoomScale = 0.2
        canvasView.maximumZoomScale = 4.0
        
        // 关键：区分背景色和画布色
        canvasView.backgroundColor = backgroundColor
        canvasView.overrideBackgroundColor = canvasColor
        
        // 设置代理处理缩放居中
        canvasView.delegate = context.coordinator
        
        // 初始状态让画布居中
        centerCanvas(canvasView)
        
        // 工具选择器配置
        let toolPicker = PKToolPicker()
        toolPicker.setVisible(true, forFirstResponder: canvasView)
        toolPicker.addObserver(canvasView)
        canvasView.becomeFirstResponder()
        
        return canvasView
    }
    
    func updateUIView(_ uiView: PKCanvasView, context: Context) {}
    
    // 画布居中逻辑
    private func centerCanvas(_ canvasView: PKCanvasView) {
        let boundsSize = canvasView.bounds.size
        let contentSize = canvasView.contentSize
        let zoomScale = canvasView.zoomScale
        
        // 计算水平偏移：确保画布不会超出屏幕左侧/右侧
        let horizontalOffset = max((boundsSize.width - contentSize.width * zoomScale) / 2, 0)
        // 计算垂直偏移：确保画布不会超出屏幕顶部/底部
        let verticalOffset = max((boundsSize.height - contentSize.height * zoomScale) / 2, 0)
        
        canvasView.contentOffset = CGPoint(x: horizontalOffset, y: verticalOffset)
    }
    
    // 处理滚动/缩放代理逻辑
    class Coordinator: NSObject, UIScrollViewDelegate {
        var parent: CanvasView
        
        init(_ parent: CanvasView) {
            self.parent = parent
        }
        
        func scrollViewDidZoom(_ scrollView: UIScrollView) {
            guard let canvasView = scrollView as? PKCanvasView else { return }
            parent.centerCanvas(canvasView)
        }
    }
}

关键修改说明 #

1. 区分背景与画布颜色

   • 把PKCanvasView的backgroundColor设为灰色（作为整体背景）
   • 使用overrideBackgroundColor设置绘图区域为白色，这是PKCanvasView专门用来定义画布背景的属性，之前错误地把整个视图背景设为灰色，导致看不到白色画布。

2. 修复缩放偏移问题

   • 通过UIScrollViewDelegate的scrollViewDidZoom方法，在每次缩放后重新计算contentOffset，确保画布始终居中显示。
   • centerCanvas方法会根据当前屏幕尺寸、画布尺寸和缩放比例，计算出正确的偏移量，避免画布缩放到角落。

3. 修正视图初始化逻辑

   • 移除了原代码中错误的@State存储PKCanvasView实例的写法，UIViewRepresentable应该在makeUIView中创建新的视图实例，避免状态混乱。
   • 添加ignoresSafeArea()让画布占满整个屏幕，符合预期的全屏灰色背景效果。

为什么之前的尝试无效？ #

• 直接给CanvasView加SwiftUI背景：PKCanvasView默认是不透明的，会完全覆盖掉SwiftUI层面的背景色，所以看不到灰色。
• 设置PKCanvasView背景为红色：这会把整个滚动视图包括画布区域都改成红色，没有区分背景和画布的层级。

内容的提问来源于stack exchange，提问作者erotsppa