我想让用户在照片上画画。我目前正在关注这个 tutorial它展示了如何使用 UIKit 制作一个简单的绘图应用程序。

View Controller 中有两个UIImageView(tempImageView 和mainImageView)。当用户拖动他们的手指时，他们直接在 tempImageView 上绘制，当他们释放时，tempImageView 和 mainImageView 的图像合并在一起以创建主要图像。

现在，我的应用行为如下:

当我开始时(左侧屏幕截图)，我将 mainImageView 设置为拥有一张我希望允许用户绘制的现有照片。 问题是，一旦用户画了一笔并松开手指，背景中的原始照片就会被拉伸(stretch)(右图)。它发生在 tempImageView 和 mainImageView 之间的合并 期间。 我该如何解决这个问题？

我已经尝试设置 ImageView 的内容模式(纵横比填充、居中等)，但没有任何改变。

View Controller 是使用 Storyboard 创建的，并且只有两个 UIImageView 彼此重叠。这是整个 FingerpaintViewController 代码:

import UIKit

class FingerpaintViewController: UIViewController {

    @IBOutlet weak var mainImageView: UIImageView!
    @IBOutlet weak var tempImageView: UIImageView!

    private var lastPoint = CGPoint.zero
    private var red: CGFloat = 0.0
    private var green: CGFloat = 0.0
    private var blue: CGFloat = 0.0
    private var brushWidth: CGFloat = 10.0
    private var opacity: CGFloat = 1.0
    private var swiped = false

    override func viewDidLoad() {
        super.viewDidLoad()

        mainImageView.image = UIImage(named: "golden_gate_bridge")
    }

    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        swiped = false
        if let touch = touches.first {
            lastPoint = touch.locationInView(tempImageView)
        }
    }

    override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
        swiped = true
        if let touch = touches.first {
            let currentPoint = touch.locationInView(tempImageView)
            drawLineFrom(lastPoint, toPoint: currentPoint)

            lastPoint = currentPoint
        }
    }

    override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
        if !swiped {
            drawLineFrom(lastPoint, toPoint: lastPoint)
        }

        // Merge tempImageView into mainImageView
        UIGraphicsBeginImageContext(mainImageView.frame.size)
        mainImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: mainImageView.frame.size.width, height: mainImageView.frame.size.height), blendMode: .Normal, alpha: 1.0)
        tempImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: mainImageView.frame.size.width, height: mainImageView.frame.size.height), blendMode: .Normal, alpha: opacity)
        mainImageView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        tempImageView.image = nil
    }

    func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {
        UIGraphicsBeginImageContext(mainImageView.frame.size)
        let context = UIGraphicsGetCurrentContext()
        tempImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: mainImageView.frame.size.width, height: mainImageView.frame.size.height))

        // 2
        CGContextMoveToPoint(context, fromPoint.x, fromPoint.y)
        CGContextAddLineToPoint(context, toPoint.x, toPoint.y)

        // 3
        CGContextSetLineCap(context, .Round)
        CGContextSetLineWidth(context, brushWidth)
        CGContextSetRGBStrokeColor(context, red, green, blue, 1.0)
        CGContextSetBlendMode(context, .Normal)

        // 4
        CGContextStrokePath(context)

        // 5
        tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
        tempImageView.alpha = opacity
        UIGraphicsEndImageContext()

    }
}

最佳答案

我认为问题在于将 mainImageView.image.drawinrect 设置为 imageview 的大小而不是显示的图像。

我不使用 swift，但这是我在 Obj-c 中使用的方法来获取图像的显示大小以用于 drawinrect 大小。

CGRect imageRect = [self getImageRectForImageView:mainImageView];

- (CGRect) getImageRectForImageView:(UIImageView*)imageView
{
    float resVi = imageView.image.size.width / imageView.image.size.height;
    float resPl = imageView.size.width / imageView.size.height;

    if (resPl > resVi)
    {
        CGSize imageSize = CGSizeMake(imageView.image.size.width * imageView.size.height / imageView.image.size.height, imageView.size.height);
        return CGRectMake((imageView.size.width - imageSize.width)/2,
                          (imageView.size.height - imageSize.height)/2,
                          imageSize.width,
                          imageSize.height);

    }
    else
    {
        CGSize imageSize = CGSizeMake(imageView.size.width, imageView.image.size.height * imageView.size.width / imageView.image.size.width);
        return CGRectMake((imageView.size.width - imageSize.width)/2,
                          (imageView.size.height - imageSize.height)/2,
                          imageSize.width,
                          imageSize.height);
    }
}

然后您可以将新的 imageRect 值用于 drawinrect 调用。

// Merge tempImageView into mainImageView
UIGraphicsBeginImageContext(mainImageView.frame.size)
mainImageView.image?.drawInRect(imageRect);
...

关于ios - 在 UIImage 上徒手绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34148643/