通过触摸屏事件实现在图片上涂鸦——Android

 目的：记录在屏幕上滑动的轨迹，实现在图片上涂鸦的功能

 开发工具：Android Studio3.3.2 

 实现过程：

• 第一步：新建drawBoard.java用于自定义view
  1. 将图片放到drawable文件夹下，用BitmapFactory.decodeResource加载图片，然后建立原始图像的位图
  2. 定义函数clear()：将处理后的图像Bitmap new2_Bitmap设置为原始图像，达到清除涂鸦的效果。
  3. 记录绘制的图形：通过变量isClear判断是否已经清除涂鸦，如果清除则创建新图形的画布，反之则创建当前图形的画布，然后通过isMove变量判断是否在屏幕上滑动，滑动时则在画布上画线条，最后返回绘制的图像。
  4. 定义触摸屏事件：首先是获取触摸时的坐标，当用户按下屏幕时将isMove设置为false表示无绘图并更新画布，而当用户滑动时则设置isMove=true，记录滑动轨迹并更新画布，将涂鸦轨迹实时显示。

 

//drawBoard.java
package com.example.myclassapplication;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class drawBoard extends View {
    Paint paint = null;  //定义画笔
    Bitmap originalBitmap = null;  //存放原始图像
    Bitmap new1_Bitmap = null;  //存放从原始图像复制的位图图像
    Bitmap new2_Bitmap = null;   //存放处理后的图像
    float startX = 0,starY = 0;  //画线的起点坐标
    float endX = 0,endY = 0;  //画线的终点坐标
    boolean isMove = true; //设置是否画线的标记
    boolean isClear = false;  //设置是否清除涂鸦的标记
    int color = Color.BLACK;   //设置画笔的颜色为绿色
    float strokeWidth = 4.0f;  //设置画笔的宽度

    public drawBoard(Context context, AttributeSet attrs){
        super(context,attrs);
        //copy:Bitmap是不能通过“ A = B ”来传递的，这样只是把B的引用给了A而已
        originalBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.flower1).copy(Bitmap.Config.ARGB_8888,true);//从资源中获取原始图像
        new1_Bitmap = Bitmap.createBitmap(originalBitmap);//建立原始图像的位图
    }

    public void clear(){
        new2_Bitmap = Bitmap.createBitmap(originalBitmap);   //清除涂鸦
        invalidate();
        isClear = true;
    }

    public void setStyle(float strokeWidth){  //设置画笔宽度
        this.strokeWidth = strokeWidth;
    }

    @Override
    protected void onDraw(Canvas canvas){  //显示绘图
        super.onDraw(canvas);
        canvas.drawBitmap(HandWriting(new1_Bitmap),0,0,null);
    }

    public Bitmap HandWriting(Bitmap o_Bitmap){  //记录绘制图形
        Canvas canvas = null;
        if(isClear){
            canvas = new Canvas(new2_Bitmap);
        }else{
            canvas = new Canvas(o_Bitmap);
        }

        paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);  //空心图
        paint.setAntiAlias(true);//去锯齿
        paint.setColor(color);
        paint.setStrokeWidth(strokeWidth);
        if(isMove){
            canvas.drawLine(startX,starY,endX,endY,paint);
        }
        startX = endX;
        starY = endY;
        if(isClear){
            return new2_Bitmap;
        }
        return o_Bitmap;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event){
        endX = event.getX();
        endY = event.getY();
        //按下时不绘图
        if(event.getAction() ==MotionEvent.ACTION_DOWN){
            isMove = false;
            invalidate();
            return true;
        }else if(event.getAction() ==MotionEvent.ACTION_MOVE){
            isMove = true;
            invalidate();
            return true;
        }
        return super.onTouchEvent(event);
    }

} 

• 第二步：设计布局文件draw_picture.xml
  1. 导入上述自定义的view
  2. 在布局中添加一个Button用于清除涂鸦

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">
    <com.example.myclassapplication.drawBoard
        android:id="@+id/draw_board"
        android:layout_width="wrap_content"
        android:layout_height="380dp"/>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:gravity="center_horizontal">
        <Button
            android:id="@+id/bt_clear"
            android:layout_height="wrap_content"
            android:layout_width="200dp"
            android:layout_marginTop="20dp"
            android:background="@color/colorPrimary"
            android:text="清屏"/>
    </LinearLayout>
</LinearLayout>

• 第三步：设计主控制文件MainActivity.java
  1. 关联View组件
  2. 给Button添加清屏事件

 

import android.view.View;
import android.widget.Button;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
package com.example.myclassapplication;

public class MainActivity extends AppCompatActivity {
    private drawBoard draw_board = null;
    private Button clear = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.draw_picture);
        draw_board = (drawBoard)findViewById(R.id.draw_board);
        clear = (Button) findViewById(R.id.bt_clear);
        clear.setOnClickListener(new mClick());
    }

    class mClick implements View.OnClickListener {
        @Override
        public void onClick(View v) {
            draw_board.clear();
        }
    }
}

 ——运行效果截图（给小花画上蝴蝶）

好吧，涂鸦技术有限~我会继续加油的