How to fix text scaling of UIView and UILabel using pixelation?

Question

When I add a UILabel with text in a UIView and then scale the UIView , the content is displayed with pixelation. The larger the scale factor, the greater the pixelation.

I understand that using CATextLayer can help and can display the scaled text of UIView and UILabel without pixelation, but I don't know how to implement it.

This is how I create a triangle and scale it without pixelation. It scales with perfect sharp edges.

How can I provide the same when scaling UILabel ?

 func drawTriangle() { let path = UIBezierPath() path.moveToPoint(CGPoint(x: 0, y: 100)) path.addLineToPoint(CGPoint(x: 100, y: 100)) path.addLineToPoint(CGPoint(x: 50, y: 0)) path.closePath() let shape = CAShapeLayer() shape.path = path.CGPath shape.fillColor = UIColor.blackColor().CGColor viewTriangle.layer.insertSublayer(shape, atIndex: 0) } func scaleTriangle() { viewTriangle.transform = CGAffineTransformMakeScale(5, 5) } 

---

Question:

In Swift code, how do I convert below to use CATextLayer so that it scales without pixelation?

---

Problem Code:

 func drawLetter() { // pixelated when scaled ? let labelLetter = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 100)) labelLetter.text = "A" labelLetter.backgroundColor = UIColor.clearColor() labelLetter.textColor = UIColor.blackColor() labelLetter.font = UIFont(name: labelLetter.font.fontName, size: 144) labelLetter.textAlignment = .Center viewLetter.addSubview(labelLetter) } } func scaleView() { let scaleValue: CGFloat = 5 self.viewLetter.transform = CGAffineTransformMakeScale(scaleValue, scaleValue) } 

Picture

Answer 1

I understand that using CATextLayer uses drawing paths and displays the scaled text of UIView and UILabel without pixelation.

You misunderstand. CATextLayer draws text and scales its text. This is either - or the thing: use CATextLayer or UILabel.

It's easy to get more detailed information in a scaled form: this is what contentScaleFactor . Just zoom in on the existing scale due to the screen resolution to fit your scale transformation.

Answer 2

This scales the 5x view and scales the content as well

 func scaleView() { let scaleValue: CGFloat = 5 self.viewLetter.transform = CGAffineTransformMakeScale(scaleValue, scaleValue) self.labelLetter.contentScaleFactor = scaleValue * x //scaleValue * native content scale (2 on iPhone 8 and 3 on iPhone 8 plus) }