devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

view 的onDraw过程源码分析及应用_view 的 ondraw()

作者：繁依Fanyi0 | 2024-06-13 07:02:08

赞

踩

view 的 ondraw()

上一节我们讲了view 的摆放过程，接着上节讲讲onDraw view的绘制过程，这个方法在平时开发过程中使用的几率还是比较高的，有必要深入的了解下。

讲解顺序：

1.控件绘制原理分析

2.onDraw 中绘制基本图形及文字

3.绘制路径，橡皮及自定义按钮点击事件

 

1.控件绘制原理分析

onMeasure 用于view 的测量，包括测量模式和测量值，具体就是根据父类和自身的属性值来确定测量模式和自身显示的大小。

 onLayout  用于view 位置的摆放，onMeasure 知道了view的大小，onLayout就是根据父view 和自身view的设置属性决定摆放在父view的那个位置。

onDrow 用于view 的绘制，通过上面两部知道了view的大小及摆放位置，那么ondrow 就是将view 绘制出来。

上面两个方法就不多说了，前边讲过，就看下下ImageView 的onDrow 方法

  1.  @Override
  2.     protected void onDraw(Canvas canvas) {
  3.         super.onDraw(canvas);
  4.  
  5.         if (mDrawable == null) {
  6.             return; // couldn't resolve the URI
  7.         }
  8.  
  9.         if (mDrawableWidth == 0 || mDrawableHeight == 0) {
  10.             return;     // nothing to draw (empty bounds)
  11.         }
  12.  
  13.         if (mDrawMatrix == null && mPaddingTop == 0 && mPaddingLeft == 0) {
  14.             mDrawable.draw(canvas);
  15.         } else {
  16.             final int saveCount = canvas.getSaveCount();
  17.             canvas.save();
  18.  
  19.             if (mCropToPadding) {
  20.                 final int scrollX = mScrollX;
  21.                 final int scrollY = mScrollY;
  22.                 canvas.clipRect(scrollX + mPaddingLeft, scrollY + mPaddingTop,
  23.                         scrollX + mRight - mLeft - mPaddingRight,
  24.                         scrollY + mBottom - mTop - mPaddingBottom);
  25.             }
  26.  
  27.             canvas.translate(mPaddingLeft, mPaddingTop);
  28.  
  29.             if (mDrawMatrix != null) {
  30.                 canvas.concat(mDrawMatrix);
  31.             }
  32.             mDrawable.draw(canvas);
  33.             canvas.restoreToCount(saveCount);
  34.         }
  35.     }

其实和简单，就是通过画布将图片绘制到画布上，mDrawable 就是我们设置的资源，

mDrawable.draw(canvas);通过这个方法将图片绘制到画布上。由于draw它是一个抽象方法，所以要看下那里实现的。
public abstract void draw(@NonNull Canvas canvas);

那么它是在哪里实现的呢，看了下，实现的地方比较多，所以看其中一个，BitmapDrawable 类，BitmapDrawable 继承自 Drawable 实现了draw 方法

  1.   @Override
  2.     public void draw(Canvas canvas) {
  3.         final Bitmap bitmap = mBitmapState.mBitmap;
  4.         if (bitmap == null) {
  5.             return;
  6.         }
  7.  
  8.         final BitmapState state = mBitmapState;
  9.         final Paint paint = state.mPaint;
  10.         if (state.mRebuildShader) {
  11.             final Shader.TileMode tmx = state.mTileModeX;
  12.             final Shader.TileMode tmy = state.mTileModeY;
  13.             if (tmx == null && tmy == null) {
  14.                 paint.setShader(null);
  15.             } else {
  16.                 paint.setShader(new BitmapShader(bitmap,
  17.                         tmx == null ? Shader.TileMode.CLAMP : tmx,
  18.                         tmy == null ? Shader.TileMode.CLAMP : tmy));
  19.             }
  20.  
  21.             state.mRebuildShader = false;
  22.         }
  23.  
  24.         final int restoreAlpha;
  25.         if (state.mBaseAlpha != 1.0f) {
  26.             final Paint p = getPaint();
  27.             restoreAlpha = p.getAlpha();
  28.             p.setAlpha((int) (restoreAlpha * state.mBaseAlpha + 0.5f));
  29.         } else {
  30.             restoreAlpha = -1;
  31.         }
  32.  
  33.         final boolean clearColorFilter;
  34.         if (mTintFilter != null && paint.getColorFilter() == null) {
  35.             paint.setColorFilter(mTintFilter);
  36.             clearColorFilter = true;
  37.         } else {
  38.             clearColorFilter = false;
  39.         }
  40.  
  41.         updateDstRectAndInsetsIfDirty();
  42.         final Shader shader = paint.getShader();
  43.         final boolean needMirroring = needMirroring();
  44.         if (shader == null) {
  45.             if (needMirroring) {
  46.                 canvas.save();
  47.                 // Mirror the bitmap
  48.                 canvas.translate(mDstRect.right - mDstRect.left, 0);
  49.                 canvas.scale(-1.0f, 1.0f);
  50.             }
  51.  
  52.             canvas.drawBitmap(bitmap, null, mDstRect, paint);
  53.  
  54.             if (needMirroring) {
  55.                 canvas.restore();
  56.             }
  57.         } else {
  58.             updateShaderMatrix(bitmap, paint, shader, needMirroring);
  59.             canvas.drawRect(mDstRect, paint);
  60.         }
  61.  
  62.         if (clearColorFilter) {
  63.             paint.setColorFilter(null);
  64.         }
  65.  
  66.         if (restoreAlpha >= 0) {
  67.             paint.setAlpha(restoreAlpha);
  68.         }
  69.     }

