首页 > 解决方案 > 无法在 SwiftUI 中使用 PencilKit 在背景图像上绘图

问题描述

我已将 PencilKit 集成到我的 SwftUI Photo 应用程序中,但我无法在所附屏幕截图中看到的图像上绘图。背景图像称为 selectedImage 并在 CanvasView 结构内触发

在此处输入图像描述

我在打开此屏幕的按钮中调用了 showPencilPanel 和 CanvasIsVisible:

                        // Draw
                        
                        ZStack {

                        Button(action: {
                            doIWantThisViewToShow.toggle()
                            self.showPencilPanel = true
                            canvasIsVisible.toggle()
                        

                            print("draw")
                        }) {
                            ZStack {
                                Spacer()

                                Image("Draw Btn").resizable().renderingMode(.original)
                                    .frame(width: 22, height: 22)
                                    .offset(y: -30)

                                Text("Draw").font(.system(size: 10.0)).foregroundColor(.black)
                                Spacer()
                                    .offset(y: 0)

                            }
                            
                        }}
                        .frame(minWidth: 0, maxWidth: .infinity)
                        .contentShape(Rectangle())

        if canvasIsVisible {
            CanvasView(canvasView: $canvasView,
                       toolPickerIsActive: $toolPickerIsActive, hideToolButtons: $hideToolButtons, selectedImage: $selectedImage,
                          onChange: canvasDidChange)
                .onAppear { toolPickerIsActive = true
                    
                }
                .onDisappear { toolPickerIsActive = false }
        }

当 showPencilPanel 可见时,它显示:

                ZStack (alignment: .center) {
                    
                    
                    
                        //Show Pencil
                    
                            if self.showPencilPanel {
                                

                                                                    HStack {
                                                                        

                                                                        Button(action: {
                                                                            
                                                                            self.blackOpacity = true
                                                                            canvasIsVisible.toggle()
                                                                            toolPickerIsActive = false
                                                                            doIWantThisViewToShow.toggle()
                                                                            self.showPencilPanel = false
                                                                            self.navOpen = true
//                                                                            self.hideToolButtons = true
                                                                        print("Cancel")
                                                                    })

                                                                        {

                                                                            Text("Cancel").font(.system(size: 16.0)).foregroundColor(.gray)
                                                                        }
                                                                        
                                                                        .frame(minWidth: 70)


//                                                                        Spacer().frame(maxWidth:.infinity)

                                                                        Button(action: {
                                                                            self.blackOpacity = true
                                                                            canvasIsVisible.toggle()
                                                                            toolPickerIsActive = false
                                                                            doIWantThisViewToShow.toggle()
                                                                            self.showPencilPanel = false
//                                                                            self.hideToolButtons = true
                                                                            self.navOpen = true
                                                                            print("Done")
                                                                        }) {

                                                                                Text("Done").font(.system(size: 16.0)).foregroundColor(.blue)
                                                                            }

//                                                                                Spacer()
                                                                        .frame(minWidth: 70)

                                                                        }
                                                                    .position(x: -40, y: 25)
                                
                                
//                                                                    .frame(minWidth: 100, maxHeight: 25)


                                                                    }
                         

当 CanvasIsVisible 它显示:

struct CanvasView: UIViewRepresentable {

    class Coordinator: NSObject, PKCanvasViewDelegate {
        var canvasView: Binding<PKCanvasView>
        let onChange: () -> Void
        private let toolPicker: PKToolPicker


        deinit {       // << here !!
            toolPicker.setVisible(false, forFirstResponder: canvasView.wrappedValue)
            toolPicker.removeObserver(canvasView.wrappedValue)
        }

        init(canvasView: Binding<PKCanvasView>, toolPicker: PKToolPicker, onChange: @escaping () -> Void) {
            self.canvasView = canvasView
            self.onChange = onChange
            self.toolPicker = toolPicker
        }

        func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) {
            if canvasView.drawing.bounds.isEmpty == false {
                onChange()
            }
        }
    }

    @Binding var canvasView: PKCanvasView
    @Binding var toolPickerIsActive: Bool
    @Binding var hideToolButtons: Bool

    
    private let toolPicker = PKToolPicker()
    @Binding var selectedImage: UIImage

    let onChange: () -> Void

    func makeUIView(context: Context) -> PKCanvasView {
        canvasView.isOpaque = false
        canvasView.backgroundColor = .clear
        canvasView.delegate = context.coordinator
        canvasView.becomeFirstResponder()
        showToolPicker()

        let imageView = UIImageView(image: self.selectedImage)
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true

        let contentView = canvasView.subviews[0]
        contentView.addSubview(imageView)
        contentView.sendSubviewToBack(imageView)

        return canvasView
    }

    func updateUIView(_ uiView: PKCanvasView, context: Context) {
        
        toolPicker.setVisible(toolPickerIsActive, forFirstResponder: uiView)
    }

    func showToolPicker() {
        toolPicker.setVisible(true, forFirstResponder: canvasView)
        toolPicker.addObserver(canvasView)
        canvasView.becomeFirstResponder()
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(canvasView: $canvasView, toolPicker: toolPicker, onChange: onChange)
    }
}

标签: iosimageswiftuipencilkit

解决方案


推荐阅读