Get color behind an object - ios

Question

I want to invert a button that looks like the following:
Inverting, in this case, would mean making the title blue and the button's background white. Since I do not want to hard-code it, I cannot simply set it blue. When I set the background color to white, and the title's color to clearColor, of course, the title is not readable anymore:
Is there a way to find out the color that is behind the button (which is a background image of the view currently), so I can set the title's color to that color?
Thanks in advance :)

Answer 1

Following on from Kjuly's answer, you should create a UIButton subclass to do this.
In order to apply your different styles, you just want to add some action listeners for the button touch events in order to re-draw your button when the state changes.
As Kjuly says, you'll then want to override drawRect in order to do your custom button drawing, depending on whether the button is pressed or not.
Something like this should achieve what you're after.
class CustomButton: UIButton {
private let paragraphStyle = NSMutableParagraphStyle()
private var titleAttributes = [String:AnyObject]()
private var isPressed = false
var highlightColor = UIColor.whiteColor() { // stroke & highlight color of the button
didSet {
setNeedsDisplay()
}
}
var cornerRadius:CGFloat = 10.0 { // corner radius of button
didSet {
setNeedsDisplay()
}
}
var strokeWidth:CGFloat = 5.0 { // stroke width of button
didSet {
setNeedsDisplay()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
addTarget(self, action: Selector("buttonWasPressed"), forControlEvents: .TouchDown)
addTarget(self, action: Selector("buttonWasReleased"), forControlEvents: .TouchUpInside)
addTarget(self, action: Selector("buttonWasReleased"), forControlEvents: .TouchDragExit)
addTarget(self, action: Selector("buttonWasReleased"), forControlEvents: .TouchCancel)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
func buttonWasPressed() {
isPressed = true
setNeedsDisplay() // set button to be redrawn
}
func buttonWasReleased() {
isPressed = false
setNeedsDisplay() // set button to be redrawn
}
override func drawRect(rect: CGRect) {
let size = bounds.size
let context = UIGraphicsGetCurrentContext()
if isPressed { // button pressed down
let path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius) // path of button shape for filling
CGContextSetFillColorWithColor(context, highlightColor.CGColor) // white background of the button
path.fill() // fill path
CGContextSetBlendMode(context, .DestinationOut) // set blend mode for transparent label
} else { // button not pressed
let path = UIBezierPath(roundedRect: UIEdgeInsetsInsetRect(bounds, UIEdgeInsets(top: strokeWidth*0.5, left: strokeWidth*0.5, bottom: strokeWidth*0.5, right: strokeWidth*0.5)), cornerRadius: cornerRadius-strokeWidth*0.5) // path of button shape for stroking
CGContextSetStrokeColorWithColor(context, highlightColor.CGColor) // set stroke color
path.lineWidth = strokeWidth
path.stroke()
}
guard let label = titleLabel else {return} // title label
guard let text = label.text else {return} // text to draw
// update text attributes, add any extra attributes you want transferred here.
paragraphStyle.alignment = label.textAlignment
titleAttributes[NSFontAttributeName] = label.font
titleAttributes[NSParagraphStyleAttributeName] = paragraphStyle
titleAttributes[NSForegroundColorAttributeName] = label.textColor
let textHeight = text.sizeWithAttributes(titleAttributes).height // heigh of the text to render, with the attributes
let renderRect = CGRect(x:0, y:(size.height-textHeight)*0.5, width:size.width, height:size.height) // rect to draw the text in
text.drawInRect(renderRect, withAttributes: titleAttributes) // draw text
}
}
You can then use this button by setting the various attributes on the button's titleLabel, as well the strokeWidth and cornerRadius property. For example:
let button = CustomButton(frame: CGRect(x: 50, y: 50, width: 200, height: 75))
button.titleLabel?.text = "Let's go!"
button.titleLabel?.font = UIFont.systemFontOfSize(30)
button.titleLabel?.textAlignment = .Center
button.titleLabel?.textColor = UIColor.whiteColor()
button.cornerRadius = 15.0
button.strokeWidth = 5.0
view.addSubview(button)

Answer 2

You need to create a subclass of the UIButton (or just UIControl), and override the -drawRect: to do rending w/ custom blend mode (kCGBlendModeDestinationOut):
- (void)drawRect:(CGRect)rect
{
[[UIColor whiteColor] setFill]; // white background of the button
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:5.f];
[path fill];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextSetBlendMode(context, kCGBlendModeDestinationOut); // Set blend mode
// u'd better to cache this attributes if u need to redraw the button frequently.
NSMutableParagraphStyle * paragraphStyle = [NSMutableParagraphStyle new];
paragraphStyle.alignment = NSTextAlignmentCenter;
NSDictionary * attributes = #{NSFontAttributeName:[UIFont systemFontOfSize:20.f], NSParagraphStyleAttributeName:paragraphStyle};
[#"Let's Go" drawAtPoint:CGPointMake(0.f, 0.f) withAttributes:attributes];
CGContextRestoreGState(context);
}
The kCGBlendModeDestinationOut is the blend mode you need to set, which will just show the view below current one (R = D*(1 - Sa)), in your case, the background image.
And about blend mode:
... R, S, and D are, respectively,
premultiplied result, source, and destination colors with alpha; Ra,
Sa, and Da are the alpha components of these colors.
The Porter-Duff "source over" mode is called `kCGBlendModeNormal':
R = S + D*(1 - Sa)
Note that the Porter-Duff "XOR" mode is only titularly related to the
classical bitmap XOR operation (which is unsupported by
CoreGraphics).

Answer 3

If your UIButton sits in a UIView and You want to access the UIView's backgroundColor, you can do so my referencing the UIButton's superclass.
Example:
#IBOutlet weak var myButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
myButton.backgroundColor = myButton.superview?.backgroundColor
}
If you want to use the color of a Background Image you might want to have a look into CoreImage to get the average or perPixel Color of that image.