最终的绘制还是通过canvas.drawBitmap(bitmap, null, mDstRect, paint); 来绘制出来的

看下ImageView 中 mDrawable是如何被赋值的。方法较多我们只看一个

  1.   public void setImageBitmap(Bitmap bm) {
  2.         // Hacky fix to force setImageDrawable to do a full setImageDrawable
  3.         // instead of doing an object reference comparison
  4.         mDrawable = null;
  5.         if (mRecycleableBitmapDrawable == null) {
  6.             mRecycleableBitmapDrawable = new BitmapDrawable(mContext.getResources(), bm);
  7.         } else {
  8.             mRecycleableBitmapDrawable.setBitmap(bm);
  9.         }
  10.         setImageDrawable(mRecycleableBitmapDrawable);
  11.     }
 
通过setImageBitmap 最终调用到 updateDrawable(Drawable d) 方法
  1. private void updateDrawable(Drawable d) {
  2.         if (d != mRecycleableBitmapDrawable && mRecycleableBitmapDrawable != null) {
  3.             mRecycleableBitmapDrawable.setBitmap(null);
  4.         }
  5.  
  6.         boolean sameDrawable = false;
  7.  
  8.         if (mDrawable != null) {
  9.             sameDrawable = mDrawable == d;
  10.             mDrawable.setCallback(null);
  11.             unscheduleDrawable(mDrawable);
  12.             if (!sCompatDrawableVisibilityDispatch && !sameDrawable && isAttachedToWindow()) {
  13.                 mDrawable.setVisible(false, false);
  14.             }
  15.         }
  16.  
  17.         mDrawable = d;
  18.  
  19.         if (d != null) {
  20.             d.setCallback(this);
  21.             d.setLayoutDirection(getLayoutDirection());
  22.             if (d.isStateful()) {
  23.                 d.setState(getDrawableState());
  24.             }
  25.             if (!sameDrawable || sCompatDrawableVisibilityDispatch) {
  26.                 final boolean visible = sCompatDrawableVisibilityDispatch
  27.                         ? getVisibility() == VISIBLE
  28.                         : isAttachedToWindow() && getWindowVisibility() == VISIBLE && isShown();
  29.                 d.setVisible(visible, true);
  30.             }
  31.             d.setLevel(mLevel);
  32.             mDrawableWidth = d.getIntrinsicWidth();
  33.             mDrawableHeight = d.getIntrinsicHeight();
  34.             applyImageTint();
  35.             applyColorMod();
  36.  
  37.             configureBounds();
  38.         } else {
  39.             mDrawableWidth = mDrawableHeight = -1;
  40.         }
  41.     }

 

在这里看到 mDrawable 被赋值了，其实就是 setImageDrawable(mRecycleableBitmapDrawable);的参数

BitmapDrawable 类对象。到这里ImageView 的基本绘制就讲完了，其实本质上还是使用了画布来绘制。

2.onDraw 中绘制基本图形及文字

主要是绘制一些常用的图形，及文字的绘制，并且通过矩阵变换方式实现背景图的平移和缩放

先看下整体的效果图

效果1

