SurfaceView绘制图形

Posted 2020-08-30

一、什么是SurfaceView

官方文档：

SurfaceView是视图(View)的继承类，这个视图里内嵌了一个专门用于绘制的Surface。你可以控制这个Surface的格式和尺寸。Surfaceview控制这个Surface的绘制位置。
        surface是纵深排序(Z-ordered)的，这表明它总在自己所在窗口的后面。surfaceview提供了一个可见区域，只有在这个可见区域内 的surface部分内容才可见，可见区域外的部分不可见。surface的排版显示受到视图层级关系的影响，它的兄弟视图结点会在顶端显示。这意味者 surface的内容会被它的兄弟视图遮挡，这一特性可以用来放置遮盖物(overlays)(例如，文本和按钮等控件)。注意，如果surface上面 有透明控件，那么它的每次变化都会引起框架重新计算它和顶层控件的透明效果，这会影响性能。
        你可以通过SurfaceHolder接口访问这个surface，getHolder()方法可以得到这个接口。
        surfaceview变得可见时，surface被创建；surfaceview隐藏前，surface被销毁。这样能节省资源。如果你要查看 surface被创建和销毁的时机，可以重载surfaceCreated(SurfaceHolder)和 surfaceDestroyed(SurfaceHolder)。
        surfaceview的核心在于提供了两个线程：UI线程和渲染线程。这里应注意：
        1> 所有SurfaceView和SurfaceHolder.Callback的方法都应该在UI线程里调用，一般来说就是应用程序主线程。渲染线程所要访问的各种变量应该作同步处理。
        2> 由于surface可能被销毁，它只在SurfaceHolder.Callback.surfaceCreated()和 SurfaceHolder.Callback.surfaceDestroyed()之间有效，所以要确保渲染线程访问的是合法有效的surface。

 

二、SurfaceView绘制多个图形

   1.新建项目

 

   2.创建类MyView并继承SurfaceView、实现SurfaceHolder.CallBack接口

package com.example.surfaceviewdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

/**
 * Created by 袁磊 on 2017/2/6.
 * <p/>
 * 整个过程：
 * 1.继承SurfaceView并实现SurfaceHolder.Callback接口
 * 2.SurfaceView.getHolder()获得SurfaceHolder对象
 * 3.SurfaceHolder.addCallback(callback)添加回调函数
 * 4.SurfaceHolder.lockCanvas()获得Canvas对象并锁定画布
 * 5.Canvas绘画
 * 6.SurfaceHolder.unlockCanvasAndPost(Canvas canvas)结束锁定画图，并提交改变，将图形显示。
 */


public class MyView extends SurfaceView implements SurfaceHolder.Callback {
    private Paint paint = null;


    public MyView(Context context) {
        super(context);
        paint = new Paint();
        paint.setColor(Color.RED);
        getHolder().addCallback(this);//添加回调函数
    }

    /**
     * 1.绘制方法只在SurfaceHolder.Callback.surfaceCreated()
     * 和SurfaceHolder.Callback.surfaceDestroyed()之间有效
     * 2.若要改变某个图形必须调用canvas.save()和canvas.restore
     * 才不会影响到其他图形的绘制和操作
     */
    public void draw() {
        Canvas canvas = getHolder().lockCanvas();//创建Canvas对象，锁定画布

        canvas.drawColor(Color.WHITE);
        canvas.save();
        canvas.rotate(45, 50, 50);
        canvas.drawRect(0, 0, 100, 100, paint);
        canvas.restore();

        canvas.save();//先保存成可编辑状态
        canvas.rotate(90, getWidth() / 2, getHeight() / 2);//画布旋转90度(注释所说的改变图形操作)
        canvas.drawLine(0, getHeight() / 2, getWidth(), getHeight(), paint);
        canvas.restore();//改变图形结束之后复原

        canvas.drawLine(0, getHeight() / 2 + 100, getWidth(), getHeight() + 100, paint);

        getHolder().unlockCanvasAndPost(canvas);//绘制完毕后解锁画布
    }

    //在创建时激发，一般在这里调用画图的线程。
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        draw();
    }

    //在surface的大小发生改变时激发
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

    }

    //销毁时激发，一般在这里将画图的线程停止、释放
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {

    }
}

