如何实现PKCanvasView全方向扩展的无限画布并保持视角稳定？

我是Swift移动端开发新手，想要实现一个PKCanvasView，当用户在画布边界附近绘图时，能向上下左右任意方向扩展画布，同时保持用户视角稳定（类似Apple Freeform的效果）。目前已实现向右、向下扩展，但左上方向扩展的用户体验不佳，希望复刻Freeform的无缝效果。

现有右下扩展代码 #

func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) {
    let threshold: CGFloat = 200  // 触发扩展的边界距离
    let growValue: CGFloat = 400  // 每次扩展的尺寸
    let drawingSize = canvasView.drawing.bounds
    
    if drawingSize.height >= (canvasView.contentSize.height - threshold) {
            canvasView.contentSize = CGSize(
                width: canvasView.contentSize.width + growValue,
                height: canvasView.contentSize.height + growValue
            )
        }
    }

尝试的偏移重定位代码（体验不佳） #

func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) {
  let threshold: CGFloat = 200  // 触发扩展的边界距离
  let growValue: CGFloat = 400  // 每次扩展的尺寸
  let drawingSize = canvasView.drawing.bounds

  // 检测四个边界
  if drawingSize.minX <= threshold {
    canvasView.contentSize.width += growValue
    canvasView.contentOffset.x -= growValue  // 尝试调整偏移保持视图稳定
  }
  if drawingSize.minY <= threshold {
    canvasView.contentSize.height += growValue
    canvasView.contentOffset.y -= growValue  // 尝试调整偏移保持视图稳定
  }
  if drawingSize.maxX >= (canvasView.contentSize.width - threshold) {
    canvasView.contentSize.width += growValue
  }
  if drawingSize.maxY >= (canvasView.contentSize.height - threshold) {
    canvasView.contentSize.height += growValue
  }
}

解决方案：全方向无缝扩展实现 #

核心思路是平移现有绘图内容来腾出左上方向的扩展空间，同时调整滚动偏移保持视角稳定，避免内容跳转。利用PKDrawing的translated(by:)API可以轻松实现整体绘图平移：

func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) {
    let threshold: CGFloat = 200
    let growValue: CGFloat = 400
    let drawingBounds = canvasView.drawing.bounds
    var needsRefresh = false
    
    // 向左扩展：绘图靠近左边界时触发
    if drawingBounds.minX <= threshold {
        // 将所有绘图内容向右平移growValue，腾出左侧扩展空间
        let adjustedDrawing = canvasView.drawing.translated(by: CGVector(dx: growValue, dy: 0))
        canvasView.drawing = adjustedDrawing
        // 增加画布宽度
        canvasView.contentSize.width += growValue
        // 调整滚动偏移，保持当前视角不变
        canvasView.contentOffset.x += growValue
        needsRefresh = true
    }
    
    // 向上扩展：绘图靠近上边界时触发
    if drawingBounds.minY <= threshold {
        // 将所有绘图内容向下平移growValue，腾出上方扩展空间
        let adjustedDrawing = canvasView.drawing.translated(by: CGVector(dx: 0, dy: growValue))
        canvasView.drawing = adjustedDrawing
        // 增加画布高度
        canvasView.contentSize.height += growValue
        // 调整滚动偏移，保持当前视角不变
        canvasView.contentOffset.y += growValue
        needsRefresh = true
    }
    
    // 向右扩展：绘图靠近右边界时触发
    if drawingBounds.maxX >= canvasView.contentSize.width - threshold {
        canvasView.contentSize.width += growValue
        needsRefresh = true
    }
    
    // 向下扩展：绘图靠近下边界时触发
    if drawingBounds.maxY >= canvasView.contentSize.height - threshold {
        canvasView.contentSize.height += growValue
        needsRefresh = true
    }
    
    // 刷新视图确保显示正确
    if needsRefresh {
        canvasView.setNeedsDisplay()
    }
}

关键说明 #

• 平移绘图内容：使用PKDrawing.translated(by:)可以一次性移动所有笔画，避免手动遍历调整路径，保证效率和准确性
• 视角稳定：调整contentOffset补偿画布尺寸变化，用户当前看到的内容不会因扩展而偏移
• 右下扩展逻辑：无需平移内容，直接增加画布尺寸即可，新空间自动在右侧/下方生成

优化建议 #

• 可根据需求调整threshold（触发扩展的边界距离）和growValue（每次扩展幅度）
• 确保PKCanvasView的isScrollEnabled属性设为true，否则contentOffset调整无效
• 若需要更平滑的体验，可将growValue拆分为多次小幅度扩展，或添加淡入过渡动画

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