通过触摸屏事件实现在图片上涂鸦——Android
目的:记录在屏幕上滑动的轨迹,实现在图片上涂鸦的功能
开发工具:Android Studio3.3.2
实现过程:
- 第一步:新建drawBoard.java用于自定义view
- 将图片放到drawable文件夹下,用BitmapFactory.decodeResource加载图片,然后建立原始图像的位图
- 定义函数clear():将处理后的图像Bitmap new2_Bitmap设置为原始图像,达到清除涂鸦的效果。
- 记录绘制的图形:通过变量isClear判断是否已经清除涂鸦,如果清除则创建新图形的画布,反之则创建当前图形的画布,然后通过isMove变量判断是否在屏幕上滑动,滑动时则在画布上画线条,最后返回绘制的图像。
- 定义触摸屏事件:首先是获取触摸时的坐标,当用户按下屏幕时将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
- 导入上述自定义的view
- 在布局中添加一个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
- 关联View组件
- 给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();
}
}
}
——运行效果截图(给小花画上蝴蝶)
好吧,涂鸦技术有限~我会继续加油的