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

Posted 2021-04-08

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

 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坐标系。问题是，我无法直观地理解每条线路的作用。例如，当我注释掉这些行时，文本如下所示：

如果您能够解释这些线条的作用，以及为什么文本看起来如上所示，我将非常感谢您的帮助。

答案

想象一下您可能在学校教授的笛卡尔坐标系统。 x坐标正向延伸到右y坐标正向上延伸。这对ios不起作用，因为y向下延伸。

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

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

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

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

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

另一答案

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

说明：在“上下文”中更改用户坐标系的原点

(x: 0.0 )：在此上下文中，取代坐标空间的x轴的量为（0.0 /不变）。

(y: pageBounds.size.height)：在这种情况下取​​代坐标空间的y轴的数量是由pageBounds.size.height

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

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

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

(y: -1.0)：在这种情况下，将Y轴上的比例反转1.0倍。

apple docs：translateBy，scaleBy