32

我有一个SurfaceView用于绘制图像的图像,我想将它们叠加到手机摄像头的实时馈送上。

目前,SurfaceView包含图像的图像具有白色背景,但如果我要将它们叠加到手机的摄像头馈送上,它们必须是透明的。相机和动画绘制不能同时进行SurfaceView

追求使用涉及管理相机和绘制图像的多个视图的最佳课程是什么?能不能做成SurfaceView透明的?

4

5 回答 5

20

好吧,这就是我的做法……我希望有人发现它有用,尽管高通 AR 的东西已经过时了……它可能已经过时了……哦,基本上它的作用是——从那个 Android 示例中生成两个时髦的立方体,附加功能介绍的是触摸事件,尽管旋转矢量偏离了很多 - 无论如何只是为了演示目的,当然立方体覆盖在可以在屏幕上移动的相机预览顶部。


     public class TakeRecieptPicture extends Activity implements Callback {
    private Camera camera;
    private SurfaceView mSurfaceView;
    SurfaceHolder mSurfaceHolder;

    private TouchSurfaceView mGLSurfaceView;

    ShutterCallback shutter = new ShutterCallback(){

        @Override
        public void onShutter() {
            // TODO Auto-generated method stub
            // No action to be perfomed on the Shutter callback.

        }

       };
    PictureCallback raw = new PictureCallback(){
        @Override
        public void onPictureTaken(byte[] data, Camera camera) {
            // TODO Auto-generated method stub
            // No action taken on the raw data. Only action taken on jpeg data.
      }

       };

    PictureCallback jpeg = new PictureCallback(){

        @Override
        public void onPictureTaken(byte[] data, Camera camera) {
            // TODO Auto-generated method stub

            FileOutputStream outStream = null;
            try{
                outStream = new FileOutputStream("/sdcard/test.jpg");
                outStream.write(data);
                outStream.close();
            }catch(FileNotFoundException e){
                Log.d("Camera", e.getMessage());
            } catch (IOException e) {
                // TODO Auto-generated catch block
                Log.d("Camera", e.getMessage());
            }

        }

       };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
    WindowManager.LayoutParams.FLAG_FULLSCREEN);


         mGLSurfaceView = new TouchSurfaceView(this); 
     addContentView(mGLSurfaceView, new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));

        mSurfaceView = new SurfaceView(this);
         addContentView(mSurfaceView, new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
       mSurfaceHolder = mSurfaceView.getHolder();
       mSurfaceHolder.addCallback(this);
       mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
       mSurfaceHolder.setFormat(PixelFormat.TRANSLUCENT|LayoutParams.FLAG_BLUR_BEHIND); 
       }

    private void takePicture() {
        // TODO Auto-generated method stub
        camera.takePicture(shutter, raw, jpeg);
    }

    @Override
    public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
        // TODO Auto-generated method stub
        Camera.Parameters p = camera.getParameters();
        p.setPreviewSize(arg2, arg3);
        try {
        camera.setPreviewDisplay(arg0);
        } catch (IOException e) {
        e.printStackTrace();
        }
        camera.startPreview();
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        // TODO Auto-generated method stub
    camera = Camera.open();
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        // TODO Auto-generated method stub
        camera.stopPreview();
        camera.release();
    }
    }
   

