swiftcolorsoverlaycolor-blending

Blend 2 views with a custom color in swift?


In my case I need something like this (the green shape is animated): enter image description here

The picture is created with PaintCode. To implement this I used 3 objects: 1)label with grey text color, blending is "Difference" 2)a custom shape with rounded corners of green color 3)label - the same as 1 but with different blending and color params - white color, blending is "Overlay"

Code generated by PaintCode:

//// General Declarations
let context = UIGraphicsGetCurrentContext()!

//// Color Declarations
let color2 = UIColor(red: 0.388, green: 0.714, blue: 0.557, alpha: 1.000)
let color3 = UIColor(red: 0.733, green: 0.733, blue: 0.733, alpha: 1.000)

//// Text Drawing
context.saveGState()
context.setBlendMode(.difference)

let textRect = CGRect(x: 49, y: 30, width: 108, height: 21)
let textTextContent = "Hello, World!"
let textStyle = NSMutableParagraphStyle()
textStyle.alignment = .left
let textFontAttributes = [
    .font: UIFont.systemFont(ofSize: UIFont.labelFontSize),
    .foregroundColor: color3,
    .paragraphStyle: textStyle,
] as [NSAttributedString.Key: Any]

let textTextHeight: CGFloat = textTextContent.boundingRect(with: CGSize(width: textRect.width, height: CGFloat.infinity), options: .usesLineFragmentOrigin, attributes: textFontAttributes, context: nil).height
context.saveGState()
context.clip(to: textRect)
textTextContent.draw(in: CGRect(x: textRect.minX, y: textRect.minY + (textRect.height - textTextHeight) / 2, width: textRect.width, height: textTextHeight), withAttributes: textFontAttributes)
context.restoreGState()

context.restoreGState()


//// Rectangle Drawing
let rectanglePath = UIBezierPath(roundedRect: CGRect(x: 64, y: 30, width: 57, height: 47), byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 20, height: 20))
rectanglePath.close()
color2.setFill()
rectanglePath.fill()


//// Text 3 Drawing
context.saveGState()
context.setBlendMode(.overlay)

let text3Rect = CGRect(x: 49, y: 30, width: 108, height: 21)
let text3TextContent = "Hello, World!"
let text3Style = NSMutableParagraphStyle()
text3Style.alignment = .left
let text3FontAttributes = [
    .font: UIFont.systemFont(ofSize: UIFont.labelFontSize),
    .foregroundColor: UIColor.white,
    .paragraphStyle: text3Style,
] as [NSAttributedString.Key: Any]

let text3TextHeight: CGFloat = text3TextContent.boundingRect(with: CGSize(width: text3Rect.width, height: CGFloat.infinity), options: .usesLineFragmentOrigin, attributes: text3FontAttributes, context: nil).height
context.saveGState()
context.clip(to: text3Rect)
text3TextContent.draw(in: CGRect(x: text3Rect.minX, y: text3Rect.minY + (text3Rect.height - text3TextHeight) / 2, width: text3Rect.width, height: text3TextHeight), withAttributes: text3FontAttributes)
context.restoreGState()

context.restoreGState()

The problem is I don't know how to blend to fill the intersection with the exact color I need. The result label has the colors which are too different from ones I need to achieve (the gray color is too dark, the "white" color is ~(240, 255, 255) instead of (255, 255, 255)).

How to solve this issue? The solution may not depend on code I specified.


Solution

  • You can’t do that with a mere blend mode. You would need to use a CIFilter. Or just use two labels, one green, one white, and mask them both, with inverse masks.