先看下图形绘制：

  1.  /**
  2.      * 绘制一部分图形
  3.      *
  4.      * @param canvas
  5.      */
  6.     private void drawGraphics(Canvas canvas) {
  7.         isFirst = false;
  8.         Paint paint = new Paint();
  9.       
  10.         paint.setAntiAlias(true);//设置抗锯齿
  11.         paint.setColor(Color.RED);//画笔颜色
  12.         paint.setStyle(Paint.Style.STROKE);//空心画笔
  13.         paint.setStrokeWidth(3); //设置笔刷的粗细
  14.         canvas.drawCircle(40, 40, 30, paint);
  15.         canvas.drawRect(10, 90, 70, 150, paint);
  16.         canvas.drawRect(10, 170, 70, 200, paint);
  17.         canvas.drawOval(new RectF(10, 220, 70, 250), paint);//椭圆
  18.         /**
  19.          * 使用path 画三角形
  20.          */
  21.         Path path = new Path();
  22.         path.moveTo(10, 330);
  23.         path.lineTo(40, 270);
  24.         path.lineTo(70, 330);
  25.         path.close();
  26.         canvas.drawPath(path, paint);
  27.         /**
  28.          * 梯形
  29.          */
  30.         Path path1 = new Path();
  31.         path1.moveTo(10, 410);
  32.         path1.lineTo(25, 350);
  33.         path1.lineTo(55, 350);
  34.         path1.lineTo(70, 410);
  35.         path1.close();//把开始的点和最后的点连接在一起，构成一个封闭图形
  36.         /*
  37.          * 最重要的就是movtTo和close,如果是Style.FILL的话，不设置close,也没有区别，可是如果是STROKE模式，
  38.          * 如果不设置close,图形不封闭。
  39.          *
  40.          * 当然，你也可以不设置close，再添加一条线，效果一样。
  41.          */
  42.         canvas.drawPath(path1, paint);
  43.  
  44.         /**
  45.          * 第二列
  46.          */
  47.         paint.setColor(Color.BLUE);
  48.         paint.setStyle(Paint.Style.FILL); //实心
  49.         canvas.drawCircle(80 + 40, 40, 30, paint);
  50.         canvas.drawRect(80 + 10, 90, 80 + 70, 150, paint);
  51.         canvas.drawRect(80 + 10, 170, 80 + 70, 200, paint);
  52.         canvas.drawOval(new RectF(80 + 10, 220, 80 + 70, 250), paint);//椭圆
  53.         /**
  54.          * 使用path 画三角形
  55.          */
  56.         Path path2 = new Path();
  57.         path2.moveTo(80 + 10, 330);
  58.         path2.lineTo(80 + 40, 270);
  59.         path2.lineTo(80 + 70, 330);
  60.         path2.close();
  61.         canvas.drawPath(path2, paint);
  62.         /**
  63.          * 梯形
  64.          */
  65.         Path path3 = new Path();
  66.         path3.moveTo(80 + 10, 410);
  67.         path3.lineTo(80 + 25, 350);
  68.         path3.lineTo(80 + 55, 350);
  69.         path3.lineTo(80 + 70, 410);
  70.         path3.close();//把开始的点和最后的点连接在一起，构成一个封闭图形
  71.         /*
  72.          * 最重要的就是movtTo和close,如果是Style.FILL的话，不设置close,也没有区别，可是如果是STROKE模式，
  73.          * 如果不设置close,图形不封闭。
  74.          *
  75.          * 当然，你也可以不设置close，再添加一条线，效果一样。
  76.          */
  77.         canvas.drawPath(path3, paint);
  78.         /**
  79.          * 第三列
  80.          */
  81.         /*
  82.          * LinearGradient shader = new LinearGradient(0, 0, endX, endY, new
  83.          * int[]{startColor, midleColor, endColor},new float[]{0 , 0.5f,
  84.          * 1.0f}, TileMode.MIRROR);
  85.          * 参数一为渐变起初点坐标x位置，参数二为y轴位置，参数三和四分辨对应渐变终点
  86.          * 其中参数new int[]{startColor, midleColor,endColor}是参与渐变效果的颜色集合，
  87.          * 其中参数new float[]{0 , 0.5f, 1.0f}是定义每个颜色处于的渐变相对位置， 这个参数可以为null，如果为null表示所有的颜色按顺序均匀的分布
  88.          */
  89.         Shader mShader = new LinearGradient(0, 0, 100, 410, new int[]{Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW}, null, Shader.TileMode.REPEAT);
  90.         // Shader.TileMode三种模式
  91.         // REPEAT:沿着渐变方向循环重复
  92.         // CLAMP:如果在预先定义的范围外画的话，就重复边界的颜色
  93.         // MIRROR:与REPEAT一样都是循环重复，但这个会对称重复
  94.         paint.setShader(mShader);
  95.  
  96.         canvas.drawCircle(160 + 40, 40, 30, paint);
  97.         canvas.drawRect(160 + 10, 90, 160 + 70, 150, paint);
  98.         canvas.drawRect(160 + 10, 170, 160 + 70, 200, paint);
  99.         canvas.drawOval(new RectF(160 + 10, 220, 160 + 70, 250), paint);//椭圆
  100.         /**
  101.          * 使用path 画三角形
  102.          */
  103.         Path path4 = new Path();
  104.         path4.moveTo(160 + 10, 330);
  105.         path4.lineTo(160 + 40, 270);
  106.         path4.lineTo(160 + 70, 330);
  107.         path4.close();
  108.         canvas.drawPath(path4, paint);
  109.         /**
  110.          * 梯形
  111.          */
  112.         Path path5 = new Path();
  113.         path5.moveTo(160 + 10, 410);
  114.         path5.lineTo(160 + 25, 350);
  115.         path5.lineTo(160 + 55, 350);
  116.         path5.lineTo(160 + 70, 410);
  117.         path5.close();//把开始的点和最后的点连接在一起，构成一个封闭图形
  118.         /*
  119.          * 最重要的就是movtTo和close,如果是Style.FILL的话，不设置close,也没有区别，可是如果是STROKE模式，
  120.          * 如果不设置close,图形不封闭。
  121.          *
  122.          * 当然，你也可以不设置close，再添加一条线，效果一样。
  123.          */
  124.         canvas.drawPath(path5, paint);
  125.         /**
  126.          * 绘制文字
  127.          * 第四列
  128.          */
  129.         paint.setTextSize(24);
  130.         canvas.drawText("圆形", 240, 50, paint);
  131.         canvas.drawText("正方形", 240, 120, paint);
  132.         canvas.drawText("长方形", 240, 190, paint);
  133.         canvas.drawText("椭圆形", 240, 250, paint);
  134.         canvas.drawText("三角形", 240, 320, paint);
  135.         canvas.drawText("梯形", 240, 390, paint);
  136.     }

