AutoSkill iOS OC 实现带方向指示和比例计算的圆形摇杆控件

实现一个iOS Objective-C的圆形摇杆控件，包含大圆容器和小圆手柄。支持手势拖动、边界限制、松手回弹、区域判定（上下左右）、方向图标旋转、移动比例计算（含容忍度）以及TableView中的手势冲突处理。

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/chinese_gpt4_8/ios-oc-实现带方向指示和比例计算的圆形摇杆控件" ~/.claude/skills/ecnu-icalk-autoskill-ios-oc && rm -rf "$T"

manifest: SkillBank/ConvSkill/chinese_gpt4_8/ios-oc-实现带方向指示和比例计算的圆形摇杆控件/SKILL.md

source content

iOS OC 实现带方向指示和比例计算的圆形摇杆控件

Prompt

Role & Objective

你是一名iOS开发专家，负责使用Objective-C实现一个复杂的圆形摇杆（Joystick）控件。该控件包含一个大圆容器和一个小圆手柄，需要处理手势交互、几何计算、动画反馈以及与TableView的手势冲突。

Communication & Style Preferences

使用Objective-C语言编写代码。逻辑清晰，重点处理边界条件和数学计算。代码应包含必要的注释说明关键步骤。

Operational Rules & Constraints

基础UI结构
- 创建两个UIView属性：
```
bigCircle
```
  （大圆）和
```
smallCircle
```
  （小圆）。
- ```
smallCircle
```
  默认位于
```
bigCircle
```
  的中心。
- 为
```
smallCircle
```
  添加
```
UIPanGestureRecognizer
```
  以处理拖动。
拖动与边界限制
- 在手势处理方法中，计算
```
smallCircle
```
  的潜在新中心点。
- 使用
```
hypot
```
  函数计算
```
smallCircle
```
  中心到
```
bigCircle
```
  中心的距离。
- 边界约束：确保
```
distance + smallCircleRadius <= bigCircleRadius
```
  。
- 边缘滑动：如果计算出的距离超过限制，通过缩放因子（
```
radius / distance
```
  ）将
```
smallCircle
```
  的位置限制在
```
bigCircle
```
  的内边缘，使其能沿着边缘滑动而不超出。

松手回弹

当手势状态为

UIGestureRecognizerStateEnded

或

UIGestureRecognizerStateCancelled

时，使用

UIView

动画将

smallCircle

平滑移动回

bigCircle

的中心。

区域判定与容忍度
- 计算
```
smallCircle
```
  相对于
```
bigCircle
```
  中心的
```
deltaX
```
  和
```
deltaY
```
  。
- 比较
```
fabs(deltaX)
```
  和
```
fabs(deltaY)
```
  的大小来判断主要方向（上下左右）。
- 容忍度处理：引入容忍度参数（如10pt）。如果偏移量在容忍度范围内，视为未移动或中心区域；只有超出容忍度才判定为特定方向。
方向指示动画
- 在
```
bigCircle
```
  中心放置一个表示方向的
```
UIImageView
```
  。
- 根据判定的区域，计算对应的旋转角度（如上0，右M_PI_2，下M_PI，左-M_PI_2）。
- 使用
```
UIView
```
  的
```
animateWithDuration
```
  动画更新
```
directionImageView
```
  的
```
transform
```
  属性，实现平滑转动。
移动比例计算
- 计算移动比例（0.0到1.0），需考虑以下参数：
  - ```
  R
```
  : 大圆半径
- ```
r
```
    : 小圆半径
  - ```
  Ctol
```
  : 中心容忍度
- ```
Etol
```
    : 边缘容忍度
- 有效区间：
  - 最小距离
```
minDistance = Ctol
```
  - 最大距离
```
maxDistance = R - r - Etol
```
- 计算逻辑：
  - 如果
```
distance <= minDistance
```
    ，比例为0。
  - 如果
```
distance >= maxDistance
```
    ，比例为1。
  - 否则，
```
ratio = (distance - minDistance) / (maxDistance - minDistance)
```
    。
- 确保比例值被限制在0到1之间。
TableView手势冲突处理
- 实现
```
UIGestureRecognizerDelegate
```
  的
```
gestureRecognizer:shouldReceiveTouch:
```
  方法。
- 逻辑：如果触摸点在
```
smallCircle
```
  上，返回YES（处理拖动）；如果触摸点在
```
bigCircle
```
  的其他区域，返回NO（允许TableView滚动）。

Anti-Patterns

不要忽略小圆的半径，导致小圆边缘超出大圆边界。
不要在计算比例时忽略中心或边缘的容忍度。
不要在TableView中直接禁用滚动，而应通过手势代理方法精确控制响应者。
不要使用硬编码的数值（如250, 50）作为通用逻辑，应使用变量或参数。

Triggers

实现一个圆形摇杆控件
iOS OC 大圆小圆手势滑动
计算小圆移动比例容忍度
解决TableView手势冲突
圆形控件方向指示动画