今天給大家帶來一個特別有意思的自定義view---塗鴉，先看看效果
效果看了，挺好玩吧，其實就是利用萬能的Path來畫路徑，顏色，畫筆大小，就是一些設定，廢話不多說，直接上真傢伙
觸控事件處理
這裡的觸控事件主要有按下(MotionEvent.ACTION_DOWN)、移動(MotionEvent.ACTION_MOVE)、抬起(MotionEvent.ACTION_UP),需要對其分別做相應的處理
觸控事件處理方法
@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;
}複製程式碼按下(MotionEvent.ACTION_DOWN)後執行的touch_start(x, y);
private void touch_start(float x, float y) {
mPath.moveTo(x, y);
mX = x;
mY = y;
}複製程式碼移動(MotionEvent.ACTION_MOVE)後執行的touch_move(x, 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);
//mPath.lineTo(mX,mY);
mX = x;
mY = y;
}
}複製程式碼抬起(MotionEvent.ACTION_UP)後執行的touch_up();
private void touch_up() {
mPath.lineTo(mX, mY);
mCanvas.drawPath(mPath, mPaint);
//將一條完整的路徑儲存下來(相當於入棧操作)
savePath.add(dp);
mPath = null;// 重新置空
}複製程式碼然後看一下onDraw
@Override
public void onDraw(Canvas canvas) {
//canvas.drawColor(0xFFAAAAAA);
// 將前面已經畫過得顯示出來
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
if (mPath != null) {
// 實時的顯示
canvas.drawPath(mPath, mPaint);
}
}複製程式碼整個過程走完了，接下來就來考慮一下其他過程
撤銷、恢復、重做三個操作
撤銷操作
/**
* 撤銷
* 撤銷的核心思想就是將畫布清空，
* 將儲存下來的Path路徑最後一個移除掉，
* 重新將路徑畫在畫布上面。
*/
public void undo() {
if (savePath != null && savePath.size() > 0) {
DrawPath drawPath = savePath.get(savePath.size() - 1);
deletePath.add(drawPath);
savePath.remove(savePath.size() - 1);
redrawOnBitmap();
}
}複製程式碼恢復操作
/**
* 恢復，恢復的核心就是將刪除的那條路徑重新新增到savapath中重新繪畫即可
*/
public void recover() {
if (deletePath.size() > 0) {
//將刪除的路徑列表中的最後一個，也就是最頂端路徑取出（棧）,並加入路徑儲存列表中
DrawPath dp = deletePath.get(deletePath.size() - 1);
savePath.add(dp);
//將取出的路徑重繪在畫布上
mCanvas.drawPath(dp.path, dp.paint);
//將該路徑從刪除的路徑列表中去除
deletePath.remove(deletePath.size() - 1);
invalidate();
}
}複製程式碼重做操作
/**
* 重做
*/
public void redo() {
if (savePath != null && savePath.size() > 0) {
savePath.clear();
redrawOnBitmap();
}
}複製程式碼 private void redrawOnBitmap() {
/*mBitmap = Bitmap.createBitmap(screenWidth, screenHeight,
Bitmap.Config.RGB_565);
mCanvas.setBitmap(mBitmap);// 重新設定畫布，相當於清空畫布*/
initCanvas();
Iterator<DrawPath> iter = savePath.iterator();
while (iter.hasNext()) {
DrawPath drawPath = iter.next();
mCanvas.drawPath(drawPath.path, drawPath.paint);
}
invalidate();// 重新整理
}複製程式碼初始化相關
public void initCanvas() {
setPaintStyle();
if (screenWidth > 0 && screenHeight > 0) {
mBitmapPaint = new Paint(Paint.DITHER_FLAG);
//畫布大小
mBitmap = Bitmap.createBitmap(screenWidth, screenHeight, Bitmap.Config.ARGB_8888);
mBitmap.eraseColor(Color.argb(0, 0, 0, 0));
mCanvas = new Canvas(mBitmap); //所有mCanvas畫的東西都被儲存在了mBitmap中
mCanvas.drawColor(Color.TRANSPARENT);
}
}
//初始化畫筆樣式
private void setPaintStyle() {
mPaint = new Paint();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);// 設定外邊緣
mPaint.setStrokeCap(Paint.Cap.ROUND);// 形狀
mPaint.setAntiAlias(true);
mPaint.setDither(true);
if (currentStyle == 1) {
mPaint.setStrokeWidth(currentSize);
mPaint.setColor(currentColor);
} else {//橡皮擦
mPaint.setAlpha(0);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mPaint.setColor(Color.TRANSPARENT);
mPaint.setStrokeWidth(50);
}
}複製程式碼樣式相關修改
//以下為樣式修改內容
//設定畫筆樣式
public void selectPaintStyle(int which) {
if (which == 0) {
currentStyle = 1;
setPaintStyle();
}
//當選擇的是橡皮擦時，設定顏色為白色
if (which == 1) {
currentStyle = 2;
setPaintStyle();
}
}
//選擇畫筆大小
public void selectPaintSize(int which) {
currentSize = which;
setPaintStyle();
}
//設定畫筆顏色
public void selectPaintColor(int which) {
currentColor = paintColor[which];
setPaintStyle();
}複製程式碼到此為止，塗鴉的效果有了，實際專案中都是對一個照片進行塗鴉操作，因此新增照片進行再次封裝，達到實際專案中的那種效果
新增照片進行塗鴉
利用組合自定義view，結合上面的TabletView和ImageView來到實際專案效果
xml佈局
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.tabletview.TabletView
android:id="@+id/tabletview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>複製程式碼繼承FrameLayout，在onFinishInflate()中新增view
@Override
protected void onFinishInflate() {
super.onFinishInflate();
View view = LayoutInflater.from(mContext).inflate(R.layout.tuya, null);
layout = (FrameLayout) view.findViewById(R.id.layout);
img = (ImageView) view.findViewById(R.id.img);
tabletview = (TabletView) view.findViewById(R.id.tabletview);
addView(view);
}複製程式碼獲得TabletView去執行相關操作
/**
* 去拿到TabletView去執行相關的操作
* @return
*/
public TabletView getTabletview() {
return tabletview;
}複製程式碼設定照片的方法，實際專案中可利用照片、相簿選擇照片返回設定
/**
* 設定照片，根據實際專案可支援照片選擇、相簿、拍照
* @param bitmap
*/
public void setImgBitmap(Bitmap bitmap) {
img.setImageBitmap(bitmap);
}複製程式碼儲存照片，這裡的許可權問題根據6.0、7.0、8.0得設定，可以參考其他的許可權講解
/**
* 儲存照片
*/
public void saveToSDCard() {
new Thread() {
@Override
public void run() {
SystemClock.sleep(1000);
//view層的截圖
layout.setDrawingCacheEnabled(true);
Bitmap newBitmap = Bitmap.createBitmap(layout.getDrawingCache());
layout.setDrawingCacheEnabled(false);
//獲得系統當前時間，並以該時間作為檔名
SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss");
Date curDate = new Date(System.currentTimeMillis());//獲取當前時間
String str = formatter.format(curDate) + "paint.png";
File file = new File("sdcard/" + str);
if (!file.exists()) {
try {
file.createNewFile();
} catch (IOException e) {
e.printStackTrace();
}
}
FileOutputStream fos = null;
try {
fos = new FileOutputStream(file);
} catch (Exception e) {
e.printStackTrace();
}
newBitmap.compress(Bitmap.CompressFormat.PNG, 100, fos);
}
}.start();
}複製程式碼程式碼中應用
xml佈局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.tabletview.MainActivity">
<com.tabletview.TuyaView
android:id="@+id/tuyaview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="@+id/btn_undo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="撤銷" />
<Button
android:id="@+id/btn_redo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="重做" />
<Button
android:id="@+id/btn_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="儲存" />
<Button
android:id="@+id/btn_recover"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="恢復" />
<Button
android:id="@+id/btn_paintcolor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="顏色" />
<Button
android:id="@+id/btn_paintsize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="畫筆大小" />
<Button
android:id="@+id/btn_paintstyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="畫筆型別" />
<SeekBar
android:id="@+id/sb_size"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>複製程式碼java程式碼
private void initView() {
btn_undo = (Button) findViewById(R.id.btn_undo);
btn_undo.setOnClickListener(this);
btn_redo = (Button) findViewById(R.id.btn_redo);
btn_redo.setOnClickListener(this);
btn_save = (Button) findViewById(R.id.btn_save);
btn_save.setOnClickListener(this);
btn_recover = (Button) findViewById(R.id.btn_recover);
btn_recover.setOnClickListener(this);
sb_size = (SeekBar) findViewById(R.id.sb_size);
sb_size.setOnClickListener(this);
btn_paintcolor = (Button) findViewById(R.id.btn_paintcolor);
btn_paintcolor.setOnClickListener(this);
btn_paintsize = (Button) findViewById(R.id.btn_paintsize);
btn_paintsize.setOnClickListener(this);
btn_paintstyle = (Button) findViewById(R.id.btn_paintstyle);
btn_paintstyle.setOnClickListener(this);
tuyaview = (TuyaView) findViewById(R.id.tuyaview);
//設定照片
Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher);
tuyaview.setImgBitmap(bitmap);
//
tabletView = tuyaview.getTabletview();
tabletView.requestFocus();
tabletView.selectPaintSize(sb_size.getProgress());
sb_size.setOnSeekBarChangeListener(new MySeekChangeListener());
}
class MySeekChangeListener implements SeekBar.OnSeekBarChangeListener {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
tabletView.selectPaintSize(seekBar.getProgress());
//Toast.makeText(MainActivity.this,"當前畫筆尺寸為"+seekBar.getProgress(),Toast.LENGTH_SHORT ).show();
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
tabletView.selectPaintSize(seekBar.getProgress());
//Toast.makeText(MainActivity.this,"當前畫筆尺寸為"+seekBar.getProgress(),Toast.LENGTH_SHORT ).show();
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_undo:
tabletView.undo();
break;
case R.id.btn_redo:
tabletView.redo();
break;
case R.id.btn_save:
// tabletView.saveToSDCard();
tuyaview.saveToSDCard();
break;
case R.id.btn_recover:
tabletView.recover();
break;
case R.id.btn_paintcolor:
sb_size.setVisibility(View.GONE);
showPaintColorDialog(v);
break;
case R.id.btn_paintsize:
sb_size.setVisibility(View.VISIBLE);
break;
case R.id.btn_paintstyle:
sb_size.setVisibility(View.GONE);
showMoreDialog(v);
break;
}
}
private int select_paint_color_index = 0;
private int select_paint_style_index = 0;
public void showPaintColorDialog(View parent) {
AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(MainActivity.this);
alertDialogBuilder.setTitle("選擇畫筆顏色：");
alertDialogBuilder.setSingleChoiceItems(R.array.paintcolor, select_paint_color_index, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int which) {
select_paint_color_index = which;
tabletView.selectPaintColor(which);
dialogInterface.dismiss();
}
});
alertDialogBuilder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
dialogInterface.dismiss();
}
});
alertDialogBuilder.create().show();
}
public void showMoreDialog(View parent) {
AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);
alertDialogBuilder.setTitle("選擇畫筆或橡皮擦：");
alertDialogBuilder.setSingleChoiceItems(R.array.paintstyle, select_paint_style_index, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
select_paint_style_index = which;
tabletView.selectPaintStyle(which);
dialog.dismiss();
}
});
alertDialogBuilder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
alertDialogBuilder.create().show();
}複製程式碼