这些就是绘制一些基本的图形，在一些自定义的控件中比较常用，下面讲下图形的简单变换

基本的常用矩阵变换操作包括平移、缩放、旋转、斜切。

在Android中，用Matrix这个类代表矩阵。Matrix是一个3x3的矩阵

Matrix提供了基本的变换，translate、scale、rotate、skew，针对每种变换，Android提供了set、pre和post三种操作方式。

    set用于设置单位矩阵中的值。我们通过new Matrix()得到的是一个单位矩阵，后续的矩阵变换都是针对这个单位矩阵进行变换。如Matrix.setRotate(90)、Matrix.setTranslate(10,20)等。
    pre指先乘，相当于矩阵运算中的右乘。如Matrix.setRotate(90)，表示M' = M * R(90)。
    post指后乘，相当于矩阵运算中的左乘，如Matrix.setRotate(90)，表示M' = R(90) * M。

在图形处理时，矩阵的运算是从右边往左边方向进行运算的。这就形成了越在右边(右乘)的矩阵，越先运算(先乘)，反之亦然。所以，右乘就是先乘，左乘就是后乘。更多了解请参考  浅谈矩阵变换——Matrix

现在我们需要将左上角的图片显示在整个view的中央，并且宽高撑满。

  1.  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
  2.         float scoleW = width * 1.0f / bitmap.getWidth();
  3.         float scoleH = height * 1.0f / bitmap.getHeight();
  4.        // float scale = Math.max(scoleW, scoleH);
  5.         matrix = new Matrix();
  6.         /**
  7.          * 先乘 平移
  8.          */
  9.         matrix.preTranslate(width / 2 - bitmap.getWidth() / 2, height / 2 - bitmap.getHeight() / 2);
  10.         /**
  11.          * 后乘 缩放
  12.          */
  13.         matrix.postScale(scoleW, scoleH, width / 2, height / 2);
  14.  
  15.  
  16. //        matrix.setRotate(20);
  17. //        matrix.preTranslate(width / 2 - bitmap.getWidth() / 2, height / 2 - bitmap.getHeight() / 2);
  18. //        matrix.postRotate(-20);
  19.  
  20.  
  21.         canvas.drawBitmap(bitmap, matrix, brushPaint);
  1.   brushPaint = new Paint();
  2.         brushPaint.setAntiAlias(true);
  3.         brushPaint.setStyle(Paint.Style.STROKE);
  4.         brushPaint.setStrokeCap(Paint.Cap.ROUND);
  5.         brushPaint.setStrokeJoin(Paint.Join.ROUND);
  6.         brushPaint.setColor(Color.RED);
  7.         brushPaint.setStrokeWidth(4);

3.绘制路径，橡皮及自定义按钮点击事件

1.自定义按钮及事件

 基本思路就是通过画布绘制一个图形，并且在图形内部绘制文字，通过触摸事件获取的位置，与当前图形的矩形区域对比，判断是否在其区域内部。从而判断是否需要相应点击事件，现在就来绘制橡皮按钮和画笔按钮。

  1.        /**
  2.      * 画笔
  3.      */
  4.     Paint brushPaint;
  5.     /**
  6.      * 橡皮
  7.      */
  8.     Paint rubberPaint;
  9.  
  10.  /**
  11.          * 画笔
  12.          */
  13.         brushPaint = new Paint();
  14.         brushPaint.setAntiAlias(true);
  15.         brushPaint.setStyle(Paint.Style.STROKE);
  16.         brushPaint.setStrokeCap(Paint.Cap.ROUND);
  17.         brushPaint.setStrokeJoin(Paint.Join.ROUND);
  18.         brushPaint.setColor(Color.RED);
  19.         brushPaint.setStrokeWidth(4);
  20.  
  21.         /**
  22.          * 橡皮
  23.          */
  24.         rubberPaint = new Paint();
  25.         //下面这句代码是橡皮擦设置的重点
  26.         rubberPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
  27.         rubberPaint.setStrokeWidth(20);
  28.         rubberPaint.setAntiAlias(true);
  29.         rubberPaint.setColor(Color.TRANSPARENT);
  30.         rubberPaint.setStyle(Paint.Style.STROKE);
  31.         rubberPaint.setStrokeJoin(Paint.Join.ROUND);
  32.         rubberPaint.setAlpha(0);

