写在前面的：
实现限制在圆形区域拖动，虽然逻辑也很简单，但是调试起来还挺费心思的！…… 这里将我自己的经验写下来，供需要的人参考！
最终效果：
动图效果
实现思路：
- 实现小圆拖动
- 限制拖动范围
实现小圆拖动：
实现小圆拖动的逻辑比较简单，给小圆添加拖动手势就可以了！...
为了简单起见（偷懒的借口^_^），这里直接用 UIButton 通过设置圆角（高度的一半，以下的圆形拖动区域也是一样的做法）
var circle: UIView! // 定义【圆形】区域
var button: UIButton! // 定义【拖动】按钮
设置圆角以及添加拖动手势
// 添加【拖动】按钮
button = UIButton(frame: CGRect(x: origin.x - bRadius, y: origin.y - bRadius, width: bRadius * 2, height: bRadius * 2))
button.setTitle("测试", for: .normal)
button.backgroundColor = UIColor.orange // 设置背景色
button.layer.cornerRadius = bRadius // 设置圆角半径
let pan = UIPanGestureRecognizer(target: self, action: #selector(dragButton)) // 定义【拖动】手势
button.addGestureRecognizer(pan) // 添加【拖动】手势
定义拖动手势handler
@objc func dragButton(_ pan: UIPanGestureRecognizer) {
let center = pan.location(in: pan.view!.superview)
switch pan.state {
case .changed:
let newCenter = dragLimitInCircle(target: center, origin: origin, radius: cRadius) // 限制在【圆形】上拖动
button.center = newCenter // 设置【拖动】按钮 中心点位置
default:
break
}
}
限制拖动范围：
绘制大圆拖动限制区域（这里同样通过设置圆角的方法实现！）
// 添加【圆形】区域
circle = UIView(frame: CGRect(x: origin.x - cRadius, y: origin.y - cRadius, width: cRadius * 2, height: cRadius * 2))
circle.backgroundColor = UIColor.blue // 设置背景色
circle.layer.cornerRadius = cRadius // 设置圆角半径
view.addSubview(circle) // 添加【圆形】区域 到【主视图】
限制在圆形区域里面拖动
// 限制【圆形】区域拖动 方法
func dragLimitInCircle(target ePoint: CGPoint, origin oPoint: CGPoint, radius: CGFloat) -> CGPoint {
var newPoint: CGPoint
let x0 = ePoint.x - oPoint.x // 坐标 X
let y0 = ePoint.y - oPoint.y // 坐标 Y
let distance = sqrt(pow(x0, 2) + pow(y0, 2)) // 拖动距离
if distance <= radius - bRadius {
newPoint = ePoint
} else {
let angle = atan(y0 / x0)
var a: CGFloat = 1 // 定义【翻转】系数
if x0 < 0 {
// 第二象限 | 第三象限
a = -a
}
let x = oPoint.x + a * (radius - bRadius) * cos(angle)
let y = oPoint.y + a * (radius - bRadius) * sin(angle)
newPoint = CGPoint(x: x, y: y)
}
return newPoint
}
完整代码：
//
// DragInCircle.swift
// UIKit-basic
//
// Created by Qire_er on 2021/11/26.
//
import UIKit
class DragInCircleVC: UIViewController {
var circle: UIView! // 定义【圆形】区域
var button: UIButton! // 定义【拖动】按钮
let dWidth = UIScreen.main.bounds.width //【设备】宽度
let dHeight = UIScreen.main.bounds.height //【设备】高度
let cRadius: CGFloat = 160 // 定义【圆形】区域 半径
let bRadius: CGFloat = 30 // 定义【拖动】按钮 半径
var origin: CGPoint {
CGPoint(x: dWidth / 2, y: dHeight / 2)
} // 【原点】位置
override func viewDidLoad() {
super.viewDidLoad()
// 添加【圆形】区域
circle = UIView(frame: CGRect(x: origin.x - cRadius, y: origin.y - cRadius, width: cRadius * 2, height: cRadius * 2))
circle.backgroundColor = UIColor.blue // 设置背景色
circle.layer.cornerRadius = cRadius // 设置圆角半径
view.addSubview(circle) // 添加【圆形】区域 到【主视图】
// 添加【拖动】按钮
button = UIButton(frame: CGRect(x: origin.x - bRadius, y: origin.y - bRadius, width: bRadius * 2, height: bRadius * 2))
button.setTitle("测试", for: .normal)
button.backgroundColor = UIColor.orange // 设置背景色
button.layer.cornerRadius = bRadius // 设置圆角半径
let pan = UIPanGestureRecognizer(target: self, action: #selector(dragButton)) // 定义【拖动】手势
button.addGestureRecognizer(pan) // 添加【拖动】手势
view.addSubview(button) // 添加【拖动】按钮 到【主视图】
view.backgroundColor = UIColor.white
}
@objc func dragButton(_ pan: UIPanGestureRecognizer) {
let center = pan.location(in: pan.view!.superview)
switch pan.state {
case .changed:
let newCenter = dragLimitInCircle(target: center, origin: origin, radius: cRadius) // 限制在【圆形】上拖动
button.center = newCenter // 设置【拖动】按钮 中心点位置
default:
break
}
}
// 限制【圆形】区域拖动 方法
func dragLimitInCircle(target ePoint: CGPoint, origin oPoint: CGPoint, radius: CGFloat) -> CGPoint {
var newPoint: CGPoint
let x0 = ePoint.x - oPoint.x // 坐标 X
let y0 = ePoint.y - oPoint.y // 坐标 Y
let distance = sqrt(pow(x0, 2) + pow(y0, 2)) // 拖动距离
if distance <= radius - bRadius {
newPoint = ePoint
} else {
let angle = atan(y0 / x0)
var a: CGFloat = 1 // 定义【翻转】系数
if x0 < 0 {
// 第二象限 | 第三象限
a = -a
}
let x = oPoint.x + a * (radius - bRadius) * cos(angle)
let y = oPoint.y + a * (radius - bRadius) * sin(angle)
newPoint = CGPoint(x: x, y: y)
}
return newPoint
}
}
网友评论