如何在 ScrollView 中的图像上画线 - Swift 3

How do I draw lines over an image within a ScrollView - Swift 3

我正在创建一个应用程序,允许用户在滚动视图中包含的图像上绘制 2 个矩形。然而,目前,这条线似乎并没有画出来。

这是处理绘图的 UIViewController:

import UIKit
import CoreGraphics
import CoreData

class PhotoZoomController: UIViewController {

    //Photo View's Variables
    @IBOutlet weak var scrollView: UIScrollView!

    @IBOutlet weak var photoImageView: UIImageView!
    @IBOutlet weak var imageViewLeadingConstraint: NSLayoutConstraint!
    @IBOutlet weak var imageViewBottomConstraint: NSLayoutConstraint!
    @IBOutlet weak var imageViewTopConstraint: NSLayoutConstraint!
    @IBOutlet weak var imageViewTrailingConstraint: NSLayoutConstraint!

    var photo: Photo!

    var indicatorPoints: [CGPoint]!
    var objectPoints: [CGPoint]!

    var context: NSManagedObjectContext!

    var brushWidth: CGFloat = 10.0;
    var brushColor: CGColor = UIColor.cyan.cgColor

    override func viewDidLoad() {
        super.viewDidLoad()

        photoImageView.image = photo.image
        photoImageView.sizeToFit()
        scrollView.contentSize = photoImageView.bounds.size
        updateZoomScale()
        updateConstraintsForSize(view.bounds.size)
        view.backgroundColor = .black        
    }

    var minZoomScale: CGFloat {
        let viewSize = view.bounds.size
        let widthScale = viewSize.width/photoImageView.bounds.width
        let heightScale = viewSize.height/photoImageView.bounds.height

        return min(widthScale, heightScale)
    }

    func updateZoomScale() {
        scrollView.minimumZoomScale = minZoomScale
        scrollView.zoomScale = minZoomScale
    }

    func updateConstraintsForSize(_ size: CGSize) {
        let verticalSpace = size.height - photoImageView.frame.height
        let yOffset = max(0, verticalSpace/2)
        imageViewTopConstraint.constant = yOffset
        imageViewBottomConstraint.constant = yOffset

        let xOffset = max(0, (size.width - photoImageView.frame.width)/2)
        imageViewLeadingConstraint.constant = xOffset
        imageViewTrailingConstraint.constant = xOffset
    }


    @IBAction func tappedInside(_ sender: Any) {
        guard let sender = sender as? UITapGestureRecognizer else {
            return
        }

        let touch = sender.location(in: self.photoImageView)

        for i in 0...3 {
            if indicatorPoints[i] == CGPoint() {
                indicatorPoints[i] = touch
                return
            }
        }

        for i in 0...3 {
            if objectPoints[i] == CGPoint() {
                objectPoints[i] = touch
                return
            }
        }

    //This part isn't finished, but it's supposed to modify previous points

    }
}


extension PhotoZoomController {

我觉得这就是我的问题开始的地方。我知道这段代码运行了,因为我在这里放了一个打印语句 运行.

    func drawLine(between points: [CGPoint]) {
        UIGraphicsBeginImageContextWithOptions(self.photoImageView.bounds.size, false, 0)

        photoImageView.image?.draw(in: self.photoImageView.bounds)

        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }

        context.setLineCap(.round)
        context.setLineWidth(brushWidth)
        context.setStrokeColor(brushColor)
        context.addLines(between: points)
        context.strokePath()

        UIGraphicsEndImageContext()
    }
}

extension PhotoZoomController: UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return photoImageView
    }

    func scrollViewDidZoom(_ scrollView: UIScrollView) {
        updateConstraintsForSize(view.bounds.size)

        if scrollView.zoomScale < minZoomScale {
            dismiss(animated: true, completion: nil)
        }
    }
}

这是 UIViewController 当前的样子(也许视图顺序有问题?): Storyboard picture of the ZoomController (This UIViewController)

你说的是

UIGraphicsBeginImageContextWithOptions

UIGraphicsEndImageContext

并且在它们之间,当上下文存在时,您将其引入其中。

到目前为止,还不错。

但是无处可去你说

UIGraphicsGetImageFromCurrentImageContext

因此,包含绘图结果的上下文将被丢弃。