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));
       }    
原文地址:https://www.cnblogs.com/zhujiabin/p/4183014.html