How to compare two Shapes in SwiftUI?

Question

I'm trying to implement following function: One Shape (displayed as a stroke) is displayed and the user is supposed to draw this Shape again with his fingers. The current approach is:

var body: some View {
    ZStack{

        // DRAWING FIELD
        Rectangle()
            .foregroundColor(Color.gray)
            .edgesIgnoringSafeArea(.all)
            .gesture(
                DragGesture()
                    .onChanged{ value in
                        self.viewModel.addNewPoint(value)
                    }
                    .onEnded{_ in
                        self.viewModel.compareShapes()
                        self.viewModel.removeAllPoints()
                    }
            )
        
        //DISPLAYING SHAPE FOR USER
        MyShape()
            .stroke(lineWidth: 5)

       //DRAWING LINE FROM USER
       DrawnLine(points: viewModel.drawnLine)
            .stroke(lineWidth: 5)
            .foregroundColor(.blue)
    }
}

struct MyShape: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: CGPoint(x: 100, y: 100))
            path.addLine(to: CGPoint(x: 200, y: 300))
            path.addLine(to: CGPoint(x: 300, y: 300))
        }
    }
}

struct DrawnLine: Shape {
    var points: [CGPoint]

    func path(in rect: CGRect) -> Path {
        var path = Path()
        guard let firstPoint = points.first else { return path }

        path.move(to: firstPoint)
        for pointIndex in 1..<points.count {
            path.addLine(to: points[pointIndex])
        }
        return path
    }
}

ViewModel:

class HanziWriterViewModel: ObservableObject {

    @Published var drawnLine: [CGPoint] = []

    public func addNewPoint(_ value: DragGesture.Value){
        self.drawnLine.append(value.location)
    }

    public func removeAllPoints(){
        self.drawnLine.removeAll()
    }

    public func compareShapes(){
        // here I have to compare both shapes
    }
}

I'm not sure what is the best way to compare two Shapes with each other. It would be helpful to know how many percent of the given line are covered by the finger-drawn line. Since I already store all CGPoints of my finger-drawn line, I need to compare these points with the given Shape. Is there any way to convert the Shape to an array of CGPoints? Or any other recommendations how to solve this problem?

The drawn line is only one single line.

EDIT: Just to clarify my question and the purpose: I need to compare the black line with the blue line, so it's not enough to check whether the CGPoints of the blue line are in the Shape with shape.contains(point)

question from:https://stackoverflow.com/questions/66050757/how-to-compare-two-shapes-in-swiftui

Answer 1

Waitting for answers