dicle
dicle

Reputation: 1162

How to set tint color of an Image

let tintedImage = #imageLiteral(resourceName: "user")
pictureImageView?.image = mainCircleImage.overlayed(with: tintedImage,color: UIColor.orange)

extension UIImage {
func overlayed(with overlay: UIImage,color:UIColor) -> UIImage? {
    defer {
        UIGraphicsEndImageContext()
    }
    UIGraphicsBeginImageContextWithOptions(size, false, scale)
    self.draw(in: CGRect(origin: CGPoint.zero, size: size))
    let tintedOverlay = overlay.tintedImageWithColor(color: color)
    tintedOverlay.draw(in: CGRect(origin: CGPoint.zero, size: size))
    if let image = UIGraphicsGetImageFromCurrentImageContext() {
        return image
    }
    return nil
}

func tint(color: UIColor, blendMode: CGBlendMode) -> UIImage
{
    let drawRect = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)
    UIGraphicsBeginImageContextWithOptions(size, false, scale)
    let context = UIGraphicsGetCurrentContext()
    context!.scaleBy(x: 1.0, y: -1.0)
    context!.translateBy(x: 0.0, y: -self.size.height)
    context!.clip(to: drawRect, mask: cgImage!)
    color.setFill()
    UIRectFill(drawRect)
    draw(in: drawRect, blendMode: blendMode, alpha: 1.0)
    let tintedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return tintedImage!
}

func tintedImageWithColor(color: UIColor) -> UIImage
{
    return self.tint(color: color, blendMode: CGBlendMode.multiply)
}
}

I have updated my question according to possible answer Here is my code for the changing the icon color. In some reason my user icon is not fully filling its color when i change the tint color.

Upvotes: 1

Views: 560

Answers (1)

Reinier Melian
Reinier Melian

Reputation: 20804

I had added 2 more methods to your extension of UIImagefor tint an Image and added some changes in your overlayed method

extension UIImage {
    func overlayed(with overlay: UIImage,color:UIColor) -> UIImage? {
        defer {
            UIGraphicsEndImageContext()
        }
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        self.draw(in: CGRect(origin: CGPoint.zero, size: size))
        let tintedOverlay = overlay.tinted(color: color)
        tintedOverlay.draw(in: CGRect(origin: CGPoint.zero, size: size), blendMode: .multiply, alpha: 1.0)
        if let image = UIGraphicsGetImageFromCurrentImageContext() {
            return image
        }
        return nil
    }

    func tinted(color: UIColor) -> UIImage
    {
        UIGraphicsBeginImageContextWithOptions(self.size, false, UIScreen.main.scale)
        let context = UIGraphicsGetCurrentContext()

        color.setFill()

        context!.translateBy(x: 0, y: self.size.height)
        context!.scaleBy(x: 1.0, y: -1.0)

        context!.setBlendMode(CGBlendMode.colorBurn)
        let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
        context!.draw(self.cgImage!, in: rect)

        context!.setBlendMode(CGBlendMode.sourceIn)
        context!.addRect(rect)
        context!.drawPath(using: CGPathDrawingMode.fill)

        let coloredImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return coloredImage!
    }
}

The content of Tinted method is from this question How can I color a UIImage in Swift? answer provided by @HR

Use It

    let mainCircleImage = UIImage(named: "actions_menu_edit")?
    let tintedImage = UIImage(named: "actions_menu_add")
    pictureImageView?.image = mainCircleImage?.overlayed(with: tintedImage!,color: UIColor.red)

UPDATED

Result with the last update

enter image description here

Upvotes: 1

Related Questions