android基础画板的实现（surfaceView）

最新推荐文章于 2021-12-31 17:13:38 发布

原创最新推荐文章于 2021-12-31 17:13:38 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #画布 #surfacevie

android之自定义view 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用SurfaceView创建一个基本的画板功能。通过建立SurfaceView，设置回调，监听触摸事件，并利用画布和画笔工具，实现简单画板的绘制功能。在布局中自定义MyView继承SurfaceView，并在XML中使用。

先看效果图

今天使用surfaceview进行了一个画板功能的实现，还是比较简单的，说说思路：建立一个surfaceview控件，然后增加callback回调，响应触摸事件，调用画布，画笔等工具，最后完成。

下面是布局代码：

 <app.drawdemo.MyView  android:layout_width="match_parent"
        android:id="@+id/surfaceView"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:text="清除画板"/>

自定义了一个MyView继承surfaceView，然后在xml文件中调用它。

MyView代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;

/**
 * Created by 不告诉你 on 15/7/31.
 */
 //注意Callback函数要调用（android.view.SurfaceHolder）的
public class MyView extends SurfaceView implements SurfaceHolder.Callback,View.OnTouchListener {
    private Paint paint=new Paint();
    private  Path path=new Path();
    public MyView(Context context) {
        super(context);
        //初始化
        initSurfaceView(context);

    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initSurfaceView(context);

    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initSurfaceView(context);


    }

    void initSurfaceView(Context context){

        getHolder().addCallback(this);
        //初始化画笔
        paint.setColor(Color.BLUE);
        //画笔大小
        paint.setTextSize(20);
        paint.setStyle(Paint.Style.STROKE);
        //设置监听
        setOnTouchListener(this);
    }

    //绘制方法
    public void draw(){
        //锁定画布
        Canvas canvas=getHolder().lockCanvas();
        canvas.drawColor(Color.WHITE);

        canvas.drawPath(path,paint);


        //解锁画布
        getHolder().unlockCanvasAndPost(canvas);

    }


    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        //在surfaceview初始化时调用
        draw();
    }

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

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {

    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()){
            //按下事件，开始绘制
            case MotionEvent.ACTION_DOWN:
                //获取按下点的x,y坐标
                path.moveTo(event.getX(),event.getY());
                //绘制
                draw();
                break;
            case MotionEvent.ACTION_MOVE:
                //移动使用lineto()
                path.lineTo(event.getX(),event.getY());
                draw();
                break;
        }



        //返回true，否则只能响应down事件
        return true;
    }
    //清理画布
    public  void clear(){
        //路径重置
        path.reset();
        //重新锁定，否则不能再次绘画
        draw();
    }
}

代码解释很清楚，就不在讲述了

接下来是主activity

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    private Button button;
    private MyView myView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button= (Button) findViewById(R.id.button);
        myView= (MyView) findViewById(R.id.surfaceView);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            //调用清除路径重置方法
            myView.clear();
            }
        });
    }

}