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

Question

我有一张图片：

我想将其应用于 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（透明背景）。

如有任何帮助，我们将不胜感激。

Answer 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

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

Mask UIView with UIImage by Keeping Transparent Area and Removing Coloured Area

mask

uiview

uiimage

ios

swift