Android自定义View实现游戏摇杆键盘的方法示例

前言

本文主要给大家介绍的是关于android自定义view实现游戏摇杆键盘的相关内容，为什么会有这篇文章呢？因为在之前的一个项目，操作方向的方式为上下左右，左上需要同时按住左键和右键的方式进行操作。

如下图：

近来需要升级项目，操作方式改为类似王者荣耀的摇杆操作。

如下图：

好了，下面话不多说了，跟着小编来一起看看是如何实现的吧。

绘制背景

实现遥感按钮，需要绘制背景，绘制中心的遥感按钮。绘制遥感背景，需要创建一个remoteviewbg类，存储背景图，减少重复创建bitmap。

remoteviewbg类代码如下：

public class remoteviewbg {
private bitmap bitmapbg;
public remoteviewbg(bitmap bitmap) {
 bitmapbg = bitmap;
}

//背景的绘图函数
public void draw(canvas canvas, paint paint, rect src0 ,rect dst0 ) {
 canvas.drawbitmap(bitmapbg, src0, dst0, paint);
}
}

点击触摸事件

重写系统的触摸时间，判断触摸点在背景范围内还是背景范围外

 @override
public boolean ontouchevent(motionevent event) {
 if (event.getaction() == motionevent.action_down || event.getaction() ==  motionevent.action_move) {
 //   // 在范围外触摸
  if (math.sqrt(math.pow((bigcirclex - (int) event.getx()), 2) + math.pow((bigcircley - (int) event.gety()), 2)) >= bigcircler) {

   double temprad = getrad(bigcirclex, bigcircley, event.getx(), event.gety());

   getxy(bigcirclex, bigcircley, bigcircler, temprad);
  } else {//范围内触摸
   smallcirclex = (int) event.getx();
   smallcircley = (int) event.gety();
  }
 } else if (event.getaction() == motionevent.action_up) {
  smallcirclex = bigcirclex;
  smallcircley = bigcircley;

 }
 return true;
}

弧度计算

通过 event.getx() , event.gety()获得当前的触摸点，与圆点进行计算，获取弧度

/***
 * 得到两点之间的弧度
 */
public float getrad(float px1, float py1, float px2, float py2) {
 float x = px2 - px1;

 float y = py1 - py2;
 //斜边的长
 float z = (float) math.sqrt(math.pow(x, 2) + math.pow(y, 2));
 float cosangle = x / z;
 float rad = (float) math.acos(cosangle);

 if (py2 < py1) {
  rad = -rad;
 }
 return rad;
}

图形绘制

通过 canvas.drawcircle()和 canvas.drawbitmap()分别进行遥感按钮和遥感背景的绘制，注意对遥感背景的保存，如果在绘制的时候每次bitmapfactory.decoderesource()会增加耗时，因此只需在surfacecreated（）中进行bitmap的生成即可。

public void draw() {
 try {
  canvas = sfh.lockcanvas();
  canvas.drawcolor(getresources().getcolor(r.color.ghostwhite));


 // 指定图片绘制区域(左上角的四分之一)
  rect src = new rect(0, 0, bitmap.getwidth(), bitmap.getheight());

  // 指定图片在屏幕上显示的区域
  rect dst = new rect(bigcirclex - bigcircler, bigcircley - bigcircler, bigcirclex + bigcircler, bigcircley + bigcircler);
  // 绘制图片
  remoteviewbg.draw(canvas, paint, src, dst);
  paint.setcolor(0x70ff0000);
  //绘制摇杆
  canvas.drawcircle(smallcirclex, smallcircley, smallcircler, paint);
 } catch (exception e) {
  // todo: handle exception
 } finally {
  try {
   if (canvas != null)
    sfh.unlockcanvasandpost(canvas);
  } catch (exception e2) {
   e2.printstacktrace();
  }
 }
}

使用

在activity中动态添加

 relativelayout relativelayout = (relativelayout) findviewbyid(r.id.dance_relative_layout);
 remotesurfaceview = new remotesurfaceview(this);
 params = new relativelayout.layoutparams(relativelayout.layoutparams.match_parent, 
 relativelayout.layoutparams.match_parent);
 remotesurfaceview.setlayoutparams(params);
 relativelayout.addview(remotesurfaceview);

