将 penkit 画布设置为输入图像大小并防止在该区域之外绘制 Swiftui

问题描述

如何防止在缩放后的纵横比图像背景之外绘制？

我需要在图像上绘制，类似于标记，并且根据我所看到的，您必须将图像添加到 PKCanvasView 的背景中。

在下面的 SO 中，我或多或少做了同样的事情。但是，我的设备和图像大小不一样。

PencilKit Code similar to this one

struct MyCanvas: UIViewRepresentable {
    var canvasView: PKCanvasView
    let picker = PKToolPicker.init()
    
    func makeUIView(context: Context) -> PKCanvasView {
        self.canvasView.tool = PKInkingTool(.pen,color: .black,width: 15)
        self.canvasView.isOpaque = false
        self.canvasView.backgroundColor = UIColor.clear
        self.canvasView.becomeFirstResponder()

        let imageView = Image("badmintoncourt")
        imageView.contentMode = .scaleAspectFit
        imageView.clipsToBounds = true

        let subView = self.canvasView.subviews[0]
            subView.addSubview(imageView)
            subView.sendSubviewToBack(imageView)
        return canvasView
    }
    
    func updateUIView(_ uiView: PKCanvasView,context: Context) {
        picker.addobserver(canvasView)
        picker.setVisible(true,forFirstResponder: uiView)
    }
}

我的屏幕尺寸是：(1194.0,790.0)，而图像尺寸是 (1668.0,2348.0)。尽管图像视图具有适合的纵横比，但它不会自动缩放。

为了解决这个问题，我使用了 Geometry reader 并传入屏幕宽度/高度，然后设置 ImageView 的框架，现在相应地缩放图像。

问题是我可以在图像边界之外绘制，使用垂直图像，水平查看，图像左右两侧有大量空白。我不想在那里画画。

无论如何将可绘制画布设置为与缩放图像相同？

另一个问题是，当我更改设备方向时，绘图不会像使用 Apple 的“标记”那样粘在图像上。我读了一点，似乎锚可能有用？但不确定如何使用它们。

解决方法

对我有用的是将 PKCanvasView 放置到另一个 UIView 中，然后将 PKCanvasView 框架设置为缩放的图像尺寸，本质上是裁剪视图。