Last active
November 27, 2024 05:38
-
-
Save ldenoue/1568da06209780f7efc28967a9ecf4fa to your computer and use it in GitHub Desktop.
CATextLayer that scrolls text up as more text is added, constrained to n visible lines
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
override func viewDidLoad() { | |
super.viewDidLoad() | |
let text = """ | |
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). | |
""" | |
let fontSize = 88.0 | |
let font = NSFont.systemFont(ofSize: fontSize) | |
let layer = makeScrollingTextLayer(text: text, width: 800, visibleLines: 3, font: font, timing: 0.2) | |
self.view.wantsLayer = true | |
self.view.layer?.addSublayer(layer) | |
} | |
// 3 layers: sub is the outer, mask is the inner, l is the main layer where text goes | |
// mask is used to hide letters from l as l's frame changes to accomodate more lines | |
// l's frame height gets increased so we always see the last n lines only | |
func makeScrollingTextLayer(text: String, width: CGFloat, visibleLines: Int, font: NSFont, timing: TimeInterval = 0.1) -> CALayer { | |
let l = CATextLayer() | |
l.isWrapped = true | |
l.backgroundColor = NSColor.clear.cgColor | |
l.foregroundColor = NSColor.white.cgColor | |
l.font = font | |
l.fontSize = font.pointSize | |
let attr = [NSAttributedString.Key.font: font, NSAttributedString.Key.foregroundColor: NSColor.white] | |
let attributedString = NSAttributedString(string: "1", attributes: attr) | |
let visibleHeight = self.frameSizeForTextLayer(width: width, string: attributedString).height * CGFloat(visibleLines) | |
l.string = "" | |
let sub = CALayer() | |
sub.backgroundColor = NSColor.init(red: 0, green: 0.0, blue: 0, alpha: 0.8).cgColor | |
sub.cornerRadius = 8.0 | |
let paddingLeft = 16.0 | |
let paddingTop = 8.0 | |
sub.frame = NSRect(x: 16, y: 16, width: width + 2 * paddingLeft, height: visibleHeight + 2 * paddingTop) | |
self.view.frame = NSRect(x: 0, y: 0, width: sub.frame.maxX + 16, height: sub.frame.maxY + 16) | |
self.view.layer?.backgroundColor = NSColor.systemBlue.cgColor | |
l.frame = sub.bounds.insetBy(dx: paddingLeft, dy: paddingTop) | |
l.masksToBounds = true | |
sub.masksToBounds = true | |
// masking so when the inner layer's frame changes, it doesn't bleed outside of the padding around the outside layer | |
let mask = CALayer() | |
mask.frame = l.frame | |
mask.masksToBounds = true | |
mask.backgroundColor = NSColor.clear.cgColor | |
mask.addSublayer(l) | |
sub.addSublayer(mask) | |
let words = text.components(separatedBy: " ") | |
var total = "" | |
var idx = 0 | |
Timer.scheduledTimer(withTimeInterval: timing, repeats: true) { _ in | |
total += words[idx] + " " | |
let attributedString = NSAttributedString(string: total, attributes: attr) | |
let height = self.frameSizeForTextLayer(width: l.bounds.width, string: attributedString).height | |
l.frame = NSRect(x: 0, y: 0, width: l.frame.width, height: height) | |
l.string = attributedString | |
idx = (idx + 1) % words.count | |
} | |
return sub | |
} | |
// adapted to Swift from https://rhult.github.io/articles/height-for-width-catextlayer/ | |
func frameSizeForTextLayer(width: CGFloat, string: NSAttributedString) -> NSSize | |
{ | |
let typesetter = CTTypesetterCreateWithAttributedString(string) | |
var offset = 0 | |
var length = 0 | |
var y = 0.0 | |
while offset < string.length { | |
length = CTTypesetterSuggestLineBreak(typesetter, offset, width) | |
let line = CTTypesetterCreateLine(typesetter, CFRangeMake(offset, length)) | |
var ascent: CGFloat = 0 | |
var descent: CGFloat = 0 | |
var leading: CGFloat = 0 | |
CTLineGetTypographicBounds(line, &ascent, &descent, &leading); | |
offset += length | |
y += ascent + descent + leading; | |
} | |
return NSSize(width: width, height: ceil(y)) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment