Using SwiftUI $ Xcode for macOS how do I get the position of the mouse in image coordinates when the mouse is over a CGImage?

huangapple go评论74阅读模式
英文:

Using SwiftUI $ Xcode for macOS how do I get the position of the mouse in image coordinates when the mouse is over a CGImage?

问题

I'm displaying grayscale images on my ContentView which have been scaled to UInt8 and would like to get the mouse location relative to the image origin when the mouse is hovering over the image. (I plan to use this to obtain and display the value in the original UInt16 data).

I'm detecting other mouse positions to change the cursor, etc. but can't find any solutions by searching.

Here is lightly edited code:

struct CGImageView: View {
    @Binding var filename: String?
    @Binding var minMax: [UInt16]

    @State private var opacity = 0.0

    var body: some View {
        // probably should move this elsewhere
        let data = importAndScaleImageData(filename!)
        let grayCGImageRef = createCGImageFromUint8(data, height: 240, width: 320)

        HStack {
            GeometryReader { geometry in
                Image(decorative: grayCGImageRef, scale: 1.0)
                    .aspectRatio(contentMode: .fit)
                    .border(Color.white)
            }
            .frame(width: CGFloat(grayCGImageRef.width), height: CGFloat(grayCGImageRef.height))
            .onHover { (hover: Bool) in
                if hover {
                    NSCursor.crosshair.push()
                } else {
                    NSCursor.pop()
                }
            }
            .onContinuousHover { 
                // *** get mouse location

            }
            .padding(10)
        }
    }
}
英文:

I'm displaying grayscale images on my ContentView which have been scaled to UInt8 and would like to get the mouse location relative to the image origin when the mouse is hovering over the image. (I plan to use the to obtain and display the value in the original UInt16 data).

I'm detecting other mouse positions to change the cursor, etc. but can't find any solutions by searching.

Here is lightly edited code:

struct CGImageView: View {
    @Binding var filename: String?
    @Binding var minMax: [UInt16]

    @State private var opacity = 0.0
    
    var body: some View {
            // probably should move this elswhere
        let data = importAndScaleImageData(filename!)
        let grayCGImageRef = createCGImageFromUint8(data, height: 240, width: 320)
        
        HStack {
            GeometryReader { geometry in
                Image(decorative: grayCGImageRef, scale: 1.0)
                    .aspectRatio(contentMode: .fit)
                    .border(Color.white)
            }
            .frame(width: CGFloat(grayCGImageRef.width), height: CGFloat(grayCGImageRef.height))
            .onHover { (hover: Bool) in
                if hover {
                    NSCursor.crosshair.push()
                } else {
                    NSCursor.pop()
                }
            }
            .onContinuousHover { 
                // *** get mouse location

            }
            .padding(10)
        }
    }
}

答案1

得分: 2

获取鼠标位置可以尝试以下方法,如下面的示例代码所示:

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "house")
                .resizable()
                .frame(width: 222, height: 222)
                .border(.red)
                .onHover { hover in
                    if hover {
                        NSCursor.crosshair.push()
                    } else {
                        NSCursor.pop()
                    }
                }
                .onContinuousHover { phase in
                    switch phase {
                    case .active(let location):
                        print("---> location: \(location)")
                    case .ended:
                        break
                    }
                }
        }.frame(width: 444, height: 444)
    }
}

注意,图像的左上角是位置(0,0),您可能需要进行一些坐标转换以获取您想要的位置信息。

英文:

to get the mouse position you could try this approach, as shown in this example code:

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "house")
                .resizable()
                .frame(width: 222, height: 222)
                .border(.red)
                .onHover { hover in
                    if hover {
                        NSCursor.crosshair.push()
                    } else {
                        NSCursor.pop()
                    }
                }
                .onContinuousHover { phase in
                    switch phase {
                    case .active(let location):
                        print("---> location: \(location)")
                    case .ended:
                        break
                    }
                }
        }.frame(width: 444, height: 444)
    }
}

Note, the upper-left corner of the image is location (0,0), you may have to do some coordinates transform to get what you want.

huangapple
  • 本文由 发表于 2023年5月25日 07:37:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/76328015.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定