在画之前做一些规划，把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));
}
});
}
}
完成了
