UIBezierpath is not drawing a smooth image - ios

Question

I want to create a custom button in swift and the result is not quite satisfying. UIBezierpath is not drawing a smooth path. Please see image and code below.
let roundRect = UIBezierPath(roundedRect: CGRectMake(0, 0, 156, 60), byRoundingCorners:.AllCorners, cornerRadii: CGSizeMake(200, 200))
After playing around a little bit, I found that moving the path down and right 1 point and shrinking the rectangle size by 1 will solve the problem. but I don't like this solution, I don't think this is the correct way of doing it. And I feel like the frame is clipping my image. Can someone help me with this??
let roundRect = UIBezierPath(roundedRect: CGRectMake(1, 1, 154, 59), byRoundingCorners:.AllCorners, cornerRadii: CGSizeMake(200, 200))
the whole CustomButton Subclass:
import UIKit
class DesignableButtons: UIButton {
let black = UIColor(red: 33/255, green: 33/255, blue: 33/255, alpha: 1.0) /* #212121 */
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
self.setTitle("Go to Google", forState: UIControlState.Normal)
self.titleLabel!.font = UIFont(name: "GT Walsheim", size: 14)
self.setTitleColor(black, forState: .Normal)
self.setTitleColor(UIColor.whiteColor(), forState: .Highlighted)
self.setTitleColor(UIColor.whiteColor(), forState: .Selected)
self.titleLabel!.alpha = 1.0
}
let roundRect = UIBezierPath(roundedRect: CGRectMake(0, 0, 156, 60), byRoundingCorners:.AllCorners, cornerRadii: CGSizeMake(200, 200))
override func drawRect(rect: CGRect) {
black.setStroke()
roundRect.stroke()
if highlighted {
black.setFill()
roundRect.fill()
}
}
override var highlighted: Bool {
didSet {
setNeedsDisplay()
}
}
}

Answer 1

Try this
let roundRect = UIBezierPath(roundedRect: CGRectInset(CGRectMake(0, 0, 156, 60), 1, 1), byRoundingCorners:.AllCorners, cornerRadii: CGSizeMake(200, 200))
EDITED
or you can also do this to do it more reusable, this in your layoutSubviews
let roundRect = UIBezierPath(roundedRect: CGRectInset(self.frame, 1, 1), byRoundingCorners:.AllCorners, cornerRadii: CGSizeMake(200, 200))
Instead of
let roundRect = UIBezierPath(roundedRect: CGRectMake(0, 0, 156, 60), byRoundingCorners:.AllCorners, cornerRadii: CGSizeMake(200, 200))
the CGRectInset function create a rect inside your original rect,
Returns a rectangle that is smaller or larger than the source
rectangle, with the same center point.
EDITED
you can put this in your init to fix the visualization issue
self.contentScaleFactor = UIScreen.mainScreen().scale //SUPPORT RETINA
I hope this help you

Answer 2

You have problem because lines was been clipped. When you drawing into drawRect: this happen an always. Try drawing outside drawRect:.
For example:
required init?(coder aDecoder: NSCoder) {
// some code
layer.masksToBounds = true
layer.cornerRadius = 200
layer.borderWidth = 1
layer.borderColor = black.CGColor
}
Or if you want using sublayers:
let borderLine = CAShapeLayer()
required init?(coder aDecoder: NSCoder) {
// some code
frame = someFrame
let roundRect = UIBezierPath(roundedRect: CGRectMake(0, 0, 156, 60), byRoundingCorners:.AllCorners, cornerRadii: CGSizeMake(200, 200))
borderLine.path = roundRect.CGPath
borderLine.frame = bounds
borderLine.strokeColor = black.CGColor
borderLine.fillColor = UIColor.clearColor().CGColor
borderLine.lineWidth = 1
layer.insertSublayer(borderLine, atIndex: 0)
}