Insert CATextLayer inside UIBezierPath and rotate

101 Views Asked by At

In the following example I'm trying to insert a CATextLayer inside a UIBezierPath and rotate it -45 degrees.

class DiagonalView: UIView {

    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: .init(x: rect.maxX, y: rect.midY + (rect.midY / 2.5)))
        path.addLine(to: .init(x: rect.midX + (rect.midX / 2.5), y: rect.maxY))
        path.addLine(to: .init(x: rect.midX - (rect.midX / 10.5), y: rect.maxY))
        path.addLine(to: .init(x: rect.maxX, y: rect.midY - (rect.midY / 10.5)))

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.fillColor = UIColor.black.cgColor
        layer.addSublayer(shapeLayer)

        let textlayer = CATextLayer.init()
        textlayer.string = "iPhone X"
        textlayer.fontSize = 12
        textlayer.isWrapped = true
        textlayer.foregroundColor = UIColor.white.cgColor
        textlayer.frame = path.bounds
        let degrees = -45.0
        let radians = CGFloat(degrees * Double.pi / 180)
        textlayer.transform = CATransform3DMakeTranslation(10, 50, 0)
        textlayer.transform = CATransform3DMakeRotation(radians, 0.0, 0.5, 1.0)
        layer.addSublayer(textlayer)
    }

}


let containerView = DiagonalView(frame: CGRect(x: 0.0, y: 0.0, width: 140.0, height: 140.0))
containerView.backgroundColor = .red
PlaygroundPage.current.liveView = containerView

Although its not actually the result that I expected

Result enter image description here

Expected enter image description here

Any idea of what mistake I might have done with the code? Thanks a lot for your time!

0

There are 0 best solutions below