如何在突出显示的文本行之间添加空格？
How to add whitespace between highlighted lines of text?
我一直在尝试创建一个图像来突出显示 UITextView 中行与行之间有空格的文本，如下所示：
但是，当我尝试在 Swift 中执行此操作时，我发现使用 NSAttributedString.Key.backgroundColor 突出显示文本并使用 NSMutableParagraphStyle().lineSpacing 增加 UITextView 中行之间的间距只会扩展突出显示，像这样：
有什么方法可以控制 .backgroundColor 的高度，使其不会完全覆盖行与行之间的空白？
或者我是否必须创建每个矩形并将其覆盖在文本之上以获得我想要的结果？
该代码正在解决我的问题。
- (void)viewDidLoad {
[super viewDidLoad];
UIMenuItem *highlightMenuItem = [[UIMenuItem alloc] initWithTitle:@"Highlight" action:@selector(highlight)];
[[UIMenuController sharedMenuController] setMenuItems:[NSArray arrayWithObject:highlightMenuItem]];
float sysVer = [[[UIDevice currentDevice] systemVersion] floatValue];
if (sysVer >= 8.0) {
self.textView.layoutManager.allowsNonContiguousLayout = NO;
}
}
- (void)highlight {
NSRange selectedTextRange = self.textView.selectedRange;
[attributedString addAttribute:NSBackgroundColorAttributeName
value:[UIColor redColor]
range:selectedTextRange];
float sysVer = [[[UIDevice currentDevice] systemVersion] floatValue];
if (sysVer < 8.0) {
// iOS 7 fix
self.textView.scrollEnabled = NO;
self.textView.attributedText = attributedString;
self.textView.scrollEnabled = YES;
} else {
self.textView.attributedText = attributedString;
}
}
想通了。
看来你必须使用 CoreText 来完成它，而不仅仅是 TextKit。
我仍然需要弄清楚如何扩展高光，以便它们覆盖字母的底部而不是顶部。而且我必须弄清楚如何移动高光，使它们成为 "behind" 文本而不是使字体颜色变浅，但这将使您完成 90% 的工作。
import UIKit
import CoreText
import PlaygroundSupport
// Sources
//
//
//
// Create a view to display what's going on.
var demoView = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
demoView.backgroundColor = UIColor.white // Haven't figured out if you can create a boundary around a UIView
PlaygroundPage.current.liveView = demoView // Apparently it doesn't matter where we place this code
// Calculates height of frame given a string of a certain length
extension String {
func sizeOfString(constrainedToWidth width: Double, font: UIFont) -> CGSize {
let attributes = [NSAttributedString.Key.font : font]
let attString = NSAttributedString(string: self, attributes: attributes)
let framesetter = CTFramesetterCreateWithAttributedString(attString)
return CTFramesetterSuggestFrameSizeWithConstraints(framesetter, CFRange(location: 0, length: 0), nil, CGSize(width: width, height: .greatestFiniteMagnitude), nil)
}
}
// Unwraps optional so our program doesn't crash in case the user doesn't have the specified font.
func unwrappedFont(fontSize: CGFloat) -> UIFont {
if let textFont = UIFont(name: "Futura", size: fontSize) {
return textFont
}
else {
return UIFont.systemFont(ofSize: fontSize)
}
}
let string = "When you hear or read someone weaving their ideas into a beautiful mosaic of words, try to remember, they are almost certainly wrong."
var dynamicHeight = string.sizeOfString(constrainedToWidth: 500, font: unwrappedFont(fontSize: 40)).height
// dynamicHeight = 500
let boxSize = CGSize(width: 500, height: dynamicHeight)
// let boxSize = CGSize(width: 500, height: 500)
var imageBounds : [CGRect] = [] // rectangle highlight
let renderer = UIGraphicsImageRenderer(size: boxSize)
let img = renderer.image { ctx in
// Flipping the coordinate system
ctx.cgContext.textMatrix = .identity
ctx.cgContext.translateBy(x: 0, y: boxSize.height) // Alternatively y can just be 500.
ctx.cgContext.scaleBy(x: 1.0, y: -1.0)
// Setting up constraints for quote frame
let range = NSRange( location: 0, length: string.count)
guard let context = UIGraphicsGetCurrentContext() else { return }
let path = CGMutablePath()
let bounds = CGRect(x: 0, y: 0, width: boxSize.width, height: boxSize.height)
path.addRect(bounds)
let attrString = NSMutableAttributedString(string: string)
attrString.addAttribute(NSAttributedString.Key.font, value: UIFont(name: "Futura", size: 40)!, range: range )
let framesetter = CTFramesetterCreateWithAttributedString(attrString as CFAttributedString)
let frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, attrString.length), path, nil)
CTFrameDraw(frame, context)
// Setting up variables for highlight creation
let lines = CTFrameGetLines(frame) as NSArray
var lineOriginsArray : [CGPoint] = []
var contextHighlightRect : CGRect = CGRect()
var counter = 0
// Draws a rectangle over each line.
for line in lines {
let ctLine = line as! CTLine
let numOfLines: size_t = CFArrayGetCount(lines)
lineOriginsArray = [CGPoint](repeating: CGPoint.zero, count: numOfLines)
CTFrameGetLineOrigins(frame, CFRangeMake(0,0), &lineOriginsArray)
imageBounds.append(CTLineGetImageBounds(ctLine, context))
// Draw highlights
contextHighlightRect = CGRect(x: lineOriginsArray[counter].x, y: lineOriginsArray[counter].y, width: imageBounds[counter].size.width, height: imageBounds[counter].size.height)
ctx.cgContext.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 0.5)
ctx.cgContext.stroke(contextHighlightRect)
ctx.cgContext.setFillColor(red: 1, green: 1, blue: 0, alpha: 0.3)
ctx.cgContext.fill(contextHighlightRect)
counter = counter + 1
}
}
// Image layer
let imageLayer = CALayer()
imageLayer.contents = img.cgImage
imageLayer.position = CGPoint(x: 0, y: 0)
imageLayer.frame = CGRect(x: 0, y: 0, width: 500, height: dynamicHeight)
// Adding layers to view
demoView.layer.addSublayer(imageLayer)
该段落需要在用户点击时突出显示。这就是我实现它的方式，不要与 高亮颜色 混淆，它是我为此目的创建的自定义 NSAttributedString 键。
extension NSAttributedString.Key {
public static let highlightColor = NSAttributedString.Key.init("highlightColor")
}
class ReaderLayoutManager: NSLayoutManager {
// MARK: - Draw Background
override func drawBackground(forGlyphRange glyphsToShow: NSRange, at origin: CGPoint) {
super.drawBackground(forGlyphRange: glyphsToShow, at: origin)
self.enumerateLineFragments(forGlyphRange: glyphsToShow) { (_, usedRect, _, range, _) in
guard let highlightColor = self.currentHighlightColor(range: range) else { return }
guard let context = UIGraphicsGetCurrentContext() else { return }
var lineRect = usedRect
lineRect.origin.y += 10
lineRect.size.height -= 2
context.saveGState()
let path = UIBezierPath(roundedRect: lineRect, cornerRadius: 2)
highlightColor.setFill()
path.fill()
context.restoreGState()
}
}
private func currentHighlightColor(range: NSRange) -> UIColor? {
guard let textStorage = textStorage else { return nil }
guard let highlightColor = textStorage.attributes(at: range.location, effectiveRange: nil)[.highlightColor] as? UIColor else { return nil }
return highlightColor
}
}
当用户点击它时，我设置了范围的高亮颜色并重置了 TextView。
attributedString.addAttributes([.highlightColor: theme.textUnderlineColor], range: range)
我一直在尝试创建一个图像来突出显示 UITextView 中行与行之间有空格的文本，如下所示：
但是，当我尝试在 Swift 中执行此操作时，我发现使用 NSAttributedString.Key.backgroundColor 突出显示文本并使用 NSMutableParagraphStyle().lineSpacing 增加 UITextView 中行之间的间距只会扩展突出显示，像这样：
有什么方法可以控制 .backgroundColor 的高度，使其不会完全覆盖行与行之间的空白？
或者我是否必须创建每个矩形并将其覆盖在文本之上以获得我想要的结果？
该代码正在解决我的问题。
- (void)viewDidLoad {
[super viewDidLoad];
UIMenuItem *highlightMenuItem = [[UIMenuItem alloc] initWithTitle:@"Highlight" action:@selector(highlight)];
[[UIMenuController sharedMenuController] setMenuItems:[NSArray arrayWithObject:highlightMenuItem]];
float sysVer = [[[UIDevice currentDevice] systemVersion] floatValue];
if (sysVer >= 8.0) {
self.textView.layoutManager.allowsNonContiguousLayout = NO;
}
}
- (void)highlight {
NSRange selectedTextRange = self.textView.selectedRange;
[attributedString addAttribute:NSBackgroundColorAttributeName
value:[UIColor redColor]
range:selectedTextRange];
float sysVer = [[[UIDevice currentDevice] systemVersion] floatValue];
if (sysVer < 8.0) {
// iOS 7 fix
self.textView.scrollEnabled = NO;
self.textView.attributedText = attributedString;
self.textView.scrollEnabled = YES;
} else {
self.textView.attributedText = attributedString;
}
}
想通了。
看来你必须使用 CoreText 来完成它，而不仅仅是 TextKit。
我仍然需要弄清楚如何扩展高光，以便它们覆盖字母的底部而不是顶部。而且我必须弄清楚如何移动高光，使它们成为 "behind" 文本而不是使字体颜色变浅，但这将使您完成 90% 的工作。
import UIKit
import CoreText
import PlaygroundSupport
// Sources
//
//
//
// Create a view to display what's going on.
var demoView = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
demoView.backgroundColor = UIColor.white // Haven't figured out if you can create a boundary around a UIView
PlaygroundPage.current.liveView = demoView // Apparently it doesn't matter where we place this code
// Calculates height of frame given a string of a certain length
extension String {
func sizeOfString(constrainedToWidth width: Double, font: UIFont) -> CGSize {
let attributes = [NSAttributedString.Key.font : font]
let attString = NSAttributedString(string: self, attributes: attributes)
let framesetter = CTFramesetterCreateWithAttributedString(attString)
return CTFramesetterSuggestFrameSizeWithConstraints(framesetter, CFRange(location: 0, length: 0), nil, CGSize(width: width, height: .greatestFiniteMagnitude), nil)
}
}
// Unwraps optional so our program doesn't crash in case the user doesn't have the specified font.
func unwrappedFont(fontSize: CGFloat) -> UIFont {
if let textFont = UIFont(name: "Futura", size: fontSize) {
return textFont
}
else {
return UIFont.systemFont(ofSize: fontSize)
}
}
let string = "When you hear or read someone weaving their ideas into a beautiful mosaic of words, try to remember, they are almost certainly wrong."
var dynamicHeight = string.sizeOfString(constrainedToWidth: 500, font: unwrappedFont(fontSize: 40)).height
// dynamicHeight = 500
let boxSize = CGSize(width: 500, height: dynamicHeight)
// let boxSize = CGSize(width: 500, height: 500)
var imageBounds : [CGRect] = [] // rectangle highlight
let renderer = UIGraphicsImageRenderer(size: boxSize)
let img = renderer.image { ctx in
// Flipping the coordinate system
ctx.cgContext.textMatrix = .identity
ctx.cgContext.translateBy(x: 0, y: boxSize.height) // Alternatively y can just be 500.
ctx.cgContext.scaleBy(x: 1.0, y: -1.0)
// Setting up constraints for quote frame
let range = NSRange( location: 0, length: string.count)
guard let context = UIGraphicsGetCurrentContext() else { return }
let path = CGMutablePath()
let bounds = CGRect(x: 0, y: 0, width: boxSize.width, height: boxSize.height)
path.addRect(bounds)
let attrString = NSMutableAttributedString(string: string)
attrString.addAttribute(NSAttributedString.Key.font, value: UIFont(name: "Futura", size: 40)!, range: range )
let framesetter = CTFramesetterCreateWithAttributedString(attrString as CFAttributedString)
let frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, attrString.length), path, nil)
CTFrameDraw(frame, context)
// Setting up variables for highlight creation
let lines = CTFrameGetLines(frame) as NSArray
var lineOriginsArray : [CGPoint] = []
var contextHighlightRect : CGRect = CGRect()
var counter = 0
// Draws a rectangle over each line.
for line in lines {
let ctLine = line as! CTLine
let numOfLines: size_t = CFArrayGetCount(lines)
lineOriginsArray = [CGPoint](repeating: CGPoint.zero, count: numOfLines)
CTFrameGetLineOrigins(frame, CFRangeMake(0,0), &lineOriginsArray)
imageBounds.append(CTLineGetImageBounds(ctLine, context))
// Draw highlights
contextHighlightRect = CGRect(x: lineOriginsArray[counter].x, y: lineOriginsArray[counter].y, width: imageBounds[counter].size.width, height: imageBounds[counter].size.height)
ctx.cgContext.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 0.5)
ctx.cgContext.stroke(contextHighlightRect)
ctx.cgContext.setFillColor(red: 1, green: 1, blue: 0, alpha: 0.3)
ctx.cgContext.fill(contextHighlightRect)
counter = counter + 1
}
}
// Image layer
let imageLayer = CALayer()
imageLayer.contents = img.cgImage
imageLayer.position = CGPoint(x: 0, y: 0)
imageLayer.frame = CGRect(x: 0, y: 0, width: 500, height: dynamicHeight)
// Adding layers to view
demoView.layer.addSublayer(imageLayer)
该段落需要在用户点击时突出显示。这就是我实现它的方式，不要与 高亮颜色 混淆，它是我为此目的创建的自定义 NSAttributedString 键。
extension NSAttributedString.Key {
public static let highlightColor = NSAttributedString.Key.init("highlightColor")
}
class ReaderLayoutManager: NSLayoutManager {
// MARK: - Draw Background
override func drawBackground(forGlyphRange glyphsToShow: NSRange, at origin: CGPoint) {
super.drawBackground(forGlyphRange: glyphsToShow, at: origin)
self.enumerateLineFragments(forGlyphRange: glyphsToShow) { (_, usedRect, _, range, _) in
guard let highlightColor = self.currentHighlightColor(range: range) else { return }
guard let context = UIGraphicsGetCurrentContext() else { return }
var lineRect = usedRect
lineRect.origin.y += 10
lineRect.size.height -= 2
context.saveGState()
let path = UIBezierPath(roundedRect: lineRect, cornerRadius: 2)
highlightColor.setFill()
path.fill()
context.restoreGState()
}
}
private func currentHighlightColor(range: NSRange) -> UIColor? {
guard let textStorage = textStorage else { return nil }
guard let highlightColor = textStorage.attributes(at: range.location, effectiveRange: nil)[.highlightColor] as? UIColor else { return nil }
return highlightColor
}
}
当用户点击它时，我设置了范围的高亮颜色并重置了 TextView。
attributedString.addAttributes([.highlightColor: theme.textUnderlineColor], range: range)