How to draw a line in SwiftUI with the mouse?

user_433073 0
Viewed 962

I am trying to do something like this, but I do not know where to begin.

enter image description here

I have some code so far which "works" sort of.. here is my full code (macOS)

struct ContentView: View {
    @State private var currentPosition: CGSize = .zero
    @State private var newPosition: CGSize = .zero

    var body: some View {
        ZStack {
            Path { path in
                path.move(to: CGPoint(x: 20, y: 100))
                path.addLine(to: CGPoint(x: currentPosition.width, y: currentPosition.height))
            }
            .trimmedPath(from: 0, to: 1)
            .strokedPath(StrokeStyle(lineWidth: 9, lineCap: .square, lineJoin: .round))
            .foregroundColor(.red)
            Circle()
                .frame(width: 7, height: 7)
                .foregroundColor(Color.blue)
                .offset(x: self.currentPosition.width, y: self.currentPosition.height)
                .gesture(DragGesture()
                    .onChanged { value in
                        self.currentPosition = CGSize(width: value.translation.width + self.newPosition.width, height: value.translation.height + self.newPosition.height)
                }
                .onEnded { value in
                    self.currentPosition = CGSize(width: value.translation.width + self.newPosition.width, height: value.translation.height + self.newPosition.height)
                    print(self.newPosition.width)
                    self.newPosition = self.currentPosition
                }
            )
            Color.clear
        }
    }
}

But my blue circle is far away from the rectangle. Any help please?

swiftui
1 Answers

You are simply missing the position of the Circle.

struct ContentView: View {
  @State private var startPoint: CGPoint = .zero
  @State private var endPoint: CGPoint = CGPoint(x: 100, y: 100)

  var body: some View {
    ZStack {
      Path { (path) in
        path.move(to: startPoint)
        path.addLine(to: endPoint)
      }
      .strokedPath(StrokeStyle(lineWidth: 9, lineCap: .square, lineJoin: .round))
      .foregroundColor(.red)

      //Circle 1
      Circle()
        .frame(width: 16, height: 16)
        .position(startPoint)
        .foregroundColor(.blue)
        .gesture(DragGesture()
          .onChanged { (value) in
            self.startPoint = CGPoint(x: value.location.x, y: value.location.y)
        })

      //Circle 2
      Circle()
        .frame(width: 16, height: 16)
        .position(endPoint)
        .foregroundColor(.green)
        .gesture(DragGesture()
        .onChanged { (value) in
          self.endPoint = CGPoint(x: value.location.x, y: value.location.y)
        })
      Color.clear
    }
  }
}
user_28571300
Related