这里定义了两只画笔其中橡皮中setXfermode  属性很重要。

开始绘制按钮 ，在右上角垂直方向绘制橡皮和画笔

  1.  /**
  2.      * 绘制带点击事件的按钮
  3.      *
  4.      * @param canvas
  5.      */
  6.     @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
  7.     private void drawButton(Canvas canvas) {
  8.         targetRect = new RectF(width - 170, 10, width - 20, 100);
  9.         Paint paint = new Paint();
  10.         paint.setAntiAlias(true);//设置抗锯齿
  11.         paint.setColor(Color.BLUE);//画笔颜色
  12.         paint.setStyle(Paint.Style.FILL);//空心画笔
  13.         paint.setStrokeWidth(3); //设置笔刷的粗细
  14.         canvas.drawRoundRect(targetRect, 20, 20, paint);
  15.  
  16.         TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
  17.         textPaint.setAntiAlias(true);//设置抗锯齿
  18.         textPaint.setColor(Color.WHITE);//画笔颜色
  19.         textPaint.setStyle(Paint.Style.FILL);
  20.         textPaint.setStrokeWidth(2); //设置笔刷的粗细
  21.         textPaint.setTextAlign(Paint.Align.CENTER);
  22.         textPaint.setTextSize(28);
  23.         Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
  24.         float y = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
  25.         canvas.drawText("橡皮", targetRect.centerX(), y, textPaint);
  26.  
  27.         targetRect1 = new RectF(targetRect.left, 110, targetRect.right, 200);
  28.         canvas.drawRoundRect(targetRect1, 20, 20, paint);
  29.         float yp = (targetRect1.bottom + targetRect1.top - fontMetrics.bottom - fontMetrics.top) / 2;
  30.         canvas.drawText("画笔", targetRect.centerX(), yp, textPaint);
  31.     }

通过

canvas.drawRoundRect方法绘制矩形  
  1. public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint) {
  2.         drawRoundRect(rect.left, rect.top, rect.right, rect.bottom, rx, ry, paint);
  3.     }

 

rect：指绘制的矩形的绘制区域。

rx：x方向上的圆角半径。

ry：y方向上的圆角半径。

paint：绘制时所使用的画笔。

点击事件处理

  1.  private void buttonOnclick(float x, float y) {
  2.         if (!isChangePaint) {
  3.             return;
  4.         }
  5.         if (pointInRect(x, y, targetRect1)) {
  6.             paintType = PaintType.BRUSH.name();
  7.             Toast.makeText(context, "画笔", Toast.LENGTH_SHORT).show();
  8.         } else if (pointInRect(x, y, targetRect)) {
  9.             paintType = PaintType.RUBBER.name();
  10.             Toast.makeText(context, "橡皮", Toast.LENGTH_SHORT).show();
  11.         }
  12.     }
  1. private boolean pointInRect(float x, float y, RectF rectF) {
  2.         if ((x > rectF.left && x < rectF.right) && (y > rectF.top && y < rectF.bottom)) {
  3.             return true;
  4.         }
  5.         return false;
  6.     }

这个方法用于判断点击事件是否在按钮的区域内。

2.绘制路径及橡皮

这里牵扯到了图层的概念，我们将其分了两个图层，以用于绘制基本图形，及按钮，另一个用于绘制路径及橡皮。

