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?

Have you had a look at `CATextLayer`? https://developer.apple.com/library/prerelease/mac/documentation/GraphicsImaging/Reference/CATextLayer_class/index.html — Hamish, Jan 27 '16 at 12:49
yes, I tried out, I couldn't able to find how to add sublayer of CATextLayer to CAShapeLayer — roledene JKS, Jan 27 '16 at 13:06

score 6 · Accepted Answer · edited Jan 27 '16 at 14:01

6

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

edited Jan 27 '16 at 14:01

Hamish

78,605
19
187
280

answered Jan 27 '16 at 13:16

arrteme

393
1
3
14

1

thank you for your reply, I tried this out, nothing appears, can you more describe place ? – roledene JKS Jan 27 '16 at 13:28
@roledeneJKS: Can you please comment how did this answer work for you? – SHN Jul 26 '16 at 09:55
@roledeneJKS: you have to set frame for textLayer before add it – Vi nguyen Apr 17 '17 at 03:19
It'd be great if you showed how to create textLayer – Sam Apr 23 '19 at 23:17

MrRhoads · Answer 2 · 2016-12-06T06:03:38.263

6

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)

edited Dec 06 '16 at 06:03

answered Dec 05 '16 at 09:01

MrRhoads

183
1
10

8

This doesn't work. The text never appears (Swift 4 / XCode 9) – rommex Sep 05 '17 at 18:20

score 2 · Answer 3 · answered Jan 28 '16 at 12:55

2

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.

answered Jan 28 '16 at 12:55

Pablo A.

2,042
1
17
27

I'm able to create a CATextLayer but not move it. I've tried changing bounds, frame, position, etc and it just sits in the top left corner of the layer to which I added it....it refuses to move over my graphic. How do you move the CATextLayer over a Bezier path? – Dewey Jan 18 '17 at 05:49
same issue with me @Dewey – AyAz Oct 08 '20 at 06:48

score 2 · Answer 4 · answered Mar 26 '17 at 07:43

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];
        }

score 1 · Answer 5 · answered Jul 17 '19 at 06:37

1

This way to add label to layer :

labelFrame - CGRect

someString - String

layer - your layer

        let label = CATextLayer()
        label.frame = labelFarme
        label.string = someString
        layer.addSublayer(label)

answered Jul 17 '19 at 06:37

Alexandr Arsenyuk

85
1
4

How to add label or text in to CAShapeLayer

5 Answers5