UIPanGestureRecognizer - drag UIView only within a line path connecting 2 points - ios

Question

I have a line (CAShapeLayer) which is connecting two points. Those two points can be anywhere on the screen and their coordinates are known. The point in the middle also has a UIPanGestureRecognizer but I want it to be draggable only within the line (so it can't leave the line - the line must go directly through the center of the middle dot at any time).
I know that I can calculate the draggable position of the point with
let translation = gesture.translation(in: self.view)
and limit it by X or Y axis but what kind of calculation is needed here to drag it only within the line?

Answer 1

Try using the two end points to compute the slope-intercept form if the line between them (y= mx + b). Then plug the x-coordinate from the translation point into the line equation to calculate y. Finally, position the draggable point at (x, y).

Answer 2

thank you for your answers! I managed to find the most suitable solution. I use the formula from this answer:
https://stackoverflow.com/a/57383437/1088286
function getPositionAlongTheLine(x1, y1, x2, y2, percentage) {
return {x : x1 * (1.0 - percentage) + x2 * percentage, y : y1 * (1.0 - percentage) + y2 * percentage};
}
And that is the code I use in didMove: UIPanGestureRecogniser method:
touchPoint.center = getPositionAlongTheLine(firstPoint: mainPoint1,
secondPoint: mainPoint2,
percentage: percentage)
Where mainPoint1 and mainPoint2 are the side buttons. Works perfectly!

Answer 3

You can keep the "draggable circle" on the line by using a function to calculate the "closest point":
// get closest point on a line from a third point
private func closestPoint(_ pt1: CGPoint, pt2: CGPoint, pt3: CGPoint) -> CGPoint {
let vx = pt2.x - pt1.x
let vy = pt2.y - pt1.y
let ax = pt3.x - pt1.x
let ay = pt3.y - pt1.y
let u = (ax * vx + ay * vy) / (vx * vx + vy * vy)
return CGPoint(x: pt1.x + vx * u, y: pt1.y + vy * u)
}
Here's a demo implementation, using a CAShapeLayer for the line, another CAShapeLayer for the "draggable circle" and tracking the movement using touchesBegan / touchesMoved. If you want to use a view and pan gestures for the "draggable circle" the idea will be the same (and should be easy to convert):
UIView subclass:
class StayOnLineView: UIView {
public var lineEnds: [CGPoint] = [.zero, .zero] {
didSet {
guard lineEnds.count == 2 else {
fatalError("lineEnds must be 2 points!")
}
linePT1 = lineEnds[0]
linePT2 = lineEnds[1]
minX = min(linePT1.x, linePT2.x)
maxX = max(linePT1.x, linePT2.x)
minY = min(linePT1.y, linePT2.y)
maxY = max(linePT1.y, linePT2.y)
currentDragPoint = centerPointOnLine(linePT1, pt2: linePT2)
}
}
private var minX: CGFloat = 0
private var minY: CGFloat = 0
private var maxX: CGFloat = 0
private var maxY: CGFloat = 0
private var linePT1: CGPoint = .zero
private var linePT2: CGPoint = .zero
private var currentDragPoint: CGPoint = .zero
private var isDragging: Bool = false
private let lineLayer: CAShapeLayer = CAShapeLayer()
private let dragCircleLayer: CAShapeLayer = CAShapeLayer()
private let dragCircleDiameter: CGFloat = 24
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
layer.addSublayer(lineLayer)
lineLayer.strokeColor = UIColor.red.cgColor
lineLayer.lineWidth = 4
layer.addSublayer(dragCircleLayer)
dragCircleLayer.strokeColor = UIColor.blue.cgColor
dragCircleLayer.lineWidth = 2
dragCircleLayer.fillColor = UIColor.clear.cgColor
}
func centerPointOnLine(_ pt1: CGPoint, pt2: CGPoint) -> CGPoint {
return CGPoint(x: pt1.x + ((pt2.x - pt1.x) * 0.5), y: pt1.y + ((pt2.y - pt1.y) * 0.5))
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first {
let position = touch.location(in: self)
let dragRect = CGRect(x: currentDragPoint.x - dragCircleDiameter * 0.5, y: currentDragPoint.y - dragCircleDiameter * 0.5, width: dragCircleDiameter, height: dragCircleDiameter)
let dragPath = UIBezierPath(ovalIn: dragRect)
// only start dragging if touch is inside draggableCircle
isDragging = dragPath.contains(position)
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if isDragging {
if let touch = touches.first {
let position = touch.location(in: self)
// get closest point on the line from the touch
let p = closestPoint(linePT1, pt2: linePT2, pt3: position)
// keep point from going past the ends of the line
let x = min(max(p.x, minX), maxX)
let y = min(max(p.y, minY), maxY)
// update current drag point
currentDragPoint = CGPoint(x: x, y: y)
setNeedsLayout()
layoutIfNeeded()
}
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
isDragging = false
}
// get closest point on a line from a third point
private func closestPoint(_ pt1: CGPoint, pt2: CGPoint, pt3: CGPoint) -> CGPoint {
let vx = pt2.x - pt1.x
let vy = pt2.y - pt1.y
let ax = pt3.x - pt1.x
let ay = pt3.y - pt1.y
let u = (ax * vx + ay * vy) / (vx * vx + vy * vy)
return CGPoint(x: pt1.x + vx * u, y: pt1.y + vy * u)
}
override func layoutSubviews() {
super.layoutSubviews()
let linePath = UIBezierPath()
linePath.move(to: linePT1)
linePath.addLine(to: linePT2)
lineLayer.path = linePath.cgPath
let dragCircleRect = CGRect(x: currentDragPoint.x - dragCircleDiameter * 0.5, y: currentDragPoint.y - dragCircleDiameter * 0.5, width: dragCircleDiameter, height: dragCircleDiameter)
let dragCirclePath = UIBezierPath(ovalIn: dragCircleRect)
dragCircleLayer.path = dragCirclePath.cgPath
}
}
Example View Controller:
class DragOnLineViewController: UIViewController {
let testView = StayOnLineView()
override func viewDidLoad() {
super.viewDidLoad()
testView.translatesAutoresizingMaskIntoConstraints = false
testView.backgroundColor = .yellow
view.addSubview(testView)
// respect safe area
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
testView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
testView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
testView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
testView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
])
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
testView.lineEnds = [
CGPoint(x: 80.0, y: 80.0),
CGPoint(x: testView.frame.width - 80.0, y: testView.frame.height - 80.0)
]
}
}
Edit - simple example dragging a UIView with a pan gesture instead of dragging a CAShapeLayer using touches...
Simple UIView subclass - draws a line between two points:
class LineView: UIView {
public var lineEnds: [CGPoint] = [.zero, .zero] {
didSet {
guard lineEnds.count == 2 else {
fatalError("lineEnds must be 2 points!")
}
}
}
private let lineLayer: CAShapeLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
layer.addSublayer(lineLayer)
lineLayer.strokeColor = UIColor.red.cgColor
lineLayer.lineWidth = 4
}
override func layoutSubviews() {
super.layoutSubviews()
guard lineEnds.count == 2 else {
return
}
let linePath = UIBezierPath()
linePath.move(to: lineEnds[0])
linePath.addLine(to: lineEnds[1])
lineLayer.path = linePath.cgPath
}
}
Basic "draggable" view, using UIPanGestureRecognizer but limiting movement to a line between two points:
class DraggableCircleView: UIView {
public var lineEnds: [CGPoint] = [.zero, .zero] {
didSet {
guard lineEnds.count == 2 else {
fatalError("lineEnds must be 2 points!")
}
linePT1 = lineEnds[0]
linePT2 = lineEnds[1]
minX = min(linePT1.x, linePT2.x)
maxX = max(linePT1.x, linePT2.x)
minY = min(linePT1.y, linePT2.y)
maxY = max(linePT1.y, linePT2.y)
center = centerPointOnLine(linePT1, pt2: linePT2)
}
}
private var minX: CGFloat = 0
private var minY: CGFloat = 0
private var maxX: CGFloat = 0
private var maxY: CGFloat = 0
private var linePT1: CGPoint = .zero
private var linePT2: CGPoint = .zero
private var startPoint: CGPoint = .zero
private let dragCircleLayer: CAShapeLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
layer.addSublayer(dragCircleLayer)
dragCircleLayer.strokeColor = UIColor.blue.cgColor
dragCircleLayer.lineWidth = 2
dragCircleLayer.fillColor = UIColor.clear.cgColor
let p = UIPanGestureRecognizer(target: self, action: #selector(self.panHandler(_:)))
addGestureRecognizer(p)
}
#objc func panHandler(_ g: UIPanGestureRecognizer) -> Void {
let t = g.translation(in: self)
switch g.state {
case .began:
startPoint = center
case .changed:
let newPoint = CGPoint(x: startPoint.x + t.x, y: startPoint.y + t.y)
// get closest point on the line from the touch
let p = closestPoint(linePT1, pt2: linePT2, pt3: newPoint)
// keep point from going past the ends of the line
let x = min(max(p.x, minX), maxX)
let y = min(max(p.y, minY), maxY)
// update current center point
center = CGPoint(x: x, y: y)
default:
break
}
}
override func layoutSubviews() {
let dragCirclePath = UIBezierPath(ovalIn: bounds)
dragCircleLayer.path = dragCirclePath.cgPath
}
func centerPointOnLine(_ pt1: CGPoint, pt2: CGPoint) -> CGPoint {
return CGPoint(x: pt1.x + ((pt2.x - pt1.x) * 0.5), y: pt1.y + ((pt2.y - pt1.y) * 0.5))
}
// get closest point on a line from a third point
private func closestPoint(_ pt1: CGPoint, pt2: CGPoint, pt3: CGPoint) -> CGPoint {
let vx = pt2.x - pt1.x
let vy = pt2.y - pt1.y
let ax = pt3.x - pt1.x
let ay = pt3.y - pt1.y
let u = (ax * vx + ay * vy) / (vx * vx + vy * vy)
return CGPoint(x: pt1.x + vx * u, y: pt1.y + vy * u)
}
}
Simple view controller example with LineView and DraggableCircleView:
class DragViewOnLineViewController: UIViewController {
let dragCircleView = DraggableCircleView()
let lineView = LineView()
override func viewDidLoad() {
super.viewDidLoad()
lineView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(lineView)
lineView.backgroundColor = .green
lineView.addSubview(dragCircleView)
dragCircleView.frame = CGRect(origin: .zero, size: CGSize(width: 20, height: 20))
// respect safe area
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
lineView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
lineView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
lineView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
lineView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
])
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
lineView.lineEnds = [
CGPoint(x: 80.0, y: 80.0),
CGPoint(x: lineView.frame.width - 80.0, y: lineView.frame.height - 80.0)
]
dragCircleView.lineEnds = lineView.lineEnds
}
}