TouchSurfaceView 定义如下:


   class TouchSurfaceView extends GLSurfaceView {  

    public TouchSurfaceView(Context context) {       
        super(context); 
        cr  = new CubeRenderer(true);
        this.setEGLConfigChooser(8, 8, 8, 8, 16, 0);
        this.setRenderer(cr);
        this.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);  
        this.getHolder().setFormat(PixelFormat.TRANSPARENT);

        }  

    public boolean onTrackballEvent(MotionEvent e) {     
        cr.mAngleX += e.getX() * TRACKBALL_SCALE_FACTOR;      
        cr.mAngleY += e.getY() * TRACKBALL_SCALE_FACTOR;    
        requestRender();   
        return true;    }   

    @Override
    public boolean onTouchEvent(MotionEvent e) {      
        float x = e.getX();       
        float y = e.getY();     
        switch (e.getAction()) {    
        case MotionEvent.ACTION_MOVE:     
            float dx = x - mPreviousX;         
            float dy = y - mPreviousY;           
            cr.mAngleX += dx * TOUCH_SCALE_FACTOR;   
            cr.mAngleY += dy * TOUCH_SCALE_FACTOR;       
            requestRender();      
            }     
        mPreviousX = x;  
        mPreviousY = y;     
        return true;  

    }
    private final float TOUCH_SCALE_FACTOR = 180.0f / 320;  
    private final float TRACKBALL_SCALE_FACTOR = 36.0f;   
    public  CubeRenderer cr ;
    private float mPreviousX;   
    private float mPreviousY;


}

CubeRenderer 由下式给出:


    class CubeRenderer implements GLSurfaceView.Renderer {  
    public CubeRenderer(boolean useTranslucentBackground) { 
        mTranslucentBackground = useTranslucentBackground;   
        mCube = new Cube();  
       }  


    public void onDrawFrame(GL10 gl) {  
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);  
        gl.glMatrixMode(GL10.GL_MODELVIEW);     
        gl.glLoadIdentity();    
        gl.glTranslatef(0, 0, -5.0f);  
        gl.glRotatef(mAngle,        0, 1, 0);  
        gl.glRotatef(mAngle*0.25f,  1, 0, 0);     
        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); 
        gl.glEnableClientState(GL10.GL_COLOR_ARRAY);    
        mCube.draw(gl);      
        gl.glRotatef(mAngle*2.0f, 0, 1, 1);    
        gl.glTranslatef(0.5f, 0.5f, 0.5f);     
        mCube.draw(gl);     
        mAngle += 1.2f;  
        }  
    public void onSurfaceChanged(GL10 gl, int width, int height) {     
        gl.glViewport(0, 0, width, height);    
        float ratio = (float) width / height;     
        gl.glMatrixMode(GL10.GL_PROJECTION);       
        gl.glLoadIdentity();     
        gl.glFrustumf(-ratio, ratio, -1, 1, 1, 10);
        } 

    public void onSurfaceCreated(GL10 gl, EGLConfig config) {      

        gl.glDisable(GL10.GL_DITHER);     
        gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_FASTEST);   
        if (mTranslucentBackground) {          
            gl.glClearColor(0,0,0,0);      
            } else {        
                gl.glClearColor(1,1,1,1);     
                }       
        gl.glEnable(GL10.GL_CULL_FACE);     
        gl.glShadeModel(GL10.GL_SMOOTH);     
        gl.glEnable(GL10.GL_DEPTH_TEST);   
        }  

    public void setAngle(float _angle){

    }
    private boolean mTranslucentBackground;  
    private Cube mCube;  
    private float mAngle;
      public  float mAngleX;  
       public float mAngleY;

}
   

