In my case I need something like this (the green shape is animated):
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.
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.