iOS混合模式乘法

Question

我正在寻找创建这个红色框的解决方案：

它正在使用“乘法”滤色器。目前我已经找到了这些信息： https://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_images/dq_images.html

但是我怎样才能在 UIView 上使用诸如乘法效果之类的东西，或者这不可能吗？ 这样背景是一个UIImageView，红色框是一个具有乘法效果的UIView。

Answer 1

这个 Swift 扩展对我有用。

extension UIImage {

//creates a static image with a color of the requested size
static func fromColor(color: UIColor, size: CGSize) -> UIImage {
    let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    UIGraphicsBeginImageContext(rect.size)
    let context = UIGraphicsGetCurrentContext()
    CGContextSetFillColorWithColor(context, color.CGColor)
    CGContextFillRect(context, rect)
    let img = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return img
}


func blendWithColorAndRect(blendMode: CGBlendMode, color: UIColor, rect: CGRect) -> UIImage {

    let imageColor = UIImage.fromColor(color, size:self.size)

    let rectImage = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)

    UIGraphicsBeginImageContextWithOptions(self.size, true, 0)
    let context = UIGraphicsGetCurrentContext()

    // fill the background with white so that translucent colors get lighter
    CGContextSetFillColorWithColor(context, UIColor.whiteColor().CGColor)
    CGContextFillRect(context, rectImage)

    self.drawInRect(rectImage, blendMode: .Normal, alpha: 1)
    imageColor.drawInRect(rect, blendMode: blendMode, alpha: 1)

    // grab the finished image and return it
    let result = UIGraphicsGetImageFromCurrentImageContext()

    //self.backgroundImageView.image = result
    UIGraphicsEndImageContext()
    return result

   }
}

斯威夫特 3：

static func fromColor(color: UIColor, size: CGSize) -> UIImage {
  let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
  UIGraphicsBeginImageContext(rect.size)
  let context = UIGraphicsGetCurrentContext()
  context!.setFillColor(color.cgColor)
  context!.fill(rect)
  let img = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  return img!
}


func blendWithColorAndRect(blendMode: CGBlendMode, color: UIColor, rect: CGRect) -> UIImage {

  let imageColor = UIImage.fromColor(color: color, size:self.size)

  let rectImage = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)

  UIGraphicsBeginImageContextWithOptions(self.size, true, 0)
  let context = UIGraphicsGetCurrentContext()

  // fill the background with white so that translucent colors get lighter
  context!.setFillColor(UIColor.white.cgColor)
  context!.fill(rectImage)

  self.draw(in: rectImage, blendMode: .normal, alpha: 1)
  imageColor.draw(in: rect, blendMode: blendMode, alpha: 1)

  // grab the finished image and return it
  let result = UIGraphicsGetImageFromCurrentImageContext()

  //self.backgroundImageView.image = result
  UIGraphicsEndImageContext()
  return result!

}

但只适用于图像，我也想为视频工作：|

Answer 2

我扩展了@pegpeg 解决方案并向图像添加了渐变叠加层，而不是单一颜色

斯威夫特 4：

static func fromGradient(colors: [UIColor], locations: [CGFloat], horizontal: Bool, size: CGSize) -> UIImage {
    let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)

    UIGraphicsBeginImageContext(rect.size)
    let context = UIGraphicsGetCurrentContext()

    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let cgColors = colors.map {$0.cgColor} as CFArray
    let grad = CGGradient(colorsSpace: colorSpace, colors: cgColors , locations: locations)

    let startPoint = CGPoint(x: 0, y: 0)
    let endPoint = horizontal ? CGPoint(x: size.width, y: 0) : CGPoint(x: 0, y: size.height)

    context?.drawLinearGradient(grad!, start: startPoint, end: endPoint, options: .drawsAfterEndLocation)

    let img = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return img!
}

func blendWithGradientAndRect(blendMode: CGBlendMode, colors: [UIColor], locations: [CGFloat], horizontal: Bool = false, alpha: CGFloat = 1.0, rect: CGRect) -> UIImage {

    let imageColor = UIImage.fromGradient(colors: colors, locations: locations, horizontal: horizontal, size: size)

    let rectImage = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)

    UIGraphicsBeginImageContextWithOptions(self.size, true, 0)
    let context = UIGraphicsGetCurrentContext()

    // fill the background with white so that translucent colors get lighter
    context!.setFillColor(UIColor.white.cgColor)
    context!.fill(rectImage)

    self.draw(in: rectImage, blendMode: .normal, alpha: 1)
    imageColor.draw(in: rect, blendMode: blendMode, alpha: alpha)

    // grab the finished image and return it
    let result = UIGraphicsGetImageFromCurrentImageContext()

    //self.backgroundImageView.image = result
    UIGraphicsEndImageContext()
    return result!

}

colors数组应该和locations数组长度相同，例如：

let  newImage = image.blendWithGradientAndRect(blendMode: .multiply,
                                               colors: [.red, .white],
                                               locations: [0,1],
                                               horizontal: true,
                                               alpha: 0.8,
                                               rect: imageRect)