SwiftUI实现仅PNG图片可见区域响应点击手势

我正在开发一款基于SwiftUI的iOS应用，需要实现用户点击图片触发响应的功能。这张图片叠加在背景图上，本身带有透明区域，但部分图片的透明空间过大，导致现在点击图片的任意位置（包括透明区域）都会触发手势，我希望优化成只有图片的可见区域才响应点击。

现有代码 #

图片视图部分：

Image("dog") 
    .resizable() 
    .scaledToFit() 
    .zIndex(1) 
    .clipped() 
    .gesture(simpleTap) 

手势定义部分：

var simpleTap: some Gesture { 
   TapGesture() 
      .onEnded { _ in 
         playSound("dog.mp3") 
      } 
   } 

解决方案 #

由于SwiftUI原生的Image和手势无法直接识别透明区域，我们可以通过封装UIKit的UIImageView来实现点击区域的精确判断——检测点击位置的像素透明度，仅当透明度超过阈值时触发响应。

自定义可点击图片视图

创建一个UIViewRepresentable类型的自定义视图，处理点击事件并判断像素透明度：

struct ClickableImageView: UIViewRepresentable {
    let imageName: String
    let action: () -> Void
    
    func makeUIView(context: Context) -> UIImageView {
        let imageView = UIImageView(image: UIImage(named: imageName))
        imageView.isUserInteractionEnabled = true
        imageView.contentMode = .scaleAspectFit
        let tapGesture = UITapGestureRecognizer(target: context.coordinator, action: #selector(Coordinator.handleTap(_:)))
        imageView.addGestureRecognizer(tapGesture)
        return imageView
    }
    
    func updateUIView(_ uiView: UIImageView, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(action: action)
    }
    
    class Coordinator: NSObject {
        let action: () -> Void
        
        init(action: @escaping () -> Void) {
            self.action = action
        }
        
        @objc func handleTap(_ gesture: UITapGestureRecognizer) {
            guard let imageView = gesture.view as? UIImageView, let image = imageView.image else { return }
            
            let tapLocation = gesture.location(in: imageView)
            let scale = image.scale
            // 将点击位置转换为图片像素坐标系
            let point = CGPoint(x: tapLocation.x * scale, y: tapLocation.y * scale)
            
            // 确保点击点在图片范围内
            guard point.x >= 0, point.x < image.size.width, point.y >= 0, point.y < image.size.height else { return }
            
            // 获取点击点的像素数据
            let pixelIndex = Int(point.y * image.size.width + point.x) * 4
            guard let pixelData = image.cgImage?.dataProvider?.data else { return }
            let data: UnsafePointer<UInt8> = CFDataGetBytePtr(pixelData)
            
            // 读取alpha通道值（0-255，0为完全透明）
            let alpha = data[pixelIndex + 3]
            // 设置透明度阈值，可根据需求调整
            if alpha > 20 {
                action()
            }
        }
    }
}

在SwiftUI中使用

替换原来的Image为自定义视图，直接传入图片名和点击回调：

ClickableImageView(imageName: "dog", action: {
    playSound("dog.mp3")
})
.scaledToFit()
.zIndex(1)

说明 #

• 代码中通过读取点击位置像素的alpha通道值，判断是否为可见区域，阈值20可根据图片实际透明效果调整（数值越大，要求点击区域越不透明）。
• 自定义视图已经处理了图片的缩放适配，保持和原Image的scaledToFit效果一致。

内容的提问来源于stack exchange，提问作者hoptown