使用SurfaceView渲染控件的bitmap实现预览效果

2,841 阅读4分钟

SurfaceView和View的区别

SurfaceView是在一个新起的单独线程中可以重新绘制画面,而View必须在UI的主线程中更新画面。那么在UI的主线程中更新画面可能会引发问题,比如你更新画面的时间过长,那么你的主UI线程会被你正在画的函数阻塞。那么将无法响应按键,触屏等消息。当使用SurfaceView由于是在新的线程中更新画面所以不会阻塞你的UI主线程。但这也带来了另外一个问题,就是事件同步。比如你触屏了一下,你需要SurfaceView中thread处理,一般就需要有一个event queue的设计来保存touch event,这会稍稍复杂一点,因为涉及到线程同步。

所以基于以上,根据渲染的特点,一般分成两类。

1 被动更新画面的。比如棋类,这种用View就好了。因为画面的更新是依赖于 onTouch 来更新,可以直接使用invalidate。因为这种情况下,这一次Touch和下一次的Touch需要的时间比较长些,不会产生影响。

2 主动更新。比如一个人在一直跑动。这就需要一个单独的thread不停的重绘人的状态,避免阻塞main UI thread。所以显然View不合适,需要SurfaceView来控制。

SurfaceView简介

在一般的情况下,应用程序的View都是在相同的GUI线程中绘制的。这个主应用程序线程同时也用来处理所有的用户交互(例如,按钮单击或者文本输入)。 我们可以把把容易阻塞的处理移动到后台线程中。遗憾的是,对于一个View的onDraw方法,不能这样做,因为从后台线程修改一个GUI元素会被显式地禁止的。 当需要快速地更新View的UI,或者当渲染代码阻塞GUI线程的时间过长的时候,SurfaceView就是解决上述问题的最佳选择。

SurfaceView封装了一个Surface对象,而不是Canvas。这一点很重要,因为Surface可以使用后台线程绘制。对于那些资源敏感的操作,或者那些要求快速更新或者高速帧率的地方,例如,使用3D图形,创建游戏,或者实时预览摄像头,这一点特别有用。

独立于GUI线程进行绘图的代价是额外的内存消耗,所以,虽然它是创建定制的View的有效方式--有时甚至是必须的,但是使用SurfaceView的时候仍然要保持谨慎。

  1. 何时应该使用SurfaceView?

SurfaceView使用的方式与任何View所派生的类都是完全相同的。可以像其他View那样应用动画,并把它们放到布局中。

  1. 创建一个新的SurfaceView控件

要创建一个新的SurfaceView,需要创建一个新的扩展了SurfaceView的类,并实现SurfaceHolder.Callback。

SurfaceHolder回调可以在底层的Surface被创建和销毁的时候通知View,并传递给它对SurfaceHolder对象的引用,其中包含了当前有效的Surface。

一个典型的Surface View设计模型包括一个由Thread所派生的类,它可以接收对当前的SurfaceHolder的引用,并独立地更新它。

使用SurfaceView绘制bitmap

实现原理就是:

1、首先获得控件的View对象。我们可以通过new一个控件对象,并实现他的onMeasure、onLayout、onDraw方法。原始的View对象可能具有触摸事件响应,但是我们这个是预览图,所以不用考虑。只需要把原始的View对象的数据设置进去就可以。

2、需要获得View的bitmap。可以单独开一个线程进行View到bitmap的转换,然后将获得的bitmap绘制到SurfaceView的canvas上。

public class RenderThread extends Thread{
    private final Object LOCK=new Object();
    private volatile boolean isRunning=false;
    private View preview;
    public RenderThread(@NonNull View preview) {
        super("RenderThread");
        this.preview = preview;
    }

    @Override
    public synchronized void start() {
        isRunning=true;
        super.start();
    }

