在iOS swift中旋转和混合图像

Question

如何获得与下方图像混合并围绕其中心旋转的图像？

我试图显示与该图像下面的任何视图混合的图像。在我的应用程序中，用户可以移动，展开和旋转正在混合的图像。

要做到这一点，我有一个主imageView，并在顶部一个较小的imageview用于混合。混合imageview图像属性会在每次位置更改时更新。

只要图像不旋转，图像的混合就可以正常工作，一旦旋转改变，我的功能返回的图像就不在正确的位置。

我尝试过2个不同版本的相同功能。

版本1：updateBlendingView

1. 创建具有混合imageview大小的上下文
2. 在偏移处绘制主imageview，以便上下文位于混合imageview的位置。
3. 将上下文移动到其中心
4. 将上下文旋转到混合图像视图的旋转
5. 使用blendMode绘制混合imageview
6. 从上下文获取图像并更新imageview

版本2：updateBlendingView2

1. 创建具有混合imageview大小的上下文
2. 将背景移到其中心
3. 反向旋转上下文
4. 在距离中心偏移处绘制主图像视图
5. 撤消旋转
6. 绘制混合视图，使其偏离上下文的原点
7. 从上下文中获取图像并更新混合图像视图

目前的结果：

预期结果：

注意：请记住草图中混合的强度可能与应用程序不同，但问题不在于，是关于图像定位:)

func updateBlendingView() {

    guard let mainViewImage = getImageFromView(view: mainImageView) else {return}

    // Reset image to original state before blending
    blendingImageView.image = UIImage(named: "square")!
    guard let blendingImage = getImageFromView(view: blendingImageView) else {return}

    UIGraphicsBeginImageContextWithOptions(blendingImageView.bounds.size, true, UIScreen.main.scale)
    guard let context = UIGraphicsGetCurrentContext() else { UIGraphicsEndImageContext();return}

    let blendingOriginTransform = CGAffineTransform(translationX: (blendingImageView.bounds.width * 0.5), y: (blendingImageView.bounds.height * 0.5))

    let radians:Float = atan2f(Float(blendingImageView.transform.b), Float(blendingImageView.transform.a))
    let rotateTransform: CGAffineTransform = CGAffineTransform(rotationAngle: CGFloat(radians))

    let mainViewOrigin = CGPoint(x: -blendingImageView.frame.origin.x , y: -blendingImageView.frame.origin.y )
    mainViewImage.draw(at: mainViewOrigin)

    context.concatenate(blendingOriginTransform)
    context.concatenate(rotateTransform)


    let blendingDrawingOrigin = CGPoint(x: -blendingImageView.bounds.width * 0.5, y: -blendingImageView.bounds.height * 0.5)
    blendingImage.draw(at: blendingDrawingOrigin, blendMode: .multiply , alpha: 0.5)

    guard let blendedImage = UIGraphicsGetImageFromCurrentImageContext() else {
        UIGraphicsEndImageContext()
        return
    }

    UIGraphicsEndImageContext()

    blendingImageView.image = blendedImage
}

func updateBlendingView2() {

    guard let mainViewImage = getImageFromView(view: mainImageView) else {return}

    // Reset image to original state before blending
    blendingImageView.image = UIImage(named: "square")!
    guard let blendingImage = getImageFromView(view: blendingImageView) else {return}

    UIGraphicsBeginImageContextWithOptions(blendingImageView.bounds.size, true, UIScreen.main.scale)
    guard let context = UIGraphicsGetCurrentContext() else { UIGraphicsEndImageContext();return}

    let blendingOriginTransform = CGAffineTransform(translationX: (blendingImageView.bounds.width * 0.5), y: (blendingImageView.bounds.height * 0.5))

    let radians:Float = atan2f(Float(blendingImageView.transform.b), Float(blendingImageView.transform.a))
    let rotateTransform: CGAffineTransform = CGAffineTransform(rotationAngle: CGFloat(radians))

    context.concatenate(blendingOriginTransform)
    context.concatenate(rotateTransform.inverted())

    let mainViewOrigin = CGPoint(x: -blendingImageView.frame.origin.x - (blendingImageView.bounds.width * 0.5) , y: -blendingImageView.frame.origin.y - (blendingImageView.bounds.height * 0.5))
    mainViewImage.draw(at: mainViewOrigin)

    // undo the rotate
    context.concatenate(rotateTransform)

    let blendingDrawingOrigin = CGPoint(x: -blendingImageView.bounds.width * 0.5, y: -blendingImageView.bounds.height * 0.5)
    blendingImage.draw(at: blendingDrawingOrigin, blendMode: .multiply , alpha: 0.5)

    guard let blendedImage = UIGraphicsGetImageFromCurrentImageContext() else {
        UIGraphicsEndImageContext()
        return
    }

    UIGraphicsEndImageContext()
    blendingImageView.image = blendedImage
}

func getImageFromView(view: UIView) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, true, UIScreen.main.scale)
    guard let context = UIGraphicsGetCurrentContext() else { UIGraphicsEndImageContext();return nil}
    view.layer.render(in: context)
    let snapshotImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return snapshotImage
}

任何帮助将不胜感激，非常感谢。你可以在这个链接https://github.com/Gregortega/BlendDemo找到一个小的演示项目来说明这个问题

我还研究了不同的核心图形教程来理解这个问题。 Swift: Translating and Rotating a CGContext, A Visual Explanation (iOS/Xcode)

Answer 1

我会回答我自己的问题。朋友给了我解决轮换问题的方法。

解决方案是考虑混合图像视图的差异或位置变化。

func updateBlendingView2(xDiff: CGFloat = 0, yDiff: CGFloat = 0) {

    guard let mainViewImage = getImageFromView(view: mainImageView) else {return}

    // Reset image to original state before blending
    blendingImageView.image = UIImage(named: "square")!
    guard let blendingImage = getImageFromView(view: blendingImageView) else {return}

    UIGraphicsBeginImageContextWithOptions(blendingImageView.bounds.size, true, UIScreen.main.scale)
    guard let context = UIGraphicsGetCurrentContext() else { UIGraphicsEndImageContext();return}

    // X, Y translation
    let blendingOriginTransform = CGAffineTransform(translationX: (blendingImageView.bounds.width * 0.5), y: (blendingImageView.bounds.height * 0.5))
    context.concatenate(blendingOriginTransform)

    // Rotation
    let radians:Float = atan2f(Float(blendingImageView.transform.b), Float(blendingImageView.transform.a))
    let rotateTransform: CGAffineTransform = CGAffineTransform(rotationAngle: CGFloat(radians))
    context.concatenate(rotateTransform.inverted())

    var mainViewOrigin = self.lastMainViewOrign
    mainViewOrigin = CGPoint(x: mainViewOrigin.x + xDiff, y: mainViewOrigin.y + yDiff)
    mainViewImage.draw(at: mainViewOrigin)
    self.lastMainViewOrign = mainViewOrigin

    // undo the rotate
    context.concatenate(rotateTransform)

    let blendingDrawingOrigin = CGPoint(x: -blendingImageView.bounds.width * 0.5, y: -blendingImageView.bounds.height * 0.5)
    blendingImage.draw(at: blendingDrawingOrigin, blendMode: .multiply , alpha: 0.5)

    guard let blendedImage = UIGraphicsGetImageFromCurrentImageContext() else {
        UIGraphicsEndImageContext()
        return
    }

    UIGraphicsEndImageContext()
    blendingImageView.image = blendedImage
}