通过保留透明区域和移除彩色区域来使用 UIImage 遮罩 UIView

Posted 2023-02-23

【中文标题】通过保留透明区域和移除彩色区域来使用 UIImage 遮罩 UIView

【英文标题】：Mask UIView with UIImage by Keeping Transparent Area and Removing Coloured Area

【发布时间】：2017-07-31 19:51:41

【问题描述】：

我有一张图片：

我想申请UIView 以使波形（透明区域）着色。我尝试了以下方法：

let image = UIImage(named: "waveform")!

let view = UIView(frame: CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height))

let mask = CALayer()
mask.frame = view.bounds
mask.contents = image.cgImage!

view.layer.mask = mask
view.layer.masksToBounds = true
view.backgroundColor = UIColor.green

但这给了我相反的效果，波形被切掉了：

我希望波形的外部区域是透明的，而内部是彩色的。我打算将UIView 放在另一个视图的顶部，所以我认为它需要是一个遮罩。

我尝试使用CIImage 来反转类似问题中建议的透明和彩色区域：

let cgImage = image.cgImage!
let ciImage = CIImage(cgImage: cgImage)
let filter = CIFilter(name: "CIColorInvert")!
filter.setValue(ciImage, forKey: kCIInputImageKey)

mask.contents = filter.outputImage!.cgImage

...但这导致空白view（透明背景）。

任何帮助将不胜感激。

【问题讨论】：

我想你正在寻找这个Reverse a CALayer mask

【参考方案1】：

这是一种方法...

func getImageWithInvertedPixelsOfImage(image: UIImage) -> UIImage 
    let rect = CGRect(origin: CGPoint(), size: image.size)

    UIGraphicsBeginImageContextWithOptions(image.size, false, 2.0)
    UIGraphicsGetCurrentContext()!.setBlendMode(.copy)
    image.draw(in: rect)
    UIGraphicsGetCurrentContext()!.setBlendMode(.sourceOut)
    UIGraphicsGetCurrentContext()!.setFillColor(UIColor.green.cgColor)
    UIGraphicsGetCurrentContext()!.fill(rect)

    let result = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return result!


// I named your original image "WaveMask"
let iWave = UIImage(named: "WaveMask")
let invWave = getImageWithInvertedPixelsOfImage(image: iWave!)

// invWave is now Green where it was alpha, and alpha where it was gray
// and can now be used as a mask

【讨论】：

谢谢！我花了好几个小时试图解决这个问题，这非常有效。是时候阅读这些功能了:)