swift 实现圆形区域拖动

写在前面的：

实现限制在圆形区域拖动，虽然逻辑也很简单，但是调试起来还挺费心思的！…… 这里将我自己的经验写下来，供需要的人参考！

最终效果：

动图效果

实现思路：

• 实现小圆拖动
• 限制拖动范围

实现小圆拖动：

实现小圆拖动的逻辑比较简单，给小圆添加拖动手势就可以了！...
为了简单起见（偷懒的借口^_^），这里直接用 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
    }
}

（==完==）