    @Override
    public void run() {
        super.run();
        while(isRunning){
            //Drawing the preview on this canvas.
            synchronized (LOCK) {
                preview.measure(View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED),
                        View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED));
                int measuredWidth = preview.getMeasuredWidth();
                int measuredHeight = preview.getMeasuredHeight();
                preview.layout(0,0,measuredWidth,measuredHeight);

                final int width = getWidth();
                float scale=width*1f/measuredWidth;
                final int height = (int) (scale*measuredHeight);
                setMeasuredDimension(width,height);
                post(new Runnable() {
                    @Override
                    public void run() {
                        SurfaceHolder holder = getHolder();
                        holder.setFixedSize(width,height);
                    }
                });
                previewBitmap=Bitmap.createBitmap(width,height, Bitmap.Config.RGB_565);
                Canvas canvas = new Canvas(previewBitmap);
                canvas.save();
                canvas.scale(scale,scale);
                //Draw the preview.
                preview.draw(canvas);
                canvas.restore();
            }
            SurfaceHolder holder = getHolder();
            Canvas canvas = null;
            try {
                canvas = holder.lockCanvas();
                if(null!=canvas&&null!=previewBitmap){
                    canvas.drawBitmap(previewBitmap, 0, 0, null);
                }
            } finally {
                if(null!=canvas){
                    holder.unlockCanvasAndPost(canvas);
                }
            }
            synchronized (LOCK) {
                try {
                    LOCK.wait();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    /**
     * notify the thread to update the preview again.
     */
    void updatePreView(){
        synchronized (LOCK){
            LOCK.notify();
        }
    }

    public void quit() {
        synchronized (LOCK){
            isRunning=false;
            LOCK.notify();
        }
    }
}

3、监听控件的状态变化。主要是控件的滑动监听和控件状态(点击效果)的变化。

状态监听:



@Override
public void childDrawableStateChanged(final View child) {
    super.childDrawableStateChanged(child);
    if(null!=layoutChildDrawableStateChangeListener&&hasWindowFocus()){
        int currentViewStateFlag = 0;
        if(child.isSelected()) currentViewStateFlag|=LayoutParams.VIEW_STATE_SELECTED;
        if(child.isEnabled()) currentViewStateFlag|=LayoutParams.VIEW_STATE_ENABLED;
        if(child.isActivated()) currentViewStateFlag|=LayoutParams.VIEW_STATE_ACTIVATED;
        if(child.isFocused()) currentViewStateFlag|=LayoutParams.VIEW_STATE_FOCUSED;
        if(child.isHovered()) currentViewStateFlag|=LayoutParams.VIEW_STATE_HOVERED;
        if(child.isPressed()) currentViewStateFlag|=LayoutParams.VIEW_STATE_PRESSED;
        final LayoutParams layoutParams = (LayoutParams) child.getLayoutParams();
        //To avoid dispatch to many times, We use our custom view state flag to check if the view state is changed.
        if(currentViewStateFlag!=layoutParams.viewStateFlag){
            layoutParams.viewStateFlag=currentViewStateFlag;
            //更新对应的child view
            if(null!=previewBitmap){
                SurfaceHolder holder = getHolder();
                if(null!=holder){
                    //Update the bitmap
                    Canvas canvas = new Canvas(previewBitmap);
                    canvas.save();
                    int measuredWidth = preview.getMeasuredWidth();
                    final int width = getWidth();
                    float scale=width*1f/measuredWidth;
                    canvas.scale(scale,scale);
                    previewable.onChildChange(canvas,child);
                    canvas.restore();
    
                    Canvas lockCanvas=null;
                    try {
                        //Draw the cached bitmap.
                        lockCanvas = holder.lockCanvas();
                        if(null!=lockCanvas){
                            lockCanvas.drawBitmap(previewBitmap,0,0,null);
                            drawScrollRect(lockCanvas,zoomLayout,preview,scaleX, scaleY);
                        }
                    } finally {
                        if (null!=lockCanvas) {
                            holder.unlockCanvasAndPost(lockCanvas);
                        }
                    }
                    }
                }
        }
    }
}