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

通过触摸屏事件实现在图片上涂鸦——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;}@Overrideprotected 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;}@Overridepublic 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.drawBoardandroid:id="@+id/draw_board"android:layout_width="wrap_content"android:layout_height="380dp"/><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="horizontal"android:gravity="center_horizontal"><Buttonandroid: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();
}
}
}