全部代码

public class remotesurfaceview extends surfaceview implements callback, runnable {
private float scale = this.getresources().getdisplaymetrics().density;
private thread th;
private surfaceholder sfh;
private canvas canvas;
private paint paint;
private boolean flag;

private int bigcirclex = 0;
private int bigcircley =0;
private int bigcircler = 0;
//摇杆的x,y坐标以及摇杆的半径
private float smallcirclex = 0;
private float smallcircley = 0;
private float smallcircler = 0;


private bitmap bitmap;
private remoteviewbg remoteviewbg;

public remotesurfaceview(context context) {
 super(context);
 sfh = this.getholder();
 sfh.addcallback(this);
 paint = new paint();
 paint.setantialias(true);
 setfocusable(true);
 setfocusableintouchmode(true);
 setzorderontop(true);
 getholder().setformat(pixelformat.transparent);

}

public void surfacecreated(surfaceholder holder) {
 int width = getwidth();
 int height = getheight();
 bigcirclex = width / 2;
 bigcircley = height / 2;
 bigcircler = width / 4;
 smallcirclex = width / 2;
 smallcircley = height / 2;
 smallcircler = width / 8;
 bitmap = bitmapfactory.decoderesource(getresources(), r.mipmap.fangxiang);
 remoteviewbg = new remoteviewbg(bitmap);
 th = new thread(this);
 flag = true;
 th.start();


}

/***
 * 得到两点之间的弧度
 */
public float getrad(float px1, float py1, float px2, float py2) {
 float x = px2 - px1;

 float y = py1 - py2;
 //斜边的长
 float z = (float) math.sqrt(math.pow(x, 2) + math.pow(y, 2));
 float cosangle = x / z;
 float rad = (float) math.acos(cosangle);

 if (py2 < py1) {
  rad = -rad;
 }
 return rad;
}

@override
public boolean ontouchevent(motionevent event) {
 if (event.getaction() == motionevent.action_down || event.getaction() == motionevent.action_move) {
  // 在范围外触摸
  if (math.sqrt(math.pow((bigcirclex - (int) event.getx()), 2) + math.pow((bigcircley - (int) event.gety()), 2)) >= bigcircler) {

   double temprad = getrad(bigcirclex, bigcircley, event.getx(), event.gety());

   getxy(bigcirclex, bigcircley, bigcircler, temprad);
  } else {//范围内触摸
   smallcirclex = (int) event.getx();
   smallcircley = (int) event.gety();
  }
 } else if (event.getaction() == motionevent.action_up) {
  smallcirclex = bigcirclex;
  smallcircley = bigcircley;

 }
 return true;
}




public void getxy(float x, float y, float r, double rad) {
 //获取圆周运动的x坐标
 smallcirclex = (float) (r * math.cos(rad)) + x;
 //获取圆周运动的y坐标
 smallcircley = (float) (r * math.sin(rad)) + y;
}

public void draw() {
 try {
  canvas = sfh.lockcanvas();
  canvas.drawcolor(getresources().getcolor(r.color.ghostwhite));


  // 指定图片绘制区域(左上角的四分之一)
  rect src = new rect(0, 0, bitmap.getwidth(), bitmap.getheight());

  // 指定图片在屏幕上显示的区域
  rect dst = new rect(bigcirclex - bigcircler, bigcircley - bigcircler, bigcirclex + bigcircler, bigcircley + bigcircler);
  // 绘制图片
  remoteviewbg.draw(canvas, paint, src, dst);
  paint.setcolor(0x70ff0000);
  //绘制摇杆
  canvas.drawcircle(smallcirclex, smallcircley, smallcircler, paint);
 } catch (exception e) {
  // todo: handle exception
 } finally {
  try {
   if (canvas != null)
    sfh.unlockcanvasandpost(canvas);
  } catch (exception e2) {
   e2.printstacktrace();
  }
 }
}

public void run() {

 while (flag) {
  draw();
  try {
   thread.sleep(50);
  } catch (exception ex) {
   ex.printstacktrace();
  }
 }
}

public void surfacechanged(surfaceholder holder, int format, int width, int height) {


}

public void surfacedestroyed(surfaceholder holder) {
 flag = false;

}
 }

总结

以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。