iOS中如何为2D图像的不规则形状正确应用带透视变换的纹理

问题根因 #

首先要明确：UIColor(patternImage:)从设计上就不支持透视映射——它的逻辑就是把你给的图片按固定像素大小，在目标图层的矩形范围内等距平铺，纹理坐标完全和屏幕像素绑定，跟你要画的不规则形状没有任何映射关系。不管你怎么给图层加affine transform，纹理永远都是正对着屏幕平铺的，根本没法跟着形状变形。
你当前的实现代码如下：

let image = UIImage(named: "roofTiles_square")?.flattened
if let realImage = image {
    let color = UIColor(patternImage: realImage)
    controller.quadView.quadLayer.fillColor = color.cgColor
}

可落地的实现方案 #

方案1：用Core Image快速实现（无需手写Metal代码）

如果你不需要动态调整形状，只是静态展示纹理，这个方法成本最低，直接用系统自带的滤镜就能完成透视映射：

1. 先拿到你要适配的不规则四边形的四个角点（按左上、右上、右下、左下的顺序记录坐标）
2. 把你的瓦片图转成CIImage，喂给内置的CIPerspectiveTransform滤镜，把四个角点的坐标作为滤镜的输入参数，让滤镜把原图透视变形到这四个点围成的四边形范围内
3. 把变形好的图直接赋值给quadLayer的contents，不要再用patternColor填色
   示例代码：

// 四边形四个顶点位置
let cornerPoints = [
    CGPoint(x: targetRect.minX, y: targetRect.minY),
    CGPoint(x: targetRect.maxX, y: targetRect.minY),
    CGPoint(x: targetRect.maxX, y: targetRect.maxY),
    CGPoint(x: targetRect.minX, y: targetRect.maxY)
]
guard let inputImage = CIImage(image: realRoofImage),
      let perspectiveFilter = CIFilter(name: "CIPerspectiveTransform") else { return }
perspectiveFilter.setValue(CIVector(cgPoint: cornerPoints[0]), forKey: "inputTopLeft")
perspectiveFilter.setValue(CIVector(cgPoint: cornerPoints[1]), forKey: "inputTopRight")
perspectiveFilter.setValue(CIVector(cgPoint: cornerPoints[2]), forKey: "inputBottomRight")
perspectiveFilter.setValue(CIVector(cgPoint: cornerPoints[3]), forKey: "inputBottomLeft")
let sharedCIContext = CIContext()
guard let resultImage = perspectiveFilter.outputImage,
      let cgResult = sharedCIContext.createCGImage(resultImage, from: resultImage.extent) else { return }
quadLayer.contents = cgResult

方案2：用Metal做实时渲染（适合交互场景）

如果你需要做可以拖拽四个角点、动态调整形状的交互效果，Core Image的离屏渲染性能就不够了，这时候直接上Metal/OpenGL：

• 别再操作CALayer填色了，直接用MTKView作为纹理的展示容器
• 两个核心逻辑搭好就能用：
  • 把你的瓦片纹理绑定到渲染管线上，把采样模式设为重复平铺，保证瓦片在大区域里可以无缝拼接，不会因为透视拉伸就出现纹理断片
  • 把四边形的四个顶点坐标存进顶点缓冲区，在顶点着色器里算好每个点的透视位置，片元着色器里按坐标采集对应位置的瓦片纹理
• 这个方案的优势是不管怎么拖动顶点，纹理都会实时跟着变形，渲染性能比Core Image高一个量级。

几个容易踩的坑 #

• 透视采样瓦片的时候一定要开各向异性过滤，不然视角倾斜时，瓦片就会糊成一片，出现摩尔纹
• 如果你的目标形状不是规则四边形（比如是带曲线的多边形），就加一个CAShapeLayer当遮罩，把变形好的纹理按路径裁剪出来即可
• 别浪费时间折腾给patternColor加变换了，系统对图案颜色的变换支持存在硬限制，调半天也达不到准确的透视对齐效果

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