Search code examples
iosobjective-cswiftuibezierpathcashapelayer

An easy way to draw a circle using CAShapeLayer


In questions like How to draw a smooth circle..., ...Draw Circle... and ...draw filled Circles the question and answer is very broad, contains lots of unnecessary steps and the methods used isn't always the easiest to re-create or manage.

What is an easy way to draw a circle and add it to my UIView?


Solution

  • An easy way to draw a circle is to create a CAShapeLayer and add a UIBezierPath.

    CAShapeLayer *circleLayer = [CAShapeLayer layer];
    [circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)] CGPath]];
    

    let circleLayer = CAShapeLayer();
    circleLayer.path = UIBezierPath(ovalIn: CGRect(x: 50, y: 50, width: 100, height: 100)).cgPath;
    

    After creating the CAShapeLayer we set its path to be a UIBezierPath.

    Our UIBezierPath then draws a bezierPathWithOvalInRect. The CGRect we set will effect its size and position.

    Now that we have our circle, we can add it to our UIView as a sublayer.

    [[self.view layer] addSublayer:circleLayer];
    

    view.layer.addSublayer(circleLayer)
    

    Our circle is now visible in our UIView.

    Circle

    If we wish to customise our circle's color properties we can easily do so by setting the CAShapeLayer's stroke- and fill color.

    [circleLayer setStrokeColor:[[UIColor redColor] CGColor]];
    [circleLayer setFillColor:[[UIColor clearColor] CGColor]];
    

    shapeLayer.strokeColor = UIColor.red.cgColor;
    shapeLayer.fillColor = UIColor.clear.cgColor;
    

    Circle_wColors

    Additionall properties can be found over at 's documentation on the subject https://developer.apple.com/.../CAShapeLayer_class/index.html.