如何在使用变换（缩放、旋转和平移）时合并 UIImages？
How to merge UIImages while using transform (scale, rotation and translation)?
我正在尝试复制 Instagram 的功能，您可以在其中拥有您的照片，您可以添加贴纸（其他图像）然后保存。
因此，在包含我图片的 UIImageView 上，我将标签（另一个 UIImageView）添加到它作为子视图，位于父视图 UIImageView 的中心。
要在图片周围移动贴纸，我使用 CGAffineTransform 来完成（我不移动 UIImageView 的中心）。我还应用了 CGAffineTransform 来旋转和缩放贴纸。
为了保存带有贴纸的图片，我使用 CGContext 如下：
extension UIImage {
func merge2(in rect: CGRect, with imageTuples: [(image: UIImage, viewSize: CGSize, transform: CGAffineTransform)]) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
guard let context = UIGraphicsGetCurrentContext() else { return nil }
draw(in: CGRect(size: size), blendMode: .normal, alpha: 1)
// Those multiplicators are used to properly scale the transform of each sub image as the parent image (self) might be bigger than its view bounds, same goes for the subviews
let xMultiplicator = size.width / rect.width
let yMultiplicator = size.height / rect.height
for imageTuple in imageTuples {
let size = CGSize(width: imageTuple.viewSize.width * xMultiplicator, height: imageTuple.viewSize.height * yMultiplicator)
let center = CGPoint(x: self.size.width / 2, y: self.size.height / 2)
let areaRect = CGRect(center: center, size: size)
context.saveGState()
let transform = imageTuple.transform
context.translateBy(x: center.x, y: center.y)
context.concatenate(transform)
context.translateBy(x: -center.x, y: -center.y)
// EDITED CODE
context.setBlendMode(.color)
UIColor.subPink.setFill()
context.fill(areaRect)
// EDITED CODE
imageTuple.image.draw(in: areaRect, blendMode: .normal, alpha: 1)
context.restoreGState()
}
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}
考虑了变换内的旋转。
转换内部的缩放被考虑在内。
但是转换中的翻译似乎不起作用（有一个很小的翻译，但不能反映真实的翻译）。
我显然在这里遗漏了一些东西，但找不到什么。
有什么想法吗？
编辑：
以下是贴纸在应用程序中的外观以及库中保存的最终图像的一些屏幕截图。
如您所见，最终图像的旋转和缩放（width/height 比例）与应用程序中的相同。
持有UIImage的UIImageView与其图像的比例相同。
我在画贴纸的时候还加了背景，可以清楚的看到实际图片的边界。
无旋转或缩放：
旋转和缩放：
编辑 2：
Here 是一个重现上述行为的测试项目。
我相信 CGAffineTransform 属性（缩放、旋转和平移）每次只能在一个 view 上起作用。
所以，当你说你正在尝试实现所有三个转换属性时，我相信你只尝试了两个 UIImageViews （一个用于旋转，另一个用于缩放）
再添加一个 UIImageView 用于翻译 属性.
希望对您有所帮助。
问题是您有多个几何图形（坐标系）、比例因子和参考点在起作用，很难使它们保持直线。你有根视图的几何图形，其中定义了图像视图和贴纸视图的框架，然后你有图形上下文的几何图形，但你没有使它们匹配。图像视图的原点不在其父视图几何图形的原点，因为您将它限制在安全区域，而且我不确定您是否正确补偿了该偏移量。您尝试通过在绘制贴纸时调整贴纸大小来处理图像视图中图像的缩放。您没有正确补偿贴纸的 center 属性 及其 transform 影响其姿势（位置/比例/旋转）的事实。
让我们简化一下。
首先，让我们介绍一个“canvas视图”作为图像视图的父视图。 canvas 视图可以按照您希望的安全区域布局。我们将约束图像视图以填充 canvas 视图，因此图像视图的原点将为 .zero.
接下来，我们将把贴纸视图的 layer.anchorPoint 设置为 .zero。这使得视图的 transform 相对于标签视图的左上角而不是其中心进行操作。它还使 view.layer.position（与 view.center 相同）控制视图左上角的位置，而不是控制视图中心的位置。我们需要这些更改，因为它们与合并图像时 Core Graphics 在 areaRect 中绘制贴纸图像的方式相匹配。
我们还将 view.layer.position 设置为 .zero。这简化了我们在合并图像时计算在何处绘制贴纸图像的方式。
private func makeStickerView(with image: UIImage, center: CGPoint) -> UIImageView {
let heightOnWidthRatio = image.size.height / image.size.width
let imageWidth: CGFloat = 150
// let newStickerImageView = UIImageView(frame: CGRect(origin: .zero, size: CGSize(width: imageWidth, height: imageWidth * heightOnWidthRatio)))
let view = UIImageView(frame: CGRect(x: 0, y: 0, width: imageWidth, height: imageWidth * heightOnWidthRatio))
view.image = image
view.clipsToBounds = true
view.contentMode = .scaleAspectFit
view.isUserInteractionEnabled = true
view.backgroundColor = UIColor.red.withAlphaComponent(0.7)
view.layer.anchorPoint = .zero
view.layer.position = .zero
return view
}
这意味着我们需要完全使用其 transform 来定位贴纸，因此我们要初始化 transform 以使贴纸居中：
@IBAction func resetPose(_ sender: Any) {
let center = CGPoint(x: canvasView.bounds.midX, y: canvasView.bounds.midY)
let size = stickerView.bounds.size
stickerView.transform = .init(translationX: center.x - size.width / 2, y: center.y - size.height / 2)
}
由于这些变化，我们必须以更复杂的方式处理收缩和旋转。我们将使用辅助方法来管理复杂性：
extension CGAffineTransform {
func around(_ locus: CGPoint, do body: (CGAffineTransform) -> (CGAffineTransform)) -> CGAffineTransform {
var transform = self.translatedBy(x: locus.x, y: locus.y)
transform = body(transform)
transform = transform.translatedBy(x: -locus.x, y: -locus.y)
return transform
}
}
然后我们像这样处理收缩和旋转：
@objc private func stickerDidPinch(pincher: UIPinchGestureRecognizer) {
guard let stickerView = pincher.view else { return }
stickerView.transform = stickerView.transform.around(pincher.location(in: stickerView), do: { [=13=].scaledBy(x: pincher.scale, y: pincher.scale) })
pincher.scale = 1
}
@objc private func stickerDidRotate(rotater: UIRotationGestureRecognizer) {
guard let stickerView = rotater.view else { return }
stickerView.transform = stickerView.transform.around(rotater.location(in: stickerView), do: { [=13=].rotated(by: rotater.rotation) })
rotater.rotation = 0
}
这也使缩放和旋转工作比以前更好。在您的代码中，缩放和旋转始终围绕视图的中心进行。使用此代码，它们发生在用户手指之间的中心点周围，感觉更自然。
最后，为了合并图像，我们将从缩放图形上下文的几何形状开始，就像 imageView 缩放其图像一样，因为贴纸变换是相对于 imageView 大小的，而不是图像大小。由于我们现在完全使用变换来定位贴纸，并且由于我们已将图像视图和贴纸视图原点设置为 .zero，因此我们不必对奇怪的原点进行任何调整。
extension UIImage {
func merge(in viewSize: CGSize, with imageTuples: [(image: UIImage, viewSize: CGSize, transform: CGAffineTransform)]) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
print("scale : \(UIScreen.main.scale)")
print("size : \(size)")
print("--------------------------------------")
guard let context = UIGraphicsGetCurrentContext() else { return nil }
// Scale the context geometry to match the size of the image view that displayed me, because that's what all the transforms are relative to.
context.scaleBy(x: size.width / viewSize.width, y: size.height / viewSize.height)
draw(in: CGRect(origin: .zero, size: viewSize), blendMode: .normal, alpha: 1)
for imageTuple in imageTuples {
let areaRect = CGRect(origin: .zero, size: imageTuple.viewSize)
context.saveGState()
context.concatenate(imageTuple.transform)
context.setBlendMode(.color)
UIColor.purple.withAlphaComponent(0.5).setFill()
context.fill(areaRect)
imageTuple.image.draw(in: areaRect, blendMode: .normal, alpha: 1)
context.restoreGState()
}
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}
你可以找到我的测试项目的固定版本here。
我正在尝试复制 Instagram 的功能，您可以在其中拥有您的照片，您可以添加贴纸（其他图像）然后保存。
因此，在包含我图片的 UIImageView 上，我将标签（另一个 UIImageView）添加到它作为子视图，位于父视图 UIImageView 的中心。
要在图片周围移动贴纸，我使用 CGAffineTransform 来完成（我不移动 UIImageView 的中心）。我还应用了 CGAffineTransform 来旋转和缩放贴纸。
为了保存带有贴纸的图片，我使用 CGContext 如下：
extension UIImage {
func merge2(in rect: CGRect, with imageTuples: [(image: UIImage, viewSize: CGSize, transform: CGAffineTransform)]) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
guard let context = UIGraphicsGetCurrentContext() else { return nil }
draw(in: CGRect(size: size), blendMode: .normal, alpha: 1)
// Those multiplicators are used to properly scale the transform of each sub image as the parent image (self) might be bigger than its view bounds, same goes for the subviews
let xMultiplicator = size.width / rect.width
let yMultiplicator = size.height / rect.height
for imageTuple in imageTuples {
let size = CGSize(width: imageTuple.viewSize.width * xMultiplicator, height: imageTuple.viewSize.height * yMultiplicator)
let center = CGPoint(x: self.size.width / 2, y: self.size.height / 2)
let areaRect = CGRect(center: center, size: size)
context.saveGState()
let transform = imageTuple.transform
context.translateBy(x: center.x, y: center.y)
context.concatenate(transform)
context.translateBy(x: -center.x, y: -center.y)
// EDITED CODE
context.setBlendMode(.color)
UIColor.subPink.setFill()
context.fill(areaRect)
// EDITED CODE
imageTuple.image.draw(in: areaRect, blendMode: .normal, alpha: 1)
context.restoreGState()
}
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}
考虑了变换内的旋转。 转换内部的缩放被考虑在内。
但是转换中的翻译似乎不起作用（有一个很小的翻译，但不能反映真实的翻译）。
我显然在这里遗漏了一些东西，但找不到什么。
有什么想法吗？
编辑：
以下是贴纸在应用程序中的外观以及库中保存的最终图像的一些屏幕截图。 如您所见，最终图像的旋转和缩放（width/height 比例）与应用程序中的相同。
持有UIImage的UIImageView与其图像的比例相同。
我在画贴纸的时候还加了背景，可以清楚的看到实际图片的边界。
无旋转或缩放：
旋转和缩放：
编辑 2：
Here 是一个重现上述行为的测试项目。
我相信 CGAffineTransform 属性（缩放、旋转和平移）每次只能在一个 view 上起作用。
所以，当你说你正在尝试实现所有三个转换属性时，我相信你只尝试了两个 UIImageViews （一个用于旋转，另一个用于缩放）
再添加一个 UIImageView 用于翻译 属性.
希望对您有所帮助。
问题是您有多个几何图形（坐标系）、比例因子和参考点在起作用，很难使它们保持直线。你有根视图的几何图形，其中定义了图像视图和贴纸视图的框架，然后你有图形上下文的几何图形，但你没有使它们匹配。图像视图的原点不在其父视图几何图形的原点，因为您将它限制在安全区域，而且我不确定您是否正确补偿了该偏移量。您尝试通过在绘制贴纸时调整贴纸大小来处理图像视图中图像的缩放。您没有正确补偿贴纸的 center 属性 及其 transform 影响其姿势（位置/比例/旋转）的事实。
让我们简化一下。
首先，让我们介绍一个“canvas视图”作为图像视图的父视图。 canvas 视图可以按照您希望的安全区域布局。我们将约束图像视图以填充 canvas 视图，因此图像视图的原点将为 .zero.
接下来，我们将把贴纸视图的 layer.anchorPoint 设置为 .zero。这使得视图的 transform 相对于标签视图的左上角而不是其中心进行操作。它还使 view.layer.position（与 view.center 相同）控制视图左上角的位置，而不是控制视图中心的位置。我们需要这些更改，因为它们与合并图像时 Core Graphics 在 areaRect 中绘制贴纸图像的方式相匹配。
我们还将 view.layer.position 设置为 .zero。这简化了我们在合并图像时计算在何处绘制贴纸图像的方式。
private func makeStickerView(with image: UIImage, center: CGPoint) -> UIImageView {
let heightOnWidthRatio = image.size.height / image.size.width
let imageWidth: CGFloat = 150
// let newStickerImageView = UIImageView(frame: CGRect(origin: .zero, size: CGSize(width: imageWidth, height: imageWidth * heightOnWidthRatio)))
let view = UIImageView(frame: CGRect(x: 0, y: 0, width: imageWidth, height: imageWidth * heightOnWidthRatio))
view.image = image
view.clipsToBounds = true
view.contentMode = .scaleAspectFit
view.isUserInteractionEnabled = true
view.backgroundColor = UIColor.red.withAlphaComponent(0.7)
view.layer.anchorPoint = .zero
view.layer.position = .zero
return view
}
这意味着我们需要完全使用其 transform 来定位贴纸，因此我们要初始化 transform 以使贴纸居中：
@IBAction func resetPose(_ sender: Any) {
let center = CGPoint(x: canvasView.bounds.midX, y: canvasView.bounds.midY)
let size = stickerView.bounds.size
stickerView.transform = .init(translationX: center.x - size.width / 2, y: center.y - size.height / 2)
}
由于这些变化，我们必须以更复杂的方式处理收缩和旋转。我们将使用辅助方法来管理复杂性：
extension CGAffineTransform {
func around(_ locus: CGPoint, do body: (CGAffineTransform) -> (CGAffineTransform)) -> CGAffineTransform {
var transform = self.translatedBy(x: locus.x, y: locus.y)
transform = body(transform)
transform = transform.translatedBy(x: -locus.x, y: -locus.y)
return transform
}
}
然后我们像这样处理收缩和旋转：
@objc private func stickerDidPinch(pincher: UIPinchGestureRecognizer) {
guard let stickerView = pincher.view else { return }
stickerView.transform = stickerView.transform.around(pincher.location(in: stickerView), do: { [=13=].scaledBy(x: pincher.scale, y: pincher.scale) })
pincher.scale = 1
}
@objc private func stickerDidRotate(rotater: UIRotationGestureRecognizer) {
guard let stickerView = rotater.view else { return }
stickerView.transform = stickerView.transform.around(rotater.location(in: stickerView), do: { [=13=].rotated(by: rotater.rotation) })
rotater.rotation = 0
}
这也使缩放和旋转工作比以前更好。在您的代码中，缩放和旋转始终围绕视图的中心进行。使用此代码，它们发生在用户手指之间的中心点周围，感觉更自然。
最后，为了合并图像，我们将从缩放图形上下文的几何形状开始，就像 imageView 缩放其图像一样，因为贴纸变换是相对于 imageView 大小的，而不是图像大小。由于我们现在完全使用变换来定位贴纸，并且由于我们已将图像视图和贴纸视图原点设置为 .zero，因此我们不必对奇怪的原点进行任何调整。
extension UIImage {
func merge(in viewSize: CGSize, with imageTuples: [(image: UIImage, viewSize: CGSize, transform: CGAffineTransform)]) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
print("scale : \(UIScreen.main.scale)")
print("size : \(size)")
print("--------------------------------------")
guard let context = UIGraphicsGetCurrentContext() else { return nil }
// Scale the context geometry to match the size of the image view that displayed me, because that's what all the transforms are relative to.
context.scaleBy(x: size.width / viewSize.width, y: size.height / viewSize.height)
draw(in: CGRect(origin: .zero, size: viewSize), blendMode: .normal, alpha: 1)
for imageTuple in imageTuples {
let areaRect = CGRect(origin: .zero, size: imageTuple.viewSize)
context.saveGState()
context.concatenate(imageTuple.transform)
context.setBlendMode(.color)
UIColor.purple.withAlphaComponent(0.5).setFill()
context.fill(areaRect)
imageTuple.image.draw(in: areaRect, blendMode: .normal, alpha: 1)
context.restoreGState()
}
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}
你可以找到我的测试项目的固定版本here。