SwiftUI多可点击区域图片视图：ZStack透明区域点击异常解决

方法一：利用图片Alpha通道自定义可点击区域 #

SwiftUI默认以视图的边界框作为点击响应区域，要让透明区域不拦截点击，可基于图片的alpha通道生成自定义点击形状。

先实现从UIImage提取alpha通道路径的扩展：

extension UIImage {
    func alphaMaskPath() -> Path? {
        guard let cgImage = cgImage else { return nil }
        let imageRect = CGRect(origin: .zero, size: size)
        let path = UIBezierPath(rect: imageRect)
        
        guard let context = CGContext(data: nil,
                                      width: Int(size.width),
                                      height: Int(size.height),
                                      bitsPerComponent: 8,
                                      bytesPerRow: 0,
                                      space: CGColorSpaceCreateDeviceGray(),
                                      bitmapInfo: CGImageAlphaInfo.alphaOnly.rawValue) else { return nil }
        
        context.draw(cgImage, in: imageRect)
        guard let data = context.data else { return nil }
        
        let buffer = data.bindMemory(to: UInt8.self, capacity: Int(size.width * size.height))
        let threshold: UInt8 = 127 // 可调整透明阈值
        
        for y in 0..<Int(size.height) {
            for x in 0..<Int(size.width) {
                let index = y * Int(size.width) + x
                if buffer[index] < threshold {
                    let point = CGPoint(x: x + 0.5, y: y + 0.5)
                    path.append(UIBezierPath(rect: CGRect(origin: point, size: CGSize(width: 1, height: 1))))
                }
            }
        }
        
        return Path(path.cgPath)
    }
}

在视图中通过.contentShape指定点击区域：

ZStack{
    Image("background")
        .resizable()
        .scaledToFit()
        .onTapGesture {
            // 底层背景点击事件
        }
    Image("foreground")
        .resizable()
        .scaledToFit()
    Image("clickableHighlight1")
        .resizable()
        .scaledToFit()
        .contentShape(Path(Image("clickableHighlight1").alphaMaskPath() ?? .empty))
        .onTapGesture {
            // highlite1区域点击事件
        }
    Image("clickableHighlight2")
        .resizable()
        .scaledToFit()
        .contentShape(Path(Image("clickableHighlight2").alphaMaskPath() ?? .empty))
        .onTapGesture {
            // highlite2区域点击事件
        }
}

注意：若图片为矢量图或需要缩放，需调整路径适配显示比例，确保点击区域与图片匹配。

方法二：封装UIButton到SwiftUI #

UIKit的UIButton默认忽略透明像素的点击，可通过UIViewRepresentable封装UIButton直接利用该特性：

struct TransparentClickableImage: UIViewRepresentable {
    let imageName: String
    let action: () -> Void
    
    func makeUIView(context: Context) -> UIButton {
        let button = UIButton(type: .custom)
        button.setImage(UIImage(named: imageName), for: .normal)
        button.contentMode = .scaleAspectFit
        button.addTarget(context.coordinator, action: #selector(Coordinator.handleTap), for: .touchUpInside)
        return button
    }
    
    func updateUIView(_ uiView: UIButton, context: Context) {
        uiView.setImage(UIImage(named: imageName), for: .normal)
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(action: action)
    }
    
    class Coordinator: NSObject {
        let action: () -> Void
        
        init(action: @escaping () -> Void) {
            self.action = action
        }
        
        @objc func handleTap() {
            action()
        }
    }
}

在ZStack中使用该自定义视图：

ZStack{
    Image("background")
        .resizable()
        .scaledToFit()
        .onTapGesture {
            // 底层背景点击事件
        }
    Image("foreground")
        .resizable()
        .scaledToFit()
    TransparentClickableImage(imageName: "clickableHighlight1") {
        // highlite1区域点击事件
    }
    TransparentClickableImage(imageName: "clickableHighlight2") {
        // highlite2区域点击事件
    }
}

此方法无需复杂路径计算，直接利用UIButton原生特性，适合多数场景。

方法三：手动定义点击区域+条件判断 #

若高亮图片的点击区域规则，可手动定义点击CGRect，结合坐标判断响应点击：

ZStack(alignment: .topLeading) {
    Image("background")
        .resizable()
        .scaledToFit()
        .onTapGesture {
            // 底层背景点击事件
        }
    Image("foreground")
        .resizable()
        .scaledToFit()
    Image("clickableHighlight1")
        .resizable()
        .scaledToFit()
        .onTapGesture(coordinateSpace: .global) { location in
            let bounds = getImageBounds(imageName: "clickableHighlight1")
            let clickableRect = CGRect(x: bounds.minX + 50, y: bounds.minY + 50, width: 100, height: 100) // 自定义点击区域
            if clickableRect.contains(location) {
                // highlite1区域点击事件
            }
        }
}

// 辅助方法：获取图片屏幕边界
func getImageBounds(imageName: String) -> CGRect {
    guard let image = UIImage(named: imageName) else { return .zero }
    let screenScale = UIScreen.main.scale
    let imageSize = image.size
    let viewSize = UIScreen.main.bounds.size
    let scale = min(viewSize.width / imageSize.width, viewSize.height / imageSize.height)
    let scaledSize = CGSize(width: imageSize.width * scale, height: imageSize.height * scale)
    let x = (viewSize.width - scaledSize.width) / 2
    let y = (viewSize.height - scaledSize.height) / 2
    return CGRect(x: x, y: y, width: scaledSize.width, height: scaledSize.height)
}

该方法适合点击区域规则的场景，无需处理图片alpha通道，但需手动计算点击范围。

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