CGContext缩放绘制全白图像求助：X轴镜像后无法生成正常图像

你遇到的这个问题其实很常见，核心原因是缩放X轴为-1之后，图像被绘制到了上下文的可视区域之外，所以看起来是全白的。

当你调用context.scaleBy(x: -1, y: 1)时，上下文的坐标系原点虽然还是(0,0)，但X轴的方向反转了——原本向右是正方向，现在向左是正方向。这时候你再用CGRect(origin: .zero, size: aspectFitSize)来绘制图像，图像会被绘制到X轴负方向的区域，也就是上下文的可视范围（从x=0到x=width）之外，自然就看不到内容了。

解决方法 #

你只需要在缩放之后，把上下文的原点平移到右侧，让图像重新回到可视区域内，具体操作如下：

• 先对上下文进行X轴缩放
• 将上下文的原点平移到当前上下文的宽度位置（也就是X轴的正方向端点）

修改后的代码如下：

let context = CGContext(data: nil, width: Int(aspectFitSize.width), height: Int(aspectFitSize.height), bitsPerComponent: bitsPerComponent, bytesPerRow: bytesPerRow, space: colorSpace, bitmapInfo: bitmapInfo.rawValue)
// 先缩放X轴实现镜像
context.scaleBy(x: -1, y: 1)
// 平移原点到右侧，让图像回到可视区域
context.translateBy(x: -aspectFitSize.width, y: 0)
context.draw(cgImage, in: CGRect(origin: .zero, size: aspectFitSize))
let image = context.makeImage()

原理补充 #

CGContext的变换是按先缩放/旋转，后平移的逻辑生效的（或者说变换矩阵的乘法顺序是反向的）。当你先缩放X轴为-1，相当于把整个坐标系翻转，这时候原来在(0,0)位置的图像会被"推"到左边的不可见区域；通过平移-width的X偏移，相当于把整个翻转后的坐标系向右拉，让图像刚好落在上下文的可视范围内。

内容的提问来源于stack exchange，提问作者xaphod