画一条可以像 Swift 中的 Xcode 助手编辑器一样伸展的线答案

【问题标题】：Draw a line that can stretch like the Xcode assistant editor in Swift画一条可以像 Swift 中的 Xcode 助手编辑器一样伸展的线
【发布时间】：2017-05-25 01:48:54
【问题描述】：

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

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

所以我的问题是：我如何动态地从一个起始位置画一条线到当前的“触摸”位置（就像 Xcode 中的助手编辑器一样）？

【问题讨论】：

你的第一段有你需要的答案，并结合处理触摸事件。

标签： ios swift xcode

【解决方案1】：

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

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

在开始之前，你必须知道一件事。

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

获取线路起点并在状态UIGestureRecognizerState.began 中创建CALayer。

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

获取状态UIGestureRecognizerState.changed的线端点并创建UIBezierPath，将UIBezierPath的CGPath分配给CALayer以绘制线。

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

    lineShape.path = linePath.cgPath

从处于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

【讨论】：

正是我想要的。完美运行！非常感谢！