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

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

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

说明：更改"context"

中的用户坐标系原点

(x: 0.0 ) : 在这种情况下，坐标 space 的 x 轴位移量为（0.0 / 不变）。

(y: pageBounds.size.height)：在此上下文中，坐标 space 的 y 轴位移量为 pageBounds.size.height

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

说明：在此上下文中更改用户坐标系的比例。

(x: 1.0) : 将 X 轴上的刻度保持在 1.0

(y: -1.0) ：在此上下文中，将 Y 轴上的刻度反转 1.0 倍。

苹果文档： translateBy , scaleBy

Answer 2

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

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

非常简单地将原点在 y 方向移动 pageBounds.size.height，有效地将其向上移动 'page' 到左上角。

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

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

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

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

Why the text looks this way when I draw it in a context?

core-graphics

uikit

ios

swift