swift 3 使用图层通过绘制“清晰”线条来显示图像

Question

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

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

我最初使用以下堆栈问题/答案来帮助指导我 Draw a line realtime with Swift 3.0；但图像/视图边界的混乱进一步阻碍了我的最终目标。

上面的教程非常适合初始绘图，除了当我触摸屏幕时，我的手指位置被转换为 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)