Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get a border on UIBezierPath

I have this

CGRect container = CGRectMake(conX, conY, 220, 50);
    UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:container cornerRadius:5.0];
    [[UIColor blueColor] setFill];
    [path fillWithBlendMode:kCGBlendModeNormal alpha:0.7];

I want to get a gray borer around it, have looked at a lot of stuff online but can't see a way to do it easily, is it possible?

like image 237
williamsandonz Avatar asked Aug 23 '12 00:08

williamsandonz


2 Answers

If you're not opposed to using layers, something like this could work for you:

//create triangle path
UIBezierPath* path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 30)];
[path addLineToPoint:CGPointMake(100, 30)];
[path addLineToPoint:CGPointMake(100, 0)];
[path addLineToPoint:CGPointMake(0, 30)];

//apply path to shapelayer 
CAShapeLayer* greenPath = [CAShapeLayer layer];
greenPath.path = path.CGPath;
[greenPath setFillColor:[UIColor greenColor].CGColor];
[greenPath setStrokeColor:[UIColor blueColor].CGColor];
greenPath.frame=CGRectMake(0, 0,100,30);

//add shape layer to view's layer
[[self layer] addSublayer:greenPath];
like image 179
Brian Avatar answered Oct 27 '22 05:10

Brian


You can get bezierPath using this extension.

let path = UIBezierPath(yourView.bounds, cornerRadius: 12) 

let layer = CAShapeLayer()
layer.masksToBounds = false
layer.path = path.cgPath
layer.strokeColor = UIColor.red.cgColor
layer.fillColor = UIColor.clear.cgColor
layer.lineWidth = 5
layer.addSublayer(topLayer)



extension UIBezierPath {

        static func borderPathInRect(_ drawRect: CGRect, cornerRadius: CGFloat) -> UIBezierPath {
            let path = UIBezierPath()
            path.move(to: CGPoint(x: drawRect.origin.x, y: cornerRadius))

            path.addArc(withCenter: CGPoint(x: cornerRadius, y: cornerRadius),
                        radius: cornerRadius,
                        startAngle: CGFloat.pi,
                        endAngle: 3/2*CGFloat.pi ,
                        clockwise: true)

            path.addLine(to: CGPoint(x: drawRect.size.width - cornerRadius, y: 0))
            path.addArc(withCenter: CGPoint(x: drawRect.size.width - cornerRadius, y: cornerRadius),
                        radius: cornerRadius,
                        startAngle: 3/2*CGFloat.pi,
                        endAngle:  2*CGFloat.pi,
                        clockwise: true)

            path.addLine(to: CGPoint(x: drawRect.size.width, y: drawRect.size.height  - cornerRadius))
            path.addArc(withCenter: CGPoint(x: drawRect.size.width - cornerRadius, y: drawRect.size.height - cornerRadius),
                        radius: cornerRadius,
                        startAngle: 0,
                        endAngle:  CGFloat.pi/2,
                        clockwise: true)

            path.addLine(to: CGPoint(x: cornerRadius, y: drawRect.size.height))
            path.addArc(withCenter: CGPoint(x: cornerRadius, y: drawRect.size.height - cornerRadius),
                        radius: cornerRadius,
                        startAngle: CGFloat.pi/2,
                        endAngle:  CGFloat.pi,
                        clockwise: true)

            path.addLine(to: CGPoint(x: 0, y: cornerRadius))
            path.lineJoinStyle = .round

            return path
        }
    }
like image 21
Hayk Brsoyan Avatar answered Oct 27 '22 07:10

Hayk Brsoyan