swift - 快速绘制 UIImageView

Question

我正在尝试开发一个可以在 UIImageView 上绘制内容的应用程序。我有以下代码。

import UIKit
class Line
{
    var startPoint:CGPoint
    var endPoint:CGPoint

    init (start:CGPoint , end:CGPoint)
    {
        startPoint = start
        endPoint = end
    }
}


class AnnotationView: UIView {

    static internal let nibName = "AnnotationView"
    @IBOutlet weak var imageView: UIImageView!
    var lines :[Line] = []
    var lastPoint:CGPoint!


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

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let touch  = touches.first
        {
            let newPoint = touch.location(in:self)
            lines.append(Line(start: lastPoint, end: newPoint))
            lastPoint = newPoint
            self.setNeedsDisplay()
        }
    }
    override func draw(_ rect: CGRect) {
        if let context = UIGraphicsGetCurrentContext()
        {
            context.beginPath()
            for line in lines
            {
                context.move(to: line.startPoint)
                context.addLine(to: line.endPoint)
            }
            context.setLineCap(CGLineCap.round)
            context.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 1)
            context.setLineWidth(5)
            context.strokePath()
        }
    }
}

所以现在在上面的代码中，我有一个从 UIView 派生的 AnnotationView 类，其中我有一个 UIImageView，我从界面构建器将其设置为 super View 的全尺寸。这是一个简单的绘图应用程序，我想在 UIImageView 上绘制一些东西。现在的问题是，当 imageView.image 为 nil 时，它会显示我的绘图，如果为 imageView.image 设置了任何图像，那么它不会显示绘图。它只显示在此 imageView 中设置的图像。我已经在这两种情况下调试了所有被调用的方法。肯定有一些我想念的东西。谁能帮帮我吗？我想在我在 UIImageView 中设置的图像之上显示我的绘图。问候，妮娜

Answer 1

问题是您在 AnnotationView 的主层中绘制，该主层位于其任何 subview (包括您的 UIImageView)的后面。解决方案是将您的绘图移动到单独的 sublayer 添加到 AnnotationView 的主层。

不是直接在 draw() 方法中绘制线条，您需要有一个单独的层来覆盖您的绘图。将此属性添加到您的 AnnotationView:

let drawingLayer = CAShapeLayer()

并重写 awakeFromNib() 以在您的 View 从 Storyboard/Nib 加载后立即使该层成为其他所有内容之上的子层:

override func awakeFromNib() {
    super.awakeFromNib()
    layer.addSublayer(drawingLayer)
}

现在让我们创建一个函数，以便在每次需要更新叠加层时调用而不是调用 setNeedsDisplay():

func updateDrawingOverlay() {
    let path = CGMutablePath()

    for line in lines {
        path.move(to: line.startPoint)
        path.addLine(to: line.endPoint)
    }

    drawingLayer.frame = imageView.frame
    drawingLayer.path = path
    drawingLayer.lineWidth = 5
    drawingLayer.strokeColor = UIColor.black.cgColor

    setNeedsDisplay()
}

删除 draw(_:) 方法中的代码，因为它现在是多余的，并将 touchesMoved(_:) 中的 setNeedsDisplay() 调用替换为:) 调用 updateDrawingOverlay()。

---

整个事情对你来说应该是这样的:

import UIKit

class Line {
    var startPoint:CGPoint
    var endPoint:CGPoint

    init (start:CGPoint , end:CGPoint) {
        startPoint = start
        endPoint = end
    }
}


class AnnotationView: UIView {
    static internal let nibName = "AnnotationView"
    @IBOutlet weak var imageView: UIImageView!

    var lines :[Line] = []
    var lastPoint:CGPoint!
    let drawingLayer = CAShapeLayer()

    override func awakeFromNib() {
        super.awakeFromNib()
        layer.addSublayer(drawingLayer)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

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

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let touch  = touches.first
        {
            let newPoint = touch.location(in:self)
            lines.append(Line(start: lastPoint, end: newPoint))
            lastPoint = newPoint
            updateDrawingOverlay()
        }
    }

    func updateDrawingOverlay() {
        let path = CGMutablePath()

        for line in lines {
            path.move(to: line.startPoint)
            path.addLine(to: line.endPoint)
        }

        drawingLayer.frame = imageView.frame
        drawingLayer.path = path
        drawingLayer.lineWidth = 5
        drawingLayer.strokeColor = UIColor.black.cgColor

        setNeedsDisplay()
    }
}

这应该可以解决问题，让我知道进展如何。