Android编程实现画板功能的方法总结【附源码下载】

2019-10-22 18:15:37

字体：大中小

来源：转载

供稿：网友

本文实例讲述了Android编程实现画板功能的方法。分享给大家供大家参考，具体如下：

Android实现画板主要有2种方式，一种是用自定义View实现，另一种是通过Canvas类实现。当然自定义View内部也是用的Canvas。第一种方式的思路是，创建一个自定义View（推荐SurfaceView），在自定义View里通过Path对象记录手指滑动的路径调用lineTo()绘制；第二种方式的思路是，先用Canvas绘制一张空的Bitmap，通过ImageView的setImageBitmap()方法加载这个Bitmap,然后该ImageView实现onTouch()监听事件，跟踪用户手指的移动调用drawLine()绘制线条。

我们先来看第一种的实现的方式吧。这里就用SurfaceView来实现，在这里介绍一下关于SurfaceView的知识。SurfaceView继承自View，两者都可以实现绘图功能，那么他们有什么不同呢。先说下Android绘制视图的原理，View通过刷新来绘制视图，Android系统则通过发出VSYNC信号进行屏幕绘制，玩游戏的朋友都应该知道"垂直同步"，VSYNC就是垂直同步，谷歌是在4.1之后引入VSYNC的，VSYNC是为了不让画面掉帧。为了不掉帧，View的绘制需要在16ms之内完成。如果执行耗时太长或者需要频繁刷新，那么View就不合适了，影响用户体验和性能。用 SurfaceView就好办了，它内部是在子线程进行页面刷新，使用了双缓冲机制。现在我们来使用它吧。

通常用法是创建一个View继承自SurfaceView，并实现Callback和Runnable接口。

