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评论101阅读模式
英文:

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:

  1. struct CGImageView: View {
  2. @Binding var filename: String?
  3. @Binding var minMax: [UInt16]
  4. @State private var opacity = 0.0
  5. var body: some View {
  6. // probably should move this elsewhere
  7. let data = importAndScaleImageData(filename!)
  8. let grayCGImageRef = createCGImageFromUint8(data, height: 240, width: 320)
  9. HStack {
  10. GeometryReader { geometry in
  11. Image(decorative: grayCGImageRef, scale: 1.0)
  12. .aspectRatio(contentMode: .fit)
  13. .border(Color.white)
  14. }
  15. .frame(width: CGFloat(grayCGImageRef.width), height: CGFloat(grayCGImageRef.height))
  16. .onHover { (hover: Bool) in
  17. if hover {
  18. NSCursor.crosshair.push()
  19. } else {
  20. NSCursor.pop()
  21. }
  22. }
  23. .onContinuousHover {
  24. // *** get mouse location
  25. }
  26. .padding(10)
  27. }
  28. }
  29. }
英文:

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:

  1. struct CGImageView: View {
  2. @Binding var filename: String?
  3. @Binding var minMax: [UInt16]
  4. @State private var opacity = 0.0
  5. var body: some View {
  6. // probably should move this elswhere
  7. let data = importAndScaleImageData(filename!)
  8. let grayCGImageRef = createCGImageFromUint8(data, height: 240, width: 320)
  9. HStack {
  10. GeometryReader { geometry in
  11. Image(decorative: grayCGImageRef, scale: 1.0)
  12. .aspectRatio(contentMode: .fit)
  13. .border(Color.white)
  14. }
  15. .frame(width: CGFloat(grayCGImageRef.width), height: CGFloat(grayCGImageRef.height))
  16. .onHover { (hover: Bool) in
  17. if hover {
  18. NSCursor.crosshair.push()
  19. } else {
  20. NSCursor.pop()
  21. }
  22. }
  23. .onContinuousHover {
  24. // *** get mouse location
  25. }
  26. .padding(10)
  27. }
  28. }
  29. }

答案1

得分: 2

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

  1. struct ContentView: View {
  2. var body: some View {
  3. VStack {
  4. Image(systemName: "house")
  5. .resizable()
  6. .frame(width: 222, height: 222)
  7. .border(.red)
  8. .onHover { hover in
  9. if hover {
  10. NSCursor.crosshair.push()
  11. } else {
  12. NSCursor.pop()
  13. }
  14. }
  15. .onContinuousHover { phase in
  16. switch phase {
  17. case .active(let location):
  18. print("---> location: \(location)")
  19. case .ended:
  20. break
  21. }
  22. }
  23. }.frame(width: 444, height: 444)
  24. }
  25. }

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

英文:

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

  1. struct ContentView: View {
  2. var body: some View {
  3. VStack {
  4. Image(systemName: "house")
  5. .resizable()
  6. .frame(width: 222, height: 222)
  7. .border(.red)
  8. .onHover { hover in
  9. if hover {
  10. NSCursor.crosshair.push()
  11. } else {
  12. NSCursor.pop()
  13. }
  14. }
  15. .onContinuousHover { phase in
  16. switch phase {
  17. case .active(let location):
  18. print("---> location: \(location)")
  19. case .ended:
  20. break
  21. }
  22. }
  23. }.frame(width: 444, height: 444)
  24. }
  25. }

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:

确定