ios - 为什么当我在上下文中绘制文本时，文本看起来是这样的？

Question

我正在编写一个教程，其中我应该在上下文中绘制文本。现在，为此，我使用以下代码:

 UIGraphicsPushContext(context)
context.saveGState()
let pageBounds = self.bounds(for: box)
context.translateBy(x: 0.0, y: pageBounds.size.height)
context.scaleBy(x: 1.0, y: -1.0)

let string: NSString = "SIGNED"
let attributes: [NSAttributedStringKey: Any] = [
  NSAttributedStringKey.foregroundColor: #colorLiteral(red: 0.5, green: 0.5, blue: 0.5, alpha: 0.5),
  NSAttributedStringKey.font: UIFont.boldSystemFont(ofSize: 30)
]

string.draw(at: CGPoint(x:250, y:40), withAttributes: attributes)
context.restoreGState()
UIGraphicsPopContext()

我不太明白这两行:

 context.translateBy(x: 0.0, y: pageBounds.size.height)
context.scaleBy(x: 1.0, y: -1.0)

我知道它们(组合)修改了 Quartz 使用的坐标系以匹配 UIKit 坐标系。问题是，我无法直观地理解每一行在做什么。例如，当我注释掉这些行时，文本看起来像这样:

如果你能解释一下每一行的作用，以及为什么文本看起来像上面那样，我将不胜感激你的帮助。

Answer 1

想象一下您可能在学校学到的笛卡尔坐标系。x坐标正向右延伸y 坐标正向上延伸。这不适用于 iOS，因为 y 正向向下延伸。

context.translateBy(x: 0.0, y: pageBounds.size.height)

非常简单地将原点在 y 方向上移动 pageBounds.size.height，有效地将其从“页面”向上移动到左上角。

context.scaleBy(x: 1.0, y: -1.0)

保持相同的比例，但翻转 y 坐标，使它们现在正向向下延伸。

因此，当您注释掉这些行时，您实际上是在说:1.画出相对于左下角(0,0)的x y坐标。2. 从 250 开始绘制 x，从 40 开始绘制 y。但是在此坐标系中，y:41 将高于 y:40 而不是低于它。这就是翻转文本的方式。