How to add label or text in to CAShapeLayer

Question

Here is my class and it'll draw a circle, it looks like this:

    class OvalLayer: CAShapeLayer {

    let animationDuration: CFTimeInterval = 0.3

    override init() {
        super.init()
        fillColor = Colors.green.CGColor
        path = ovalPathSmall.CGPath
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }


    var ovalPathStart: UIBezierPath {
        let path = UIBezierPath(ovalInRect: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 100.0))

        return path
    }
}

Now I need to add a text to middle of this circle, I tried to find it on google but nothing that works fine. I am not sure if it's possible or not, can anyone help me if it's possible?

Answer 1

Swift 3.0

let label = UILabel()
label.font = UIFont(name: "Helvetica-Bold", size: 12)
label.frame = CGRect(x: OvalLayer.frame.origin.x + (circleWidth/2), y: OvalLayer.frame.origin.y, width: OvalLayer.bounds.width, height: OvalLayer.bounds.height)
label.text = "Hello"
label.textColor = UIColor.red
label.isHidden = false

OvalLayer.addSublayer(label.layer)

Answer 2

Text on CAShapeLayer Using CATextLayer

Here i am create CAShapeLayer object and i am adding CATextLayer to CAShapeLayer Here numberOfArcsCount means some 8

            CAShapeLayer *progressLayer = [[CAShapeLayer alloc] init];
            [progressLayer setPath:bezierPath.CGPath];


            CATextLayer* text = [CATextLayer new];
            for (int i = 1; i <= numberOfArcs.count; i++) {
            text.string =  [NSString stringWithFormat:@"%i", i];
            text.font = (__bridge CFTypeRef _Nullable)([UIFont fontWithName:@"akaChen" size:42]);
            text.font = (__bridge CFTypeRef _Nullable)([UIFont boldSystemFontOfSize:15]);
            text.fontSize=25;
            text.frame = CGRectMake(0,0,40,40);
            text.position = CGPointMake(CGRectGetMidX(progressLayer.frame) ,CGRectGetMidY(progressLayer.frame) );

            CGFloat vert = CGRectGetMidY(progressLayer.frame) / CGRectGetHeight(text.frame);

            text.anchorPoint = CGPointMake(0.5, vert );
            text.alignmentMode = kCAAlignmentCenter;
            text.foregroundColor = [[UIColor whiteColor] CGColor];

           [progressLayer addSublayer:text];
        }

Answer 3

I guess you should add CATextLayer as a sublayer to CALayer... That works fine that way: try adding CAShapeLayer first, and then CATextLayer (to same CALayer parent layer), for example in following order...

// assume self - is UIView instance

self.layer.addSublayer(shapedLayer) // shapedLayer - CAShapeLayer instance
self.layer.addSublayer(textLayer) // textLayer - CATextLayer instance

Answer 4

You just need to get the center of your UIBezierPath and add a label or a CATextLayer to your current layer.

let center : CGPoint = CGPoint(x: CGRectGetMidX(ovalPathStart.bounds), y: CGRectGetMidX(ovalPathStart.bounds))

Now, create a UILabel or CATextLayer and set the center.