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

Posted

技术标签:

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

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

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

所以我的问题是:我如何动态地从一个起始位置画一条线到当前的“触摸”位置(就像 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,将UIBezierPathCGPath分配给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

【讨论】:

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

以上是关于画一条可以像 Swift 中的 Xcode 助手编辑器一样伸展的线的主要内容,如果未能解决你的问题,请参考以下文章

在 Swift 3.x 中使用 UIBezierPath 画一条线

Swift 从一个圆的中心到另一个圆的边缘画一条线

在html中画一条绿色线条的标签是啥?

使用strokeColor,从中心到圆周画一条线

pbxprojHelper--Xcode工程文件助手

在自定义视图中画一条线