SwiftUI中如何让按钮contentShape自动匹配图片不透明区域并适配多设备

核心思路 #

通过解析图片的Alpha通道生成对应轮廓路径，将该路径作为按钮的contentShape，同时根据图片在视图中的实际缩放比例动态调整路径，确保在不同设备上都能精准匹配图片的不透明区域。

实现步骤 #

1. 解析图片Alpha通道生成路径
   扩展UIImage，利用Core Graphics遍历图片像素，提取不透明区域的轮廓路径：

   import UIKit
   import CoreGraphics
   
   extension UIImage {
       func alphaMaskPath() -> CGPath? {
           guard let cgImage = self.cgImage else { return nil }
           let width = cgImage.width
           let height = cgImage.height
           let colorSpace = CGColorSpaceCreateDeviceGray()
           let bytesPerPixel = 1
           let bytesPerRow = bytesPerPixel * width
           let bitsPerComponent = 8
           var pixels = [UInt8](repeating: 0, count: width * height)
           
           guard let context = CGContext(
               data: &pixels,
               width: width,
               height: height,
               bitsPerComponent: bitsPerComponent,
               bytesPerRow: bytesPerRow,
               space: colorSpace,
               bitmapInfo: CGImageAlphaInfo.alphaOnly.rawValue
           ) else { return nil }
           
           context.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))
           
           let path = CGMutablePath()
           var isInside = false
           for y in 0..<height {
               for x in 0..<width {
                   let pixelIndex = y * width + x
                   let alpha = pixels[pixelIndex]
                   if alpha > 127 && !isInside {
                       path.move(to: CGPoint(x: x, y: y))
                       isInside = true
                   } else if alpha <= 127 && isInside {
                       path.closeSubpath()
                       isInside = false
                   }
               }
               if isInside {
                   path.closeSubpath()
                   isInside = false
               }
           }
           
           return path.copy()
       }
   }
   

2. 自定义适配缩放的Shape
   创建ImageMaskShape，根据图片原始尺寸和显示尺寸的比例，对解析出的路径做缩放和偏移处理，匹配scaledToFill的显示逻辑：

   struct ImageMaskShape: Shape {
       let imagePath: CGPath?
       let imageSize: CGSize
       let displaySize: CGSize
       
       func path(in rect: CGRect) -> Path {
           guard let imagePath = imagePath else { return Path() }
           
           // 计算scaledToFill的缩放因子
           let scaleX = rect.width / imageSize.width
           let scaleY = rect.height / imageSize.height
           let scale = max(scaleX, scaleY)
           
           // 计算图片居中显示的偏移量
           let scaledImageWidth = imageSize.width * scale
           let scaledImageHeight = imageSize.height * scale
           let offsetX = (rect.width - scaledImageWidth) / 2
           let offsetY = (rect.height - scaledImageHeight) / 2
           
           // 应用缩放和偏移变换
           var transform = CGAffineTransform(scaleX: scale, y: scale)
           transform = transform.translatedBy(x: offsetX, y: offsetY)
           
           return Path(imagePath).applying(transform)
       }
   }
   

3. 在按钮中应用自定义Shape
   加载图片并获取其路径、尺寸，将ImageMaskShape绑定为按钮的contentShape：

   struct MaskedButtonView: View {
       let imageName: String
       let action: () -> Void
       
       @State private var imageMaskPath: CGPath?
       @State private var imageSize: CGSize = .zero
       
       var body: some View {
           Button(action: action) {
               Image(imageName)
                   .resizable()
                   .scaledToFill()
                   .onAppear {
                       if let uiImage = UIImage(named: imageName) {
                           imageMaskPath = uiImage.alphaMaskPath()
                           imageSize = CGSize(width: uiImage.size.width, height: uiImage.size.height)
                       }
                   }
           }
           .contentShape(ImageMaskShape(
               imagePath: imageMaskPath,
               imageSize: imageSize,
               displaySize: UIScreen.main.bounds.size // 滚动视图有固定比例时，替换为滚动视图的实际显示尺寸
           ))
       }
   }
   

注意事项 #

• 若滚动视图有固定比例，需将displaySize替换为滚动视图的实际可显示尺寸，确保路径缩放完全匹配图片的实际显示位置。
• 大尺寸图片解析Alpha通道可能有性能损耗，建议提前在后台线程处理路径生成，避免阻塞UI。

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