xcode 具有乘法效果的 Swift UIView

Swift UIView with multiply effect

提问by Gustaf Gunér

What I've been trying to achieve for a couple of hours is something like the following:

几个小时以来，我一直在努力实现的目标如下：

I would like to have a UIImagein the background and then preferably a UIViewwith a background color of red with some kind of multiply effect (the red area). Is this possible? I've seen a few extensions for UIImage that tints them, but that would only work if I wanted my WHOLE image to have a red multiply color effect.

我想UIImage在背景中有一个，然后最好UIView有一个具有某种乘法效果的红色背景颜色（红色区域）。这可能吗？我已经看到 UIImage 的一些扩展可以为它们着色，但是只有当我希望我的整个图像具有红色倍增颜色效果时才有效。

Thanks

谢谢

回答by Kex

You could just add a red UIViewto the top of your UIImageView. Adjust the alpha to make it transparent:

你可以UIView在你的UIImageView. 调整 alpha 使其透明：

let someView = UIView(frame: someImageView.frame)
someView.backgroundColor = UIColor(colorLiteralRed: 255.0/255.0, green: 0, blue: 0, alpha: 0.5)
someImageView.addSubview(someView)

Using a multiply instead:

改用乘法：

let img = UIImage(named: “background”)
let img2 = UIImage(named: “effect”) //Make sure this is your red image same size as the background


let rect = CGRect(x: 0, y: 0, width: img.size.width, height: img.size.height)

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

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

img.drawInRect(rect, blendMode: .Normal, alpha: 1)
img2.drawInRect(rect, blendMode: .Multiply, alpha: 1)

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

回答by Peter Kreinz

Swift 3Extension (thx to @Kex):

Swift 3扩展（感谢@Kex）：

extension UIImage{
    class func multiply(image:UIImage, color:UIColor) -> UIImage? {
        let rect = CGRect(origin: .zero, size: image.size)

        //image colored
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        color.setFill()
        UIRectFill(rect)
        let coloredImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        //image multiply
        UIGraphicsBeginImageContextWithOptions(image.size, true, 0)
        let context = UIGraphicsGetCurrentContext()

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

        image.draw(in: rect, blendMode: .normal, alpha: 1)
        coloredImage?.draw(in: rect, blendMode: .multiply, alpha: 1)

        let result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return result
    }
}

Example:

例子：

let image = UIImage.multiply(image: sourceImage, color: UIColor.red)

回答by joern

With iOS10you can now use UIGraphicsImageRendererto add a partial multiply effect as easy as this:

使用iOS10，您现在UIGraphicsImageRenderer可以像这样简单地添加部分乘法效果：

extension UIImage {
    func tinted(_ color: UIColor, percentageFromBottom: CGFloat) -> UIImage? {
        let imageRect = CGRect(origin: .zero, size: size)
        let colorRect = CGRect(x: 0, y: (1.0 - percentageFromBottom) * size.height, width: size.width, height: percentageFromBottom * size.height)
        let renderer = UIGraphicsImageRenderer(size: size)

        let tintedImage = renderer.image { context in
            color.set()
            context.fill(colorRect)
            draw(in: imageRect, blendMode: .multiply, alpha: 1)
        }

        return tintedImage
    }
}

You can then use it like this to multiply the lower third of the original with a red multiply:

然后，您可以像这样使用它来将原始的下三分之一与红色相乘相乘：

UIImage(named: "trees")?.tinted(.red, percentageFromBottom: 0.33)

Which results in this:

结果如下：