android涂鸦实现

简介: <p style="border:0px; margin:10px auto 0px; padding-top:0px; padding-bottom:0px; line-height:25px; font-family:Arial; font-size:14px"> 类似米聊、微信上的涂鸦和手写文字功能</p> <p style="border:0px; margin:10px au

类似米聊、微信上的涂鸦和手写文字功能

实现原理是自定义View,通过手势识别获取轨迹,然后通过画笔画图

这里添加了手势记录功能,并不难理解

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
public class TuyaView extends View {
  
private Bitmap mBitmap;
private Canvas mCanvas;
private Path mPath;
private Paint mBitmapPaint; // 画布的画笔
private Paint mPaint; // 真实的画笔
private float mX, mY; // 临时点坐标
private static final float TOUCH_TOLERANCE = 4;
  
// 保存Path路径的集合,用List集合来模拟栈
private static List<DrawPath> savePath;
// 记录Path路径的对象
private DrawPath dp;
  
private int screenWidth, screenHeight; // 屏幕長寬
  
private class DrawPath {
public Path path; // 路径
public Paint paint; // 画笔
}
  
public TuyaView(Context context, int w, int h) {
super (context);
screenWidth = w;
screenHeight = h;
  
mBitmap = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888);
// 保存一次一次绘制出来的图形
mCanvas = new Canvas(mBitmap);
  
mBitmapPaint = new Paint(Paint.DITHER_FLAG);
mPaint = new Paint();
mPaint.setAntiAlias( true );
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND); // 设置外边缘
mPaint.setStrokeCap(Paint.Cap.SQUARE); // 形状
mPaint.setStrokeWidth(5); // 画笔宽度
  
savePath = new ArrayList<DrawPath>();
}
  
@Override
public void onDraw(Canvas canvas) {
canvas.drawColor(0xFFAAAAAA);
// 将前面已经画过得显示出来
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
if (mPath != null ) {
// 实时的显示
canvas.drawPath(mPath, mPaint);
}
}
  
private void touch_start(float x, float y) {
mPath.moveTo(x, y);
mX = x;
mY = y;
}
  
private void touch_move(float x, float y) {
float dx = Math.abs(x – mX);
float dy = Math.abs(mY – y);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
// 从x1,y1到x2,y2画一条贝塞尔曲线,更平滑(直接用mPath.lineTo也是可以的)
mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
mX = x;
mY = y;
}
}
  
private void touch_up() {
mPath.lineTo(mX, mY);
mCanvas.drawPath(mPath, mPaint);
//将一条完整的路径保存下来(相当于入栈操作)
savePath.add(dp);
mPath = null ; // 重新置空
}
/**
* 撤销的核心思想就是将画布清空,
* 将保存下来的Path路径最后一个移除掉,
* 重新将路径画在画布上面。
*/
public void undo() {
mBitmap = Bitmap.createBitmap(screenWidth, screenHeight,
Bitmap.Config.ARGB_8888);
mCanvas.setBitmap(mBitmap); // 重新设置画布,相当于清空画布
// 清空画布,但是如果图片有背景的话,则使用上面的重新初始化的方法,用该方法会将背景清空掉…
if (savePath != null && savePath.size() > 0) {
// 移除最后一个path,相当于出栈操作
savePath.remove(savePath.size() – 1);
  
Iterator<DrawPath> iter = savePath.iterator();
while (iter.hasNext()) {
DrawPath drawPath = iter.next();
mCanvas.drawPath(drawPath.path, drawPath.paint);
}
invalidate(); // 刷新
  
/*在这里保存图片纯粹是为了方便,保存图片进行验证*/
String fileUrl = Environment.getExternalStorageDirectory()
.toString() + “/android/data/test.png”;
try {
FileOutputStream fos = new FileOutputStream( new File(fileUrl));
mBitmap.compress(CompressFormat.PNG, 100, fos);
fos.flush();
fos.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
  
}
}
/**
* 重做的核心思想就是将撤销的路径保存到另外一个集合里面(栈),
* 然后从redo的集合里面取出最顶端对象,
* 画在画布上面即可。
*/
public void redo(){
//如果撤销你懂了的话,那就试试重做吧。
}
  
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
  
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 每次down下去重新new一个Path
mPath = new Path();
//每一次记录的路径对象是不一样的
dp = new DrawPath();
dp.path = mPath;
dp.paint = mPaint;
touch_start(x, y);
invalidate();
break ;
case MotionEvent.ACTION_MOVE:
touch_move(x, y);
invalidate();
break ;
case MotionEvent.ACTION_UP:
touch_up();
invalidate();
break ;
}
return true ;
}
  
}
  
   
  
调用的地方
  
public class TuyaActivity extends Activity {
  
private TuyaView tuyaView = null ;
  
@Override
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
  
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
  
tuyaView = new TuyaView( this , dm.widthPixels, dm.heightPixels);
setContentView(tuyaView);
}
  
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) { // 返回键
tuyaView.undo();
return true ;
}
return super .onKeyDown(keyCode, event);
}
  
}

目录
相关文章
|
Android开发
flutter中实现仿Android端的onResume和onPause方法
flutter中实现仿Android端的onResume和onPause方法
|
缓存 JSON Java
java 实现读取txt文件,反射创建对象,android 手机缓存文件目录
java 实现读取txt文件,反射创建对象,android 手机缓存文件目录
407 1
java 实现读取txt文件,反射创建对象,android 手机缓存文件目录
|
Android开发 容器
Android实现面包屑效果,支持Fragment联动
Android实现面包屑效果,支持Fragment联动
|
Android开发
Android实现连线题效果
Android实现连线题效果
|
移动开发 JavaScript Android开发
通过howler.js实现在Android下的微信浏览器自动播放音频
通过howler.js实现在Android下的微信浏览器自动播放音频
498 0
通过howler.js实现在Android下的微信浏览器自动播放音频
|
数据库 Android开发
android 多级下拉菜单实现教程 greendao使用
android 多级下拉菜单实现教程 greendao使用
211 0
android 多级下拉菜单实现教程 greendao使用
|
存储 API Android开发
深入剖析Android四大组件(四)——Messenger实现Android IPC
深入剖析Android四大组件(四)——Messenger实现Android IPC
138 2
|
监控 前端开发 Java
Android自定义控件(十)——SurfaceView实战实现天气APP背景移动效果
Android自定义控件(十)——SurfaceView实战实现天气APP背景移动效果
429 0
|
XML 开发工具 Android开发
Android自定义控件(十三)——实现CSDN搜索框文字提示容器
Android自定义控件(十三)——实现CSDN搜索框文字提示容器
294 0
Android自定义控件(十三)——实现CSDN搜索框文字提示容器
|
Android开发
Android自定义控件(七)——ShapeDrawable实现放大镜效果
Android自定义控件(七)——ShapeDrawable实现放大镜效果
466 0
Android自定义控件(七)——ShapeDrawable实现放大镜效果