最后 Cube 本身由下式给出:


    class Cube{   
    public Cube()  
    {        int one = 0x10000;    
    int vertices[] = {  
            -one, -one, -one,   
            one, -one, -one,     
            one,  one, -one,      
            -one,  one, -one,           
            -one, -one,  one,         
            one, -one,  one,           
            one,  one,  one,          
            -one,  one,  one,        };  

    float[] colors = {      
            0f,    0f,    0f,  0.5f, 
            1f ,  0f,  0f, 0.1f,    
            1f,1f,0f,0.5f,   
            0f,  1f,    0f,  0.1f,      
            0f,    0f,  1f,  0.1f,       
            1f,    0f,  1f,  0.2f,      
            1f,  1f,  1f,  0.1f,        
            0f,  1f,  1f,  0.1f,        };    

    byte indices[] = {          
            0, 4, 5,    0, 5, 1,    
            1, 5, 6,    1, 6, 2,     
            2, 6, 7,    2, 7, 3,      
            3, 7, 4,    3, 4, 0,      
            4, 7, 6,    4, 6, 5,       
            3, 0, 1,    3, 1, 2        };   


    ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length*4);   
    vbb.order(ByteOrder.nativeOrder());     
    mVertexBuffer = vbb.asIntBuffer();    
    mVertexBuffer.put(vertices);      
    mVertexBuffer.position(0);      
    ByteBuffer cbb = ByteBuffer.allocateDirect(colors.length*4);   
    cbb.order(ByteOrder.nativeOrder());     
    mColorBuffer = cbb.asFloatBuffer();      
    mColorBuffer.put(colors);     
    mColorBuffer.position(0);      
    mIndexBuffer = ByteBuffer.allocateDirect(indices.length);     
    mIndexBuffer.put(indices);     
    mIndexBuffer.position(0);    } 
    public void draw(GL10 gl)    {    
        gl.glFrontFace(gl.GL_CW);     
        gl.glVertexPointer(3, gl.GL_FIXED, 0, mVertexBuffer);  
        gl.glColorPointer(4, gl.GL_FIXED, 0, mColorBuffer);     
        gl.glDrawElements(gl.GL_TRIANGLES, 36, gl.GL_UNSIGNED_BYTE, mIndexBuffer);    } 

    private IntBuffer   mVertexBuffer;  
    private FloatBuffer   mColorBuffer;   
    private ByteBuffer  mIndexBuffer;

    }
   

好吧,希望有人发现这很有用...

于 2010-10-05T20:11:09.780 回答
6

我也在做增强的应用程序,遇到了同样的问题。关于如何正确解决它的信息很少。但我发现了一个名为mixare的框架——它允许你为安卓创建 AR 应用。您绝对应该查看它的源代码- 它看起来很有希望。希望这会帮助你。

于 2010-08-27T19:32:13.940 回答
6

我通过以下方法取得了成功。

首先制作一个看起来像这样的布局 xml 文件(注意两个视图的顺序):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical">

    <com.yourcustom.OverlayView
        android:id="@+id/overlay" android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    </com.yourcustom.OverlayView>

    <SurfaceView android:id="@+id/surface"
        android:layout_width="fill_parent" android:layout_height="fill_parent">
    </SurfaceView>

</FrameLayout>

OverlayViewSurfaceView绘图和动画线程实现的子类。另一个 SurfaceView 将是处理相机预览的表面。你的内心onCreate应该像这样设置你的观点:

    mView = (OverlayView)this.findViewById(R.id.overlay);
    mView.getHolder().setFormat(PixelFormat.TRANSLUCENT); 

    mSurfaceView = (SurfaceView)this.findViewById(R.id.surface);
    mSurfaceHolder = mSurfaceView.getHolder();
    mSurfaceHolder.addCallback(this);
    mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);

您应该添加一个SurfaceHolder.Callback实现来SurfaceHolder处理mView动画线程。在子类中实现此功能并使用动画/绘图线程的示例可以在此处的旧 LunarLander 示例中找到:http: //developer.android.com/resources/samples/LunarLander/src/com/example/android/lunarlander/ LunarView.html

除此之外,您设置相机 SurfaceView 的方式与此示例相同:http: //developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/CameraPreview.html

于 2010-08-31T08:23:17.380 回答
1

这段代码有帮助吗?

于 2010-08-23T14:54:07.533 回答
0

刚刚发现手机升级到4.0.4有点奇怪的余震。我在全屏相机预览上有一个半透明的 gl 全屏覆盖,它在早期的 ics 版本上运行得非常愉快(我认为它是 4.0.3,但不确定)。升级到 4.0.4 后,预览有点乱,相机图像在相机图像的任何较亮部分(较暗部分看起来不错)上显示出迷幻的主要颜色区域。最终发现将glclearcolour从0.5、0.5、0.5改为0,0,0,0。0 解决了。

似乎即使在 gl 覆盖的未使用部分上的 alpha 为零,混合功能仍在考虑灰色 gl 背景。

于 2012-10-18T10:25:47.743 回答