ios - swift 3 使用图层通过绘制 "clear"行来显示图像

Question

* 更新 发帖后不久，我发现这个看起来有我所有的答案。还没有为我自己解决，但这可能会帮助其他有类似问题的人。 Scratch Card effect in Swift 3 结束更新*

这是我向 Stack 提出的第一个问题，如果有点“菜鸟”，我深表歉意。我的问题有两部分。我已经使用了一些教程，这些教程向我展示了如何在 imageView 中的图像上绘制线条，但我正在努力实现通过在图层上绘制“清晰”线条来显示叠加层下方图像的目标。想象一张刮刮卡……这就是我想要的效果。

我最初使用以下 Stack 问题/答案来帮助指导我 Draw a line realtime with Swift 3.0 ;但我的最终目标因图像/ View 边界的混淆而进一步受阻。

上面的教程非常适合初始绘图，除了当我触摸屏幕时，我手指的位置被转换为 imageView 坐标，所以我放置手指的地方永远不会出现线条。我真的很想有人帮助我转换坐标，以便线条准确地绘制在我放置手指的位置。我已尝试更改“绘制线”函数中的边界，但我从图像中得到奇怪的行为并且绘图完全停止工作。

如果有人能够在这两个问题上提供帮助，我将不胜感激。如果我需要拆分问题，那么我会这样做。如果有帮助，我附上了我的代码。感谢您的关注...

class ViewController: UIViewController {

    @IBOutlet weak var myImageView: UIImageView!

    var layer: CALayer {
        return myImageView.layer
    }

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

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        swiped = false
        if let touch = touches.first {
            lastPoint = touch.location(in: self.view)
        }
    }

    func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
        UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0)

        myImageView.image?.draw(in: view.bounds)

        let context = UIGraphicsGetCurrentContext()

        context?.move(to: fromPoint)
        context?.addLine(to: toPoint)

        context?.setLineCap(CGLineCap.round)
        context?.setLineWidth(brushWidth)
        context?.setStrokeColor(red: red, green: green, blue: blue, alpha: 1.0)
        context?.setBlendMode(CGBlendMode.normal)
        context?.strokePath()

        myImageView.image = UIGraphicsGetImageFromCurrentImageContext()
        myImageView.alpha = opacity
        UIGraphicsEndImageContext()
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        swiped = true
        if let touch = touches.first {
            let currentPoint = touch.location(in: view)
            drawLine(from: lastPoint, to: currentPoint)

            lastPoint = currentPoint
        }
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        if !swiped {
            // draw a single point
            self.drawLine(from: lastPoint, to: lastPoint)
        }
    }

    func setUpLayer() {
        layer.backgroundColor = UIColor.clear.cgColor
        layer.borderWidth = 10.0
        layer.borderColor = UIColor.red.cgColor
        layer.shadowOpacity = 0.7
        layer.shadowRadius = 10.0
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        myImageView.image = UIImage(named: "8BitGirls.png")

        setUpLayer()
    }
}

Answer 1

UIResponder Touches 方法返回 UIViewController.view 坐标中的坐标，但您需要在 imageViews 坐标中绘制。 UIView 有多种方法可以帮助您解决这个问题。尝试 this one :

myImageView.convert(fromPoint, from: view)