android之畫板功能之橡皮擦 畫筆大小和畫筆顏色

第一展示設置畫筆顏色的功能，第二展示設置畫筆大小的顏色，而第三則展示橡皮擦的功能，這節將圖標顏色設置為了藍色，並且，增加了最左邊的按鈕（其實，就是在gridview中多增加了一個item）。

下面分別討論，橡皮擦，設置畫筆大小，設置畫筆顏色的主要思想：

1. 橡皮擦功能：

基本原理：橡皮擦就是用和畫布顏色一致顏色的畫筆在屏幕觸摸，簡接實現橡皮擦的功能。

1）初始化畫筆，並且設置畫筆的顏色為白色（這里其實要設置為畫布的顏色）。

2）設置畫筆的大小為合適的大小。

3）用一個變量記住橡皮擦的顏色，用於在其他操作后重新使用橡皮擦。

 

2. 設置畫筆大小的功能：

1）初始化畫筆。

2）設置畫筆的大小為所選擇的大小。

3）用一個變量記住當前畫筆的大小，用於在進行其他操作后還保持之前設置的畫筆大小。

 

3. 設置畫筆顏色的功能：

1）初始化畫筆。

2）設置畫筆的顏色為所選擇的顏色。

3）用一個變量記住當前畫筆的顏色，用於在進行其他操作后還保持之前設置的畫筆顏色。

主要代碼如下：

private Bitmap  mBitmap;
private int currentColor = Color.RED;        
private int currentSize = 5;
private int currentStyle = 1;

//設置畫筆樣式 
      public void setPaintStyle(){
          mPaint = new Paint();
          mPaint.setAntiAlias(true);
          mPaint.setDither(true);
          mPaint.setStyle(Paint.Style.STROKE);
          mPaint.setStrokeJoin(Paint.Join.ROUND);
          mPaint.setStrokeCap(Paint.Cap.ROUND);
          mPaint.setStrokeWidth(currentSize);
          if(currentStyle == 1)
              mPaint.setColor(currentColor);
          else{
              mPaint.setColor(Color.WHITE);
          }
      }        

//初始化畫布
 public void initCanvas(){
     
     setPaintStyle();
     mBitmapPaint = new Paint(Paint.DITHER_FLAG);
     
     //畫布大小 
     mBitmap = Bitmap.createBitmap(bitmapWidth, bitmapHeight, 
         Bitmap.Config.RGB_565);
     mCanvas = new Canvas(mBitmap);  //所有mCanvas畫的東西都被保存在了mBitmap中
     
     mCanvas.drawColor(Color.WHITE);
     mPath = new Path();
     mBitmapPaint = new Paint(Paint.DITHER_FLAG);
     
 }

設置畫筆樣式：

//設置畫筆樣式
  public void selectPaintStyle(int which){
      
      if(which == 0){
          currentStyle = 1;
          setPaintStyle();
      }
      //當選擇的是橡皮擦時，設置顏色為白色
      if(which == 1){
          currentStyle = 2;
          setPaintStyle();
          mPaint.setStrokeWidth(20);
      }
  }

設置畫筆大小：

//選擇畫筆大小
  public void selectPaintSize(int which){
      
      int size =Integer.parseInt(this.getResources().getStringArray(R.array.paintsize)[which]); 
      currentSize = size;
      setPaintStyle();
  }

設置畫筆顏色：

//設置畫筆顏色
  public void selectPaintColor(int which){
      
      currentColor = paintColor[which];
      setPaintStyle();
  }

當然了，這些方法都是在自定義view，即PaintView中實現的，接下來就是通過單擊底部按鈕，調用自定義View的方法，實現相應的功能

//選擇畫筆樣式
             case 0:
                 showMoreDialog(view);
                 break;
             //畫筆大小
             case 1:
                 showPaintSizeDialog(view);
                 break;
             //畫筆顏色
             case 2:
                 showPaintColorDialog(view);
                 break;

      //彈出畫筆顏色選項對話框
    public void showPaintColorDialog(View parent){
        
        
        
        AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this,R.style.custom_dialog);
alertDialogBuilder.setTitle("選擇畫筆顏色：");

alertDialogBuilder.setSingleChoiceItems(R.array.paintcolor, select_paint_color_index, new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog, int which) {
        select_paint_color_index = which;
        paintView.selectPaintColor(which);
        dialog.dismiss();
    }
});

alertDialogBuilder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
    
    @Override
    public void onClick(DialogInterface dialog, int which) {
        dialog.dismiss();
    }
});
alertDialogBuilder.create().show();
    }
    
    
    
  //彈出畫筆大小選項對話框
    public void showPaintSizeDialog(View parent){
        
        
        
        AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this,R.style.custom_dialog);
alertDialogBuilder.setTitle("選擇畫筆大小：");

alertDialogBuilder.setSingleChoiceItems(R.array.paintsize, select_paint_size_index, new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog, int which) {
        select_paint_size_index = which;
        paintView.selectPaintSize(which);
        dialog.dismiss();
    }
});

alertDialogBuilder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
    
    @Override
    public void onClick(DialogInterface dialog, int which) {
        dialog.dismiss();
    }
});
alertDialogBuilder.create().show();
    }
    
    
    //彈出選擇畫筆或橡皮擦的對話框
    public void showMoreDialog(View parent){
        
        
        
        AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this,R.style.custom_dialog);
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;
        paintView.selectPaintStyle(which);
        dialog.dismiss();
    }
});

alertDialogBuilder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
    
    @Override
    public void onClick(DialogInterface dialog, int which) {
        dialog.dismiss();
    }
});
alertDialogBuilder.create().show();
    }
     

這里面用到arrays.xml,如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="paintstyle">
        <item>@string/track_line</item>
        <item>@string/Eraser</item>
    </string-array>
    <string-array name="paintsize">
        <item>5</item>
        <item>10</item>
        <item>15</item>
        <item>20</item>
        <item>25</item>
        <item>30</item>
    </string-array>
 
    <string-array name="paintcolor">
        <item>RED</item>
        <item>BLUE</item>
        <item>BLACK</item>
        <item>GREEN</item>
        <item>YELLOW</item>
        <item>CYAN</item>
        <item>LTGRAY</item>
    </string-array>
    
</resources>

至此，已實現了畫板所有的功能。

其實，還有一個比較有趣的功能，就是為畫筆設置一個鉛筆的圖標，主要原理，就是在自定義View中的ondraw方法中，將鉛筆圖片加載進去，並設置圖片隨着路徑移動。

在自定義View中的ondraw方法中添加：

//移動時，顯示畫筆圖標
       if(this.isMoving && currentColor != Color.WHITE){
           //設置畫筆的圖標
               Bitmap pen = BitmapFactory.decodeResource(this.getResources(),
                           R.drawable.pen);
               canvas.drawBitmap(pen, this.mX, this.mY - pen.getHeight(),
                           new Paint(Paint.DITHER_FLAG));
       }