Rotate view to always face mouse pointer in SwiftUI

Question

Background: I am trying to have a view rotate to face the mouse at all times.

Details of issue: Moving the view based solely on the mouse moving left or right or on up or down works fine (see version 1). But using both at the same time (non-linear or arc motion with the mouse) fails to work as soon as the mouse arcs down (as y goes negative) and around (as x goes negative) and the position of the view regresses.

For this I am attempting to dynamically switch rotation values from negative to positive depending on what side of the screen the mouse is on (see version 2). But this feels like a poor implementation and is quite buggy.

Question: How can I better do this?

I am basing my cursor fetching code off of here.

Version 1-

Problem: moving the view based solely on the mouse moving left or right or on up or down works fine but this issue occurs when trying to move the mouse in a non-linear way:

drawing

import SwiftUI

struct ContentView: View {
    var window: NSWindow! = NSWindow( contentRect: NSRect(x: 0, y: 0, width: 480, height: 300),
        styleMask: [.titled, .closable, .miniaturizable, .resizable, .fullSizeContentView],
        backing: .buffered, defer: false)
    var mouseLocation: NSPoint { NSEvent.mouseLocation }
    var location: NSPoint { window.mouseLocationOutsideOfEventStream }
    @State var position: NSPoint = NSPoint.init()
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 200, height: 200)
                    .rotationEffect(
                        (self.position.y > 60) ?
                        .degrees(Double(self.position.x) / 2)
                        : .degrees(Double(self.position.x) / 2)
                    )
                    .rotationEffect(
                        (self.position.x > 320) ?
                        .degrees(Double(self.position.y * -1))
                            : .degrees(Double(self.position.y) / 2)
                    )

            }.frame(width: geometry.size.width, height: geometry.size.height)
                .onAppear() {
                    //Setup
                    self.window.center();
                    self.window.setFrameAutosaveName("Main Window")

                    /* Get mouse location on movement*/
                    NSEvent.addLocalMonitorForEvents(matching: [.mouseMoved]) {
                        self.position = self.location //Save location
                        print("mouse location:", Double(self.position.x),  Double(self.position.y))
                        return $0
                    }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Version 2- kind of works but is buggy:

drawing

import SwiftUI

struct ContentView: View {
    var window: NSWindow! = NSWindow( contentRect: NSRect(x: 0, y: 0, width: 480, height: 300),
        styleMask: [.titled, .closable, .miniaturizable, .resizable, .fullSizeContentView],
        backing: .buffered, defer: false)
    var mouseLocation: NSPoint { NSEvent.mouseLocation }
    var location: NSPoint { window.mouseLocationOutsideOfEventStream }
    @State var position: NSPoint = NSPoint.init()
    var body: some View {
        GeometryReader { geometry in
            VStack {

                Rectangle()
                    .fill(Color.red)
                    .frame(width: 200, height: 200)
                    .rotationEffect(
                        (self.position.x > 181) ?
                        .degrees(Double(self.position.x) / 2)
                        : .degrees(Double(self.position.x * -1) / 2)
                    )
                    .rotationEffect(
                        (self.position.x > 181) ?
                        .degrees(Double(self.position.y * -1) / 2)
                        : .degrees(Double(self.position.y) / 2)
                    )

            }.frame(width: geometry.size.width, height: geometry.size.height)
                .onAppear() {
                    //Setup
                    self.window.center();
                    self.window.setFrameAutosaveName("Main Window")

                    /* Get mouse location on movement*/
                    NSEvent.addLocalMonitorForEvents(matching: [.mouseMoved]) {
                        self.position = self.location //Save location
                        print("mouse location:", Double(self.position.x),  Double(self.position.y))
                        return $0
                    }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Chris · Accepted Answer · 2020-05-27T01:05:42.447

check this out:

few remarks:

1) i changed it to ios (should be easy to change back to macos because the difference is just the getting of the position

2) i made a gradient to the rectangle so that is clear, in which direction the rectangle rotates

3) i have no idea what you are calculating, but in my opinion you can only do it correctly with trigonometric functions

struct ContentView: View {

    @State var position : CGPoint = .zero
    @State var offset : CGSize = .zero
    @State var translation : CGSize = .zero

    @State var angle : Double = 0

    func calcAngle(_ geometry: GeometryProxy) -> Angle {

        let rectPosition = CGPoint(x: geometry.size.width / 2, y: geometry.size.height / 2)
        // tan alpha = dx / dy
        var alpha : Double

        if rectPosition.y == position.y {
            alpha = 0
        } else {
            var dx = (position.x - rectPosition.x)
            let dy = (position.y - rectPosition.y)

            if dy > 0 {
                dx = -dx
            }

            let r = sqrt(abs(dx * dx) + abs(dy * dy))
            alpha = Double(asin(dx / r))

            if dy > 0 {
                alpha = alpha + Double.pi
            }
        }
        return Angle(radians: alpha)
    }

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Rectangle()
                    .fill(LinearGradient(gradient: Gradient(colors: [Color.red, Color.yellow]), startPoint: UnitPoint.top, endPoint: UnitPoint.bottom))
                    .frame(width: 200, height: 200)
                    .position(CGPoint(x: geometry.size.width / 2, y: geometry.size.height / 2))
                    .rotationEffect(self.calcAngle(geometry), anchor: UnitPoint(x: 0.5, y: 0.5))

                Circle().fill(Color.blue).frame(width:20,height:20).position(self.position)
                Circle().fill(Color.green).frame(width:20,height:20).position(self.position)

            }.frame(width: geometry.size.width, height: geometry.size.height)
            .gesture(
                DragGesture()
                    .onChanged { gesture in
                        self.position = gesture.location
                        self.translation = gesture.translation
                    }
                    .onEnded { _ in

                    }
            )
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Rotate view to always face mouse pointer in SwiftUI

1 Answers1