这里就不再多说了直接将所有代码列出来，

  1. public class MyDrawView extends View {
  2.     boolean isFirst = true;
  3.     /**
  4.      * 画笔
  5.      */
  6.     Paint brushPaint;
  7.     /**
  8.      * 橡皮
  9.      */
  10.     Paint rubberPaint;
  11.     Path path;
  12.     private float downX, downY;
  13.     int width, height;
  14.     private RectF targetRect, targetRect1;
  15.     private boolean isChangePaint = false;
  16.     String paintType;
  17.     Context context;
  18.     Canvas mCanvas;
  19.     Bitmap mBitmap;
  20.     private float mX, mY;
  21.     private static final float TOUCH_TOLERANCE = 4;
  22.     private Matrix matrix;
  23.  
  24.     public enum PaintType {
  25.         /**
  26.          * 橡皮
  27.          */
  28.         RUBBER,
  29.         /**
  30.          * 画笔
  31.          */
  32.         BRUSH
  33.     }
  34.  
  35.     public MyDrawView(Context context) {
  36.         super(context);
  37.     }
  38.  
  39.     private boolean pointInRect(float x, float y, RectF rectF) {
  40.         if ((x > rectF.left && x < rectF.right) && (y > rectF.top && y < rectF.bottom)) {
  41.             return true;
  42.         }
  43.         return false;
  44.     }
  45.  
  46.     public MyDrawView(Context context, @Nullable AttributeSet attrs) {
  47.         super(context, attrs);
  48.         setFocusable(true);
  49.         this.context = context;
  50.         paintType = PaintType.BRUSH.name();
  51.         width = getResources().getDisplayMetrics().widthPixels;
  52.         height = getResources().getDisplayMetrics().heightPixels;
  53.         initPaint();
  54.  
  55.     }
  56.  
  57.     private void initPaint() {
  58.         path = new Path();
  59.         /**
  60.          * 画笔
  61.          */
  62.         brushPaint = new Paint();
  63.         brushPaint.setAntiAlias(true);
  64.         brushPaint.setStyle(Paint.Style.STROKE);
  65.         brushPaint.setStrokeCap(Paint.Cap.ROUND);
  66.         brushPaint.setStrokeJoin(Paint.Join.ROUND);
  67.         brushPaint.setColor(Color.RED);
  68.         brushPaint.setStrokeWidth(4);
  69.  
  70.         /**
  71.          * 橡皮
  72.          */
  73.         rubberPaint = new Paint();
  74.         //下面这句代码是橡皮擦设置的重点
  75.         rubberPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
  76.         rubberPaint.setStrokeWidth(20);
  77.         rubberPaint.setAntiAlias(true);
  78.         rubberPaint.setColor(Color.TRANSPARENT);
  79.         rubberPaint.setStyle(Paint.Style.STROKE);
  80.         rubberPaint.setStrokeJoin(Paint.Join.ROUND);
  81.         rubberPaint.setAlpha(0);
  82.  
  83.  
  84.         mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
  85.         BitmapFactory.Options opts = new BitmapFactory.Options();
  86.         opts.outHeight = height;
  87.         opts.outWidth = width;
  88.         mCanvas = new Canvas(mBitmap);
  89.     }
  90.  
  91.     @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
  92.     protected void onDraw(Canvas canvas) {
  93.         super.onDraw(canvas);
  94.         drawGraphics(canvas);
  95.         drawButton(canvas);
  96.         if (mBitmap != null) {
  97.                canvas.drawBitmap(mBitmap, 0, 0, brushPaint);
  98.         }
  99.         if (path != null) {
  100.             if (paintType.equals(PaintType.BRUSH.name())) {
  101.                 mCanvas.drawPath(path, brushPaint);
  102.             }
  103.  
  104.             if (paintType.equals(PaintType.RUBBER.name())) {
  105.                 mCanvas.drawPath(path, rubberPaint);
  106.             }
  107.         }
  108.  
  109.     }
  110.  
  111.     @Override
  112.     public boolean onTouchEvent(MotionEvent event) {
  113.         float x = event.getX();
  114.         float y = event.getY();
  115.         switch (event.getAction()) {
  116.             case MotionEvent.ACTION_DOWN:
  117.                 downX = event.getX();
  118.                 downY = event.getY();
  119.                 touch_start(x, y);
  120.                 invalidate();
  121.                 break;
  122.             case MotionEvent.ACTION_UP:
  123.                 buttonOnclick(event.getX(), event.getY());
  124.                 touch_up();
  125.                 invalidate();
  126.                 break;
  127.             case MotionEvent.ACTION_MOVE:
  128.                 float moveX = event.getX();
  129.                 float moveY = event.getY();
  130.                 if (Math.abs(moveX - downX) > 10f || Math.abs(moveY - downY) > 10f) {
  131.                     // path.lineTo(moveX, moveY);
  132.                     isChangePaint = true;
  133.                 } else {
  134.                     isChangePaint = false;
  135.                 }
  136.                 touch_move(x, y);
  137.                 invalidate();
  138.                 break;
  139.         }
  140.         return true;
  141.     }
  142.  
  143.     private void touch_start(float x, float y) {
  144.         path.reset();
  145.         path.moveTo(x, y);
  146.         mX = x;
  147.         mY = y;
  148.     }
  149.  
  150.     private void touch_move(float x, float y) {
  151.         float dx = Math.abs(x - mX);
  152.         float dy = Math.abs(y - mY);
  153.         if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
  154.             path.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
  155.             mX = x;
  156.             mY = y;
  157.         }
  158.     }
  159.  
  160.  
  161.     private void touch_up() {
  162.         path.lineTo(mX, mY);
  163.     }
  164.  
  165.     private void buttonOnclick(float x, float y) {
  166.         if (!isChangePaint) {
  167.             return;
  168.         }
  169.         if (pointInRect(x, y, targetRect1)) {
  170.             paintType = PaintType.BRUSH.name();
  171.             Toast.makeText(context, "画笔", Toast.LENGTH_SHORT).show();
  172.         } else if (pointInRect(x, y, targetRect)) {
  173.             paintType = PaintType.RUBBER.name();
  174.             Toast.makeText(context, "橡皮", Toast.LENGTH_SHORT).show();
  175.         }
  176.     }
  177.  
  178.     /**
  179.      * 绘制一部分图形
  180.      *
  181.      * @param canvas
  182.      */
  183.     private void drawGraphics(Canvas canvas) {
  184.         isFirst = false;
  185.         Paint paint = new Paint();
  186.         Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
  187.         float scoleW = width * 1.0f / bitmap.getWidth();
  188.         float scoleH = height * 1.0f / bitmap.getHeight();
  189.        // float scale = Math.max(scoleW, scoleH);
  190.         matrix = new Matrix();
  191.         /**
  192.          * 先乘 平移
  193.          */
  194.         matrix.preTranslate(width / 2 - bitmap.getWidth() / 2, height / 2 - bitmap.getHeight() / 2);
  195.         /**
  196.          * 后乘 缩放
  197.          */
  198.         matrix.postScale(scoleW, scoleH, width / 2, height / 2);
  199.  
  200.  
  201. //        matrix.setRotate(20);
  202. //        matrix.preTranslate(width / 2 - bitmap.getWidth() / 2, height / 2 - bitmap.getHeight() / 2);
  203. //        matrix.postRotate(-20);
  204.  
  205.  
  206.         canvas.drawBitmap(bitmap, matrix, brushPaint);
  207.  
  208.         paint.setAntiAlias(true);//设置抗锯齿
  209.         paint.setColor(Color.RED);//画笔颜色
  210.         paint.setStyle(Paint.Style.STROKE);//空心画笔
  211.         paint.setStrokeWidth(3); //设置笔刷的粗细
  212.         canvas.drawCircle(40, 40, 30, paint);
  213.         canvas.drawRect(10, 90, 70, 150, paint);
  214.         canvas.drawRect(10, 170, 70, 200, paint);
  215.         canvas.drawOval(new RectF(10, 220, 70, 250), paint);//椭圆
  216.         /**
  217.          * 使用path 画三角形
  218.          */
  219.         Path path = new Path();
  220.         path.moveTo(10, 330);
  221.         path.lineTo(40, 270);
  222.         path.lineTo(70, 330);
  223.         path.close();
  224.         canvas.drawPath(path, paint);
  225.         /**
  226.          * 梯形
  227.          */
  228.         Path path1 = new Path();
  229.         path1.moveTo(10, 410);
  230.         path1.lineTo(25, 350);
  231.         path1.lineTo(55, 350);
  232.         path1.lineTo(70, 410);
  233.         path1.close();//把开始的点和最后的点连接在一起，构成一个封闭图形
  234.         /*
  235.          * 最重要的就是movtTo和close,如果是Style.FILL的话，不设置close,也没有区别，可是如果是STROKE模式，
  236.          * 如果不设置close,图形不封闭。
  237.          *
  238.          * 当然，你也可以不设置close，再添加一条线，效果一样。
  239.          */
  240.         canvas.drawPath(path1, paint);
  241.  
  242.         /**
  243.          * 第二列
  244.          */
  245.         paint.setColor(Color.BLUE);
  246.         paint.setStyle(Paint.Style.FILL); //实心
  247.         canvas.drawCircle(80 + 40, 40, 30, paint);
  248.         canvas.drawRect(80 + 10, 90, 80 + 70, 150, paint);
  249.         canvas.drawRect(80 + 10, 170, 80 + 70, 200, paint);
  250.         canvas.drawOval(new RectF(80 + 10, 220, 80 + 70, 250), paint);//椭圆
  251.         /**
  252.          * 使用path 画三角形
  253.          */
  254.         Path path2 = new Path();
  255.         path2.moveTo(80 + 10, 330);
  256.         path2.lineTo(80 + 40, 270);
  257.         path2.lineTo(80 + 70, 330);
  258.         path2.close();
  259.         canvas.drawPath(path2, paint);
  260.         /**
  261.          * 梯形
  262.          */
  263.         Path path3 = new Path();
  264.         path3.moveTo(80 + 10, 410);
  265.         path3.lineTo(80 + 25, 350);
  266.         path3.lineTo(80 + 55, 350);
  267.         path3.lineTo(80 + 70, 410);
  268.         path3.close();//把开始的点和最后的点连接在一起，构成一个封闭图形
  269.         /*
  270.          * 最重要的就是movtTo和close,如果是Style.FILL的话，不设置close,也没有区别，可是如果是STROKE模式，
  271.          * 如果不设置close,图形不封闭。
  272.          *
  273.          * 当然，你也可以不设置close，再添加一条线，效果一样。
  274.          */
  275.         canvas.drawPath(path3, paint);
  276.         /**
  277.          * 第三列
  278.          */
  279.         /*
  280.          * LinearGradient shader = new LinearGradient(0, 0, endX, endY, new
  281.          * int[]{startColor, midleColor, endColor},new float[]{0 , 0.5f,
  282.          * 1.0f}, TileMode.MIRROR);
  283.          * 参数一为渐变起初点坐标x位置，参数二为y轴位置，参数三和四分辨对应渐变终点
  284.          * 其中参数new int[]{startColor, midleColor,endColor}是参与渐变效果的颜色集合，
  285.          * 其中参数new float[]{0 , 0.5f, 1.0f}是定义每个颜色处于的渐变相对位置， 这个参数可以为null，如果为null表示所有的颜色按顺序均匀的分布
  286.          */
  287.         Shader mShader = new LinearGradient(0, 0, 100, 410, new int[]{Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW}, null, Shader.TileMode.REPEAT);
  288.         // Shader.TileMode三种模式
  289.         // REPEAT:沿着渐变方向循环重复
  290.         // CLAMP:如果在预先定义的范围外画的话，就重复边界的颜色
  291.         // MIRROR:与REPEAT一样都是循环重复，但这个会对称重复
  292.         paint.setShader(mShader);
  293.  
  294.         canvas.drawCircle(160 + 40, 40, 30, paint);
  295.         canvas.drawRect(160 + 10, 90, 160 + 70, 150, paint);
  296.         canvas.drawRect(160 + 10, 170, 160 + 70, 200, paint);
  297.         canvas.drawOval(new RectF(160 + 10, 220, 160 + 70, 250), paint);//椭圆
  298.         /**
  299.          * 使用path 画三角形
  300.          */
  301.         Path path4 = new Path();
  302.         path4.moveTo(160 + 10, 330);
  303.         path4.lineTo(160 + 40, 270);
  304.         path4.lineTo(160 + 70, 330);
  305.         path4.close();
  306.         canvas.drawPath(path4, paint);
  307.         /**
  308.          * 梯形
  309.          */
  310.         Path path5 = new Path();
  311.         path5.moveTo(160 + 10, 410);
  312.         path5.lineTo(160 + 25, 350);
  313.         path5.lineTo(160 + 55, 350);
  314.         path5.lineTo(160 + 70, 410);
  315.         path5.close();//把开始的点和最后的点连接在一起，构成一个封闭图形
  316.         /*
  317.          * 最重要的就是movtTo和close,如果是Style.FILL的话，不设置close,也没有区别，可是如果是STROKE模式，
  318.          * 如果不设置close,图形不封闭。
  319.          *
  320.          * 当然，你也可以不设置close，再添加一条线，效果一样。
  321.          */
  322.         canvas.drawPath(path5, paint);
  323.         /**
  324.          * 绘制文字
  325.          * 第四列
  326.          */
  327.         paint.setTextSize(24);
  328.         canvas.drawText("圆形", 240, 50, paint);
  329.         canvas.drawText("正方形", 240, 120, paint);
  330.         canvas.drawText("长方形", 240, 190, paint);
  331.         canvas.drawText("椭圆形", 240, 250, paint);
  332.         canvas.drawText("三角形", 240, 320, paint);
  333.         canvas.drawText("梯形", 240, 390, paint);
  334.     }
  335.  
  336.     /**
  337.      * 绘制带点击事件的按钮
  338.      *
  339.      * @param canvas
  340.      */
  341.     @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
  342.     private void drawButton(Canvas canvas) {
  343.         targetRect = new RectF(width - 170, 10, width - 20, 100);
  344.         Paint paint = new Paint();
  345.         paint.setAntiAlias(true);//设置抗锯齿
  346.         paint.setColor(Color.BLUE);//画笔颜色
  347.         paint.setStyle(Paint.Style.FILL);//空心画笔
  348.         paint.setStrokeWidth(3); //设置笔刷的粗细
  349.         canvas.drawRoundRect(targetRect, 10, 20, paint);
  350.  
  351.         TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
  352.         textPaint.setAntiAlias(true);//设置抗锯齿
  353.         textPaint.setColor(Color.WHITE);//画笔颜色
  354.         textPaint.setStyle(Paint.Style.FILL);
  355.         textPaint.setStrokeWidth(2); //设置笔刷的粗细
  356.         textPaint.setTextAlign(Paint.Align.CENTER);
  357.         textPaint.setTextSize(28);
  358.         Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
  359.         float y = (targetRect.bottom + targetRect.top - fontMetrics.bottom - fontMetrics.top) / 2;
  360.         canvas.drawText("橡皮", targetRect.centerX(), y, textPaint);
  361.  
  362.         targetRect1 = new RectF(targetRect.left, 110, targetRect.right, 200);
  363.         canvas.drawRoundRect(targetRect1, 20, 20, paint);
  364.         float yp = (targetRect1.bottom + targetRect1.top - fontMetrics.bottom - fontMetrics.top) / 2;
  365.         canvas.drawText("画笔", targetRect.centerX(), yp, textPaint);
  366.     }
  367. }

这里就是所有的代码，如果看后有什么疑问或者问题欢迎留言

参考：

https://www.cnblogs.com/yishujun/p/5559917.html

https://blog.csdn.net/u012964944/article/details/77824768

 

 

 

 

 

 

 

 

 

 

 

 

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号