画一条可以像 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
,将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
【讨论】:
正是我想要的。完美运行!非常感谢!以上是关于画一条可以像 Swift 中的 Xcode 助手编辑器一样伸展的线的主要内容,如果未能解决你的问题,请参考以下文章