Android自定义View游戏方向轮盘转向盘方向盘

在画之前做一些规划，把View分成6份：
一份就是小圆的半径，两份就是大圆的半径，大圆的圆心始终是中心，小圆位置根据手指变化，当我们手指超出大圆的范围时候就把他固定在大圆的边缘上（利用相似三角形来计算位置）。

    private void computePosition(float x, float y) {
        float dx = x-width/2;
        float dy = y-height/2;
        float hpy = (float) Math.sqrt(dx*dx+dy*dy);
        if (hpy <= maxR){
            minX = x;
            minY = y;
        }else{
            minX = dx * maxR / hpy + width/2;//由于零点是在中心
            minY = dy * maxR / hpy + height/2;//由于零点是在中心
        }
    }

传入手指的位置x,y，计算出小圆的中心坐标minX,minY;
完整代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

public class SteerView extends View {
    Paint pMax,pMin;
    int width,height;
    int maxR;
    int minR;
    float minX,minY;

    private void init(){
        pMax = new Paint();
        pMax.setAntiAlias(true);
        pMax.setColor(Color.parseColor("#999999"));

        pMin = new Paint();
        pMin.setAntiAlias(true);
        pMin.setColor(Color.parseColor("#555555"));
    }

    public SteerView(Context context) {
        super(context);
        init();
    }

    public SteerView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                computePosition(event.getX(),event.getY());
                break;
            case MotionEvent.ACTION_UP:
                minX = width/ 2;
                minY = height / 2;
                break;
        }
        invalidate();
        return true;
    }

    private void computePosition(float x, float y) {
        float dx = x-width/2;
        float dy = y-height/2;
        float hpy = (float) Math.sqrt(dx*dx+dy*dy);
        if (hpy <= maxR){
            minX = x;
            minY = y;
        }else{
            minX = dx * maxR / hpy + width/2;//由于零点是在中心
            minY = dy * maxR / hpy + height/2;//由于零点是在中心
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.parseColor("#eeeeee"));
        canvas.drawCircle(width/2,height/2,maxR,pMax);
        canvas.drawCircle(minX,minY,minR,pMin);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        width = right-left;
        height = bottom-top;
        minR = Math.min(width,height) / 6;
        maxR = minR*2;
        minX = width/ 2;
        minY = height / 2;
    }
}

到这里我们就画出了轮盘的一个功能，最后我们可以在computePosition函数里添加一个返回角度的功能。
首先先写一个接口，用来回调角度值，这里直接在自定义View里面接着写了。

public interface AngleCallback{
        public void onEvent(float angle);
    }

定义来使用

AngleCallback angleCallback;

    public void setAngleCallback(AngleCallback angleCallback) {
        this.angleCallback = angleCallback;
    }

在computePosition函数里添加一个返回角度的代码。

        float angle = -(float)Math.toDegrees((float) Math.atan(dy/dx));
        if (dx < 0){//二三象限
            angle += 180;
        }else if(dy > 0){//四象限
            angle += 360;
        }
        if (angleCallback!=null)//
            angleCallback.onEvent(angle);

最终自定义view的代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

public class SteerView extends View {
    Paint pMax,pMin;
    int width,height;
    int maxR;
    int minR;
    float minX,minY;

    AngleCallback angleCallback;

    public void setAngleCallback(AngleCallback angleCallback) {
        this.angleCallback = angleCallback;
    }

    private void init(){
        pMax = new Paint();
        pMax.setAntiAlias(true);
        pMax.setColor(Color.parseColor("#999999"));

        pMin = new Paint();
        pMin.setAntiAlias(true);
        pMin.setColor(Color.parseColor("#555555"));
    }

    public SteerView(Context context) {
        super(context);
        init();
    }

    public SteerView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                computePosition(event.getX(),event.getY());
                break;
            case MotionEvent.ACTION_UP:
                minX = width/ 2;
                minY = height / 2;
                break;
        }
        invalidate();
        return true;
    }

    private void computePosition(float x, float y) {
        float dx = x-width/2;
        float dy = y-height/2;
        float hpy = (float) Math.sqrt(dx*dx+dy*dy);
        if (hpy <= maxR){
            minX = x;
            minY = y;
        }else{
            minX = dx * maxR / hpy + width/2;//由于零点是在中心
            minY = dy * maxR / hpy + height/2;//由于零点是在中心
        }

        float angle = -(float)Math.toDegrees((float) Math.atan(dy/dx));
        if (dx < 0){//二三象限
            angle += 180;
        }else if(dy > 0){//四象限
            angle += 360;
        }
        if (angleCallback!=null)//
            angleCallback.onEvent(angle);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.parseColor("#eeeeee"));
        canvas.drawCircle(width/2,height/2,maxR,pMax);
        canvas.drawCircle(minX,minY,minR,pMin);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        width = right-left;
        height = bottom-top;
        minR = Math.min(width,height) / 6;
        maxR = minR*2;
        minX = width/ 2;
        minY = height / 2;
    }

    public interface AngleCallback{
        public void onEvent(float angle);
    }
}

在layout布局里添加view

    <com.hongying.shakegame.SteerView
        android:id="@+id/steer"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

在MainActivity里打印一下角度值：

public class MainActivity extends AppCompatActivity {
    SteerView steerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        steerView = findViewById(R.id.steer);
        steerView.setAngleCallback(new SteerView.AngleCallback() {
            @Override
            public void onEvent(float angle) {
                Log.d("TAG", String.valueOf(angle));
            }
        });
    }
}

完成了