public class MySurfaceView extends SurfaceView implements    SurfaceHolder.Callback, Runnable {  // SurfaceHolder实例  private SurfaceHolder mSurfaceHolder;  // Canvas对象  private Canvas mCanvas;  // 控制子线程是否运行  private boolean startDraw;  // Path实例  private Path mPath = new Path();  // Paint实例  private Paint mpaint = new Paint();  public MySurfaceView(Context context, AttributeSet attrs) {    super(context, attrs);    initView(); // 初始化  }  private void initView() {    mSurfaceHolder = getHolder();    mSurfaceHolder.addCallback(this);    // 设置可获得焦点    setFocusable(true);    setFocusableInTouchMode(true);    // 设置常亮    this.setKeepScreenOn(true);  }  @Override  public void run() {    // 如果不停止就一直绘制    while (startDraw) {      // 绘制      draw();    }  }  /*   * 创建   */  @Override  public void surfaceCreated(SurfaceHolder holder) {    startDraw = true;    new Thread(this).start();  }  /*   * 改变   */  @Override  public void surfaceChanged(SurfaceHolder holder, int format, int width,      int height) {  }  /*   * 销毁   */  @Override  public void surfaceDestroyed(SurfaceHolder holder) {    startDraw = false;  }  private void draw() {    try {      mCanvas = mSurfaceHolder.lockCanvas();      mCanvas.drawColor(Color.WHITE);      mpaint.setStyle(Paint.Style.STROKE);      mpaint.setStrokeWidth(DensityUtil.px2dip(getContext(), 30));      mpaint.setColor(Color.BLACK);      mCanvas.drawPath(mPath, mpaint);    } catch (Exception e) {    } finally {      // 对画布内容进行提交      if (mCanvas != null) {        mSurfaceHolder.unlockCanvasAndPost(mCanvas);      }    }  }  @Override  public boolean onTouchEvent(MotionEvent event) {    int x = (int) event.getX();  //获取手指移动的x坐标    int y = (int) event.getY();  //获取手指移动的y坐标    switch (event.getAction()) {    case MotionEvent.ACTION_DOWN:      mPath.moveTo(x, y);      break;    case MotionEvent.ACTION_MOVE:      mPath.lineTo(x, y);      break;    case MotionEvent.ACTION_UP:      break;    }    return true;  }  // 重置画布  public void reset() {    mPath.reset();  }}

我们在构造方法里进行初始化，获得SurfaceHolder实例，添加Callback接口实例，及获得焦点等操作。重写了SurfaceView的三个方法surfaceCreated,surfaceChanged,surfaceDestroyed。在surfaceCreated方法里开启子线程，执行draw方法。在surfaceDestroyed方法里关闭线程。在draw方法里，通过mSurfaceHolder.lockCanvas()获取Canvas对象，设置样式，颜色等，然后重写onTouchEvent方法，监听用户手指移动，调用mPath.lineTo(x, y)绘制线条，最后调用mSurfaceHolder.unlockCanvasAndPost(mCanvas)提交画布内容.这样就完成了画板的绘制。

Android,画板,源码下载

我在代码里添加了reset()方法，可以重置画布，只需要在MainActivity获取SurfaceView对象，调用SurfaceView.reset()就可以了。

private Button reset_btn;private MySurfaceView mview;@Overrideprotected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  context = this;  mview = (MySurfaceView) findViewById(R.id.MySurfaceView);  reset_btn = (Button) findViewById(R.id.reset_btn);  reset_btn.setOnClickListener(new View.OnClickListener() {    @Override    public void onClick(View v) {      //清除      mview.reset();    }  });

现在我们看下第二种方式吧，其实原理和第一种差不太多，我就不赘述了。直接贴上代码吧。

public class SecondActivity extends Activity {  private ImageView img;  private Bitmap mBitmap;  private Canvas canvas;  private Paint paint;  // 重置按钮  private Button reset_btn;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_second);    img = (ImageView) findViewById(R.id.img);    reset_btn = (Button) findViewById(R.id.reset_btn);    reset_btn.setOnClickListener(new View.OnClickListener() {      @Override      public void onClick(View v) {        img.setImageBitmap(null);        showImage();      }    });    // 绘图    showImage();  }  private void showImage() {    // 创建一张空白图片    mBitmap = Bitmap.createBitmap(720, 1280, Bitmap.Config.ARGB_8888);    // 创建一张画布    canvas = new Canvas(mBitmap);    // 画布背景为白色    canvas.drawColor(Color.WHITE);    // 创建画笔    paint = new Paint();    // 画笔颜色为蓝色    paint.setColor(Color.BLUE);    // 宽度5个像素    paint.setStrokeWidth(5);    // 先将白色背景画上    canvas.drawBitmap(mBitmap, new Matrix(), paint);    img.setImageBitmap(mBitmap);    img.setOnTouchListener(new OnTouchListener() {      int startX;      int startY;      @Override      public boolean onTouch(View v, MotionEvent event) {        switch (event.getAction()) {        case MotionEvent.ACTION_DOWN:          // 获取手按下时的坐标          startX = (int) event.getX();          startY = (int) event.getY();          break;        case MotionEvent.ACTION_MOVE:          // 获取手移动后的坐标          int endX = (int) event.getX();          int endY = (int) event.getY();          // 在开始和结束坐标间画一条线          canvas.drawLine(startX, startY, endX, endY, paint);          // 刷新开始坐标          startX = (int) event.getX();          startY = (int) event.getY();          img.setImageBitmap(mBitmap);          break;        }        return true;      }    });  }}

有人肯定要问，能不能把绘制的内容保存下来，这当然可以。

加上如下代码就行。

File file = new File(Environment.getExternalStorageDirectory(),    System.currentTimeMillis() + ".jpg");OutputStream stream;try {   stream = new FileOutputStream(file);   mBitmap.compress(CompressFormat.JPEG, 200, stream);   stream.close();} catch (IOException e) {  e.printStackTrace();}

附：完整实例代码点击此处本站下载。

希望本文所述对大家Android程序设计有所帮助。

注：相关教程知识阅读请移步到Android开发频道。

上一篇：Rxjava2_Flowable_Sqlite_Android数据库访问实例

下一篇：gradle tool升级到3.0注意事项小结