手游摇杆（零）摇杆设计原理

摇杆是ARPG游戏中的标配，目前摇杆主要有两种方式：
1. 固定式
2. 跟随式

一 摇杆显示

假设
外环旧的位置：posBig
外环新位置：posBigNew
外环半径：R
外环圆心：O
内环旧的位置：posSmall
外环圆心：o
内环新的位置：posSmallNew
触摸位置:p

1 固定式

内环在外环范围内移动；
外环位置固定，不能移动；

更新策略：
判断触摸位置p是否在外环内，是则直接内环设置内环到p点，如果不是，则：

op = Vec2(O.x - posSmall.x, O.y - posSmall.y); // 计算新旧位置之间的向量op.normallize();// 归一化posSmallNew = posSmall + op * R

2 跟随式

内环始终跟着p点移动；
外环当触摸点P在外环范围内时，大环不移动；否则，外环会跟随内环移动；

更新策略：
如果触摸点超出之后，外环位置计算规则为：

op = Vec2(p.x - posSmall.x, p.y - posSmall.y); // 计算新旧位置之间的向量op.normallize();// 归一化posBigNew = posSmall - op * R

二 方向控制

方向控制分为四方向和把方向两种，有一种统一的计算方式，就是计算内外环圆心的角度，然后根据角度将其定义为四方向：上下左右，八方向加上：左上，右上，左下，右下。

角度可以使用三角函数计算：

//得到两点x的距离float x = o.x - O.x;//得到两点y的距离float y = o.y - O.y;//算出斜边长度float l = sqrt(Math.pow(x,2) + Math.pow(y,2));//得到这个角度的余弦值var cosAngle = x / l;//通过反余弦定理获取到期角度的弧度var rad = acos(cosAngle);

四方向判断：

if(p_rad>=-PI/4&&p_rad<PI/4){   R_Direction="right";}else if(p_rad>=PI/4&&p_rad<3*PI/4){   R_Direction="up";}else if((p_rad>=3*PI/4&&p_rad<=PI)||(p_rad>=-PI&&p_rad<-3*PI/4)){   R_Direction="left";}else if(p_rad>=-3*PI/4&&p_rad<-PI/4){   R_Direction="down";}

八方向判断：

if(p_rad>=-PI/8&&p_rad<PI/8){   R_Direction="right";}else if(p_rad>=PI/8&&p_rad<3*PI/8){   R_Direction="up";}else if((p_rad>=7*PI/8&&p_rad<=PI)||(p_rad>=-PI&&p_rad<-7*PI/8)){   R_Direction="left";}else if(p_rad>=-5*PI/5&&p_rad<-3*PI/8){   R_Direction="down";}else fi(p_rad>=5*PI/8&&p_rad<7*PI/8) {    R_Direction = "left_up";}else if(p_rad>=-7*PI/8&&p_rad<-5*PI/8){    R_Direction = "left_down";}else if(p_rad>=PI/8&&p_rad<3*PI/8){    R_Direction = "rigth_up";}else if(p_rad>=-3*PI/8&&p_rad<-PI/8){    R_Direction = "rigth_down";}

后面就是根据方向和任务移动的速度，修改人物的坐标值。