ios - 像 Swift 中的 Xcode 助手编辑器一样画一条可以拉伸(stretch)的线

Question

在 Swift 中绘制线条时，大多数解决方案都是覆盖 UIView 中的 drawRect 函数，但我正在寻找一种更动态的绘制线条的方法。

我有一个按钮，我希望能够从这个按钮拖动到下一个按钮。拖动时，我想从起点到当前触摸位置画一条线(就像 Xcode 中的辅助编辑器一样，从一个东西拖到另一个东西时的工作方式)，但我不知道如何画线当我从一个按钮拖到另一个按钮时。

所以我的问题是:如何从一个起始位置动态绘制一条线到当前“触摸”位置(就像 Xcode 中的助理编辑器一样)？

Answer 1

您可以使用 UIPanGestureRecognizer 获取手势事件并使用 UIBezierPath 绘制一个 CALayer。

UIPanGestureRecognizer 有一些手势状态，在这种情况下，我们需要处理三个状态来绘制线条。让我们将整个操作分成小块，以便更容易弄清楚要做什么。

在开始之前，您必须了解一件事。

// We can get current touch position via gesture recognizer.
let currentPanPoint = panRecognizer.location(in: self.view)

1. 获取线的起点并在状态 UIGestureRecognizerState.began 中创建一个 CALayer。

case .began:
    panGestureStartPoint = currentPanPoint
    self.view.layer.addSublayer(lineShape)

1. 获取状态UIGestureRecognizerState.changed中的线端点并创建一个UIBezierPath，分配UIBezierPath的CGPath到 CALayer 来画线。

case .changed:
    let linePath = UIBezierPath()
    linePath.move(to: panGestureStartPoint)
    linePath.addLine(to: currentPanPoint)

    lineShape.path = linePath.cgPath

1. 在 UIGestureRecognizerState.end 状态下从布局中删除该行。

case .ended:
    lineShape.path = nil
    lineShape.removeFromSuperlayer()

结合上面的片段，这里是示例代码。

class ViewController: UIViewController {
    @IBOutlet var dragFrom: UILabel!

    private lazy var lineShape: CAShapeLayer = {
        let lineShape = CAShapeLayer()
        lineShape.strokeColor = UIColor.blue.cgColor
        lineShape.lineWidth = 2.0

        return lineShape
    }()
    private var panGestureStartPoint: CGPoint = .zero
    private lazy var panRecognizer: UIPanGestureRecognizer = {
        return UIPanGestureRecognizer(target: self, action: #selector(panGestureCalled(_:)))
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.dragFrom.addGestureRecognizer(panRecognizer)
    }

    // MARK: Selectors
    func panGestureCalled(_: UIPanGestureRecognizer) {
        let currentPanPoint = panRecognizer.location(in: self.view)
        switch panRecognizer.state {
        case .began:
            panGestureStartPoint = currentPanPoint
            self.view.layer.addSublayer(lineShape)

        case .changed:
            let linePath = UIBezierPath()
            linePath.move(to: panGestureStartPoint)
            linePath.addLine(to: currentPanPoint)

            lineShape.path = linePath.cgPath
        case .ended:
            lineShape.path = nil
            lineShape.removeFromSuperlayer()
        default: break
        }
    }
}

它是这样工作的。 http://i.imgur.com/5JsFeoB.gifv

如果您想了解更多详细信息，这是 Apple 开发人员指南中的教程。 Learn how to draw shapes using Bezier Path