Android如何实现画板功能？

Posted 2022-07-01 bug樱樱

前言

android实现画板主要有2种方式，一种是用自定义View实现，另一种是通过Canvas类实现。当然自定义View内部也是用的Canvas。

• 自定义View
  创建一个自定义View（推荐SurfaceView），在自定义View里通过Path对象记录手指滑动的路径调用lineTo()绘制；
• 通过Canvas类实现
  先用Canvas绘制一张空的Bitmap，通过ImageView的setImageBitmap()方法加载这个Bitmap,然后该ImageView实现onTouch()监听事件，跟踪用户手指的移动调用drawLine()绘制线条。

本文将分析两种方法，

自定义View

第一种就是用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;
@Override
protected 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架构视频+BAT面试专题PDF+学习笔记

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。