目的:记录在屏幕上滑动的轨迹,实现在图片上涂鸦的功能
开发工具: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;}@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
- 导入上述自定义的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.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
- 关联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();
}
}
}
——运行效果截图(给小花画上蝴蝶)
好吧,涂鸦技术有限~我会继续加油的