Android App开发超实用实例 | OpenGL在Android手机上通过手指滑动浏览全景图

清华计算机学堂 2022-11-11

586

OpenGL(Open Graphics Library)是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口(API)，它由数百个不同的函数调用组成，用来呈现复杂的三维景象。下面这个实例演示了使用OpenGL在Android手机上通过手指滑动浏览全景图。

实例功能

此实例主要通过使用GLSurfaceView控件加载自定义OpenGL渲染器Renderer，然后在该Renderer中加载全景图像，实现通过手指滑动浏览全景图。当实例运行之后，在屏幕上任意滑动手指，即可浏览全景图的各个部分，效果分别如图1(a)和图1(b)所示。

■ 图1

实现代码

public class MainActivity extends Activity {
 GLSurfaceView myGLSurfaceView;
 float myRawX, myRawY; //记录手指触摸点位置坐标
 double myFlingX, myFlingY; //记录手指最终滑动位置坐标
 double myDeltaX, myDeltaY; //记录手指单次滑动位置坐标
 MyRenderer myRenderer;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  myGLSurfaceView=new GLSurfaceView(this);
  myGLSurfaceView.setLayoutParams(new ViewGroup.LayoutParams(-1, -1));
  myGLSurfaceView.setEGLContextClientVersion(2);
  //对图像资源进行压缩处理，防止异常
  BitmapFactory.Options myOptions=new BitmapFactory.Options();
  //inSampleSize可调整，值过大可能会造成图像严重失真
  myOptions.inSampleSize=3;
  //加载指定全景图像资源，建议调整原始全景图像的宽高比为2:1
  Bitmap myBitmap=BitmapFactory.decodeResource(
          getResources(),R.mipmap.myimage1, myOptions);
  myRenderer=new MyRenderer(myBitmap);
  myGLSurfaceView.setRenderer(myRenderer);
  myGLSurfaceView.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
  setContentView(myGLSurfaceView);
 }
 @Override
 public boolean onTouchEvent(MotionEvent event){
  //处理手指拖拽滑动事件
  if(event.getAction()==MotionEvent.ACTION_DOWN){
   myRawX =event.getRawX();
   myRawY =event.getRawY();
  }else if(event.getAction()==MotionEvent.ACTION_MOVE){
   float myDistanceX= myRawX -event.getRawX();
   float myDistanceY= myRawY -event.getRawY();
   //防止摄像机视角移动过快
   myDistanceX=0.1f*(-myDistanceX)/
           getWindowManager().getDefaultDisplay().getWidth();
   myDistanceY=0.1f*myDistanceY/
           getWindowManager().getDefaultDisplay().getHeight();
   //根据拖拽长度计算三维空间对应方向的夹角
   myDeltaY =myDistanceY*180/(Math.PI*3);
   if(myDeltaY + myFlingY >Math.PI/2){
    myDeltaY =Math.PI/2- myFlingY;
   }
   if(myDeltaY + myFlingY <-Math.PI/2){
    myDeltaY =-Math.PI/2- myFlingY;
   }
   myDeltaX =myDistanceX*180/(Math.PI*3);
   //调整摄像机视角
   myRenderer.myX =(float)(3*Math.cos(myFlingY + myDeltaY)
           * Math.sin(myFlingX + myDeltaX));
   myRenderer.myY =(float)(3*Math.sin(myFlingY + myDeltaY));
   myRenderer.myZ =(float)(3*Math.cos(
           myFlingY+ myDeltaY)* Math.cos(myFlingX + myDeltaX));
   myGLSurfaceView.requestRender();
  }else if (event.getAction()==MotionEvent.ACTION_UP){
   myFlingX += myDeltaX;
   myFlingY += myDeltaY;
  }
  return true;
 }
}