MyView

   

   3.MainActivity中使用

package com.example.surfaceviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MyView(this));
    }
}

MainActivity

 

   4.运行效果

   

 

三、SurfaceView绘制组合图形

   1.新建项目

   

   2.创建承载子视图容器类Container

package com.example.surfaceviewdemo;

import android.graphics.Canvas;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by 袁磊 on 2017/2/6.
 */
public class Container {
    private List<Container> children = null;
    private float x = 0, y = 0;//初始坐标


    public Container() {
        children = new ArrayList<>();
    }

    /**
     * 绘制
     *
     * @param canvas
     */
    public void draw(Canvas canvas) {
        canvas.save();//保存画布为可编辑状态
        canvas.translate(getX(), getY());
        childrenView(canvas);
        for (Container c : children) {
            c.draw(canvas);
        }
        canvas.restore();//每次绘制完后恢复画布
    }

    /**
     * 承载子视图（childrenView）
     *
     * @param canvas
     */
    public void childrenView(Canvas canvas) {
    }

    /**
     * 添加子视图（childrenView）
     *
     * @param child
     */
    public void addChildrenView(Container child) {
        children.add(child);
    }

    /**
     * 移除子视图（childrenView）
     *
     * @param child
     */
    public void removeChildrenView(Container child) {
        children.remove(child);
    }

    public void setX(float x) {
        this.x = x;
    }

    public float getX() {
        return x;
    }

    public void setY(float y) {
        this.y = y;
    }

    public float getY() {
        return y;
    }


}

Container

   

   3.创建子视图矩形Rect

package com.example.surfaceviewdemo;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

/**
 * Created by 袁磊 on 2017/2/7.
 */
public class Rect extends Container {
    private Paint paint = null;

    public Rect() {
        paint = new Paint();
        paint.setColor(Color.RED);
    }

    @Override
    public void childrenView(Canvas canvas) {
        super.childrenView(canvas);
        canvas.drawRect(0, 0, 100, 100, paint);
        this.setY(this.getY() + 1);
    }
}

Rect

 

   4.创建子视图圆形Circle

package com.example.surfaceviewdemo;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

/**
 * Created by 袁磊 on 2017/2/7.
 */
public class Circle extends Container {
    private Paint paint = null;

    public Circle() {
        paint = new Paint();
        paint.setColor(Color.BLUE);
    }

    @Override
    public void childrenView(Canvas canvas) {
        super.childrenView(canvas);
        canvas.drawCircle(50, 50, 50, paint);
    }
}

Circle

    

   5.创建类GameView并继承SurfaceView、实现SurfaceHolder.CallBack接口

package com.example.surfaceviewdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

import java.util.Timer;
import java.util.TimerTask;

/**
 * Created by 袁磊 on 2017/2/7.
 * =====参考MyView
 */
public class GameView extends SurfaceView implements SurfaceHolder.Callback {
    private Container container;
    private Rect rect;
    private Circle circle;

    public GameView(Context context) {
        super(context);
        container = new Container();
        rect = new Rect();
        circle = new Circle();

        rect.addChildrenView(circle);//将圆添加到矩形
        container.addChildrenView(rect);//将矩形添加到子视图容器
        getHolder().addCallback(this);
    }

    /**
     * 绘制图形
     */
    public void draw() {
        Canvas canvas = getHolder().lockCanvas();//创建Canvas对象，锁定画布
        canvas.drawColor(Color.WHITE);//初始化画布为白色
        container.draw(canvas);
        getHolder().unlockCanvasAndPost(canvas);//绘制完毕后解锁画布
    }

    private Timer timer = null;
    private TimerTask task = null;

    public void startTimer() {
        timer = new Timer();
        task = new TimerTask() {
            @Override
            public void run() {
                draw();
            }
        };
        timer.schedule(task, 100, 100);//计划(任务，延时，周期)
    }

    public void stopTimer() {
        if (timer != null) {
            timer.cancel();
            timer = null;
        }
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        startTimer();
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        stopTimer();
    }
}

GameView

   

   6.MainActivity中使用

package com.example.surfaceviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new GameView(this));
    }
}

MainActivity

 

   7.运行效果（沿着箭头方向自上而下不断移动）