自定义View-绘制基础

HenCoder 原文

• 关键点 自定义绘制方法的重写，其中最常用的是onDraw
• 绘制的关键是Canvas的使用
  • Canvas的绘制类方法： drawXXX() （关键参数：Paint)
  • Canvas的辅助类方法： 范围裁切和集合变换
• 控制绘制的前后顺序来控制遮盖关系。

Canvas.drawXXX() 和 Paint基础

1. Paint类的几个最常用方法：

   • Paint.setStyle(Style style) 设置绘制模式：空心实心
     • Paint.Style.STROKE 划线模式 空心
     • Paint.Style.FILL 填充模式 实心
     • Paint.Style.FILL_AND_STROKE 既划线又填充
   • Paint.setColor(int color) 设置颜色
   • Paint.setStrokeWidth(float width) 设置线条宽度
   • Paint.setTextSize(float textSize) 设置字体大小
   • Paint.setAntiAlias(boolean open) 是否抗锯齿
     • 抗锯齿只是将边缘像素模糊化，避免由于色值差异过大，导致边缘过于尖锐。

2. drawColor(@ColorInt int color) 用于绘制之前设置底色 或者绘制之后设置蒙版

   • drawColor(Color.BLACK) 纯黑色
   • drawColor(Color.parse("#88880000") 半透明浅红色
   • drawRGB(100,200,100)

3. drawCircle(float centerX,float centY,float radius,Paint paint) 画圆

   • centerX,centerY 圆心点 radius 圆半径 paint 绘制的画笔

   • 在Android里，每一个View都有自己的坐标系。一个View的(x,y)指的是离他左上角x像素的位置,数值方向y像素的位置。

   • 画一个红色圆

     paint.setColor(Color.RED)
     canvas.drawCircle(300,300,200,paint) 先设置画笔颜色，再绘制
     

   • 画一个空心圆

     paint.setStyle(Paint.Style.STROKE) 
     canvas.drawCircle(300,300,200,paint) 设置画笔为划线模式
     

   • 画一个圆环

      paint.setStyle(Paint.Style.STROKE) 
      // 或者 paint.setStyle(Paint.Style.FILL_AND_STROKE)
      paint.setStrokeWidth(20) //设置线条宽度20
      canvas.drawCircle(300,300,200,paint) 
     

4. drawRect(float left,float top, float right, float bottom, Paint paint) 绘制矩形

   • left , top 矩形左上角坐标 right,bottom 矩形右下角坐标

   • drawRect(RectF rectF,Paint paint)，drawRect(Rect rect,Paint paint) 重载实现

   • 画有填充的矩形

     paint.setStyle(Style.FILL);
     canvas.drawRect(100,100,500,500,paint);
     

   • 画矩形边

     paint.setStyle(Style.STROKE);
     canvas.drawRect(100,100,500,500,paint);
     

5. drawPoint(float x,float y,Paint paint) 画点

   • x,y点的坐标

   • 点的大小通过设置线条粗细来设置

   • 点的形状（方形或者圆形）可以通过paint.setStrokeCap(cap)，ROUND 圆形，SQUARE 或者BUTT 方形 (Cap : 罩，盖)

   • 圆形的点

     paint.setStrokeWidth(20) ;//点的粗细
     paint.setStrokeCap(Paint.Cap.ROUND); // 点的形状
     canvas.drawPoint(50,50,paint);
     

   • 方形的点

     paint.setStrokeWidth(20);
     paint.setStrokeCap(Paint.Cap.SQUARE); 
     canvas.drawPoint(50,50,paint);
     

6. drawOval(float left, float top, float right, float bottom , Paint paint) 话椭圆

   • left,top,right,bottom 椭圆左上、右下界点坐标

   • 实心椭圆

     paint.setStyle(Style.FILL);
     canvas.drawOval(50,50,350,200,paint); 
     

   • 空心椭圆

     paint.setStyle(Style.STROKE);
     canvas.drawOval(50,50,350,200,paint);      
     

7. drawLine(float startX, float startY, float stopX, float stopY) 绘制直线

   • startX, startY , stopX, stopY 起点、终点坐标

   • 直线不是封闭图形，所以setStyle对其没有影响

     canvas.drawLine(200,200,500,500,paint);
     

8. drawRoundRect(float left, float top, float right, float bottom,float rx, float ry,Paint paint) 绘制圆角矩形

   • left,top,right,bottom 矩形边界坐标，rx,ry 圆角的横向和纵向半径

     canvas.drawRoundRect(100,100,500,300,50,50,paint);
     

9. drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, Paint paint) 绘制弧形或者扇形

   • 使用绘制椭圆来绘制。left,top,right,bottom 椭圆的边界点，

   • startAngle 弧形的起始角度, sweepAngle 弧形的划过角度, x 轴的正向，即正右的方向，是 0 度的位置；顺时针为正角度，逆时针为负角度

   • useCenter 是否连接“圆心”，不连接“圆心”，就是弧形，连接“圆心”，就是扇形。

   • 起始角度，旋转的方向，是否连接圆心画弧3要素

      paint.setStyle(Style.FILL); // 填充模式
      canvas.drawArc(200,100,800,500,-110,100,true,paint); //连接圆心，扇形（连接圆弧和圆形的图像）
      canvas.drawArc(200,100,800,500,20,140,flase,paint);// 不连接圆心，但填充模式会生成封闭区域，会连接起点和终点，所以成填充的“弧形”
      paint.setStyle(Style.STROKE); // 划线模式
      canvas.drawArc(200,100,800,500,180,60,false,paint); // 绘制弧形，“只有圆弧”
     

     

     弧形

10. drawPath（path) 路径绘制

• 描述路径

  • addXXX() 添加子图形

  • addCircle(float x, float y, float radius, Direction dir)

    • x,y,radius 圆的圆心坐标和圆的半径

    • dir 顺时针（CW: Clockwise）还是逆时针(counter-clockwise) 这个在图形自相交的情况下会影响填充的判断

      path.addCircle(300,300,200,Path.Direction.CW);
         ...
      canvas.drawPath(path,paint);
      

    • 如果只需要单纯的画一个圆，那么直接用cavas.drawCirle()就可以实现，没必要搞成这么复杂

  • addOval(float left , float top, float right, float bottom, Direction dir) / addOval(RectF oval,Direction dir) 添加椭圆

  • addRect(float left , float top, float right, float bottom, Direction dir) / addRect(RectF rect, Direction dir) 添加椭圆

  • addRoundRect(RectF rectf, float rx, float ry,Direction dir) / addRoundRect(float left , float top, float right, float bottom, float rx, float ry,Direction dir) 添加圆角矩形

  • addPath() 添加另外一个path

    • xxxTo() 画线

      • lineTo(float x, float y) / rLineTo(float x, float y) 从当前位置画直线到x,y位置

        • r(relative) 相对坐标

          paint.setStyle(Style.STROKE) ; //设置画线模式
          path.lineTo(100,100);
          canvas.drawPath(path,paint);
          

      • quardTo(float x1, float y1,float x2 ,float y2) / rQuardTo(float x1, float y1 , float x2, float y2) 二次贝塞尔曲线

      • cubicTO(float x1, float y1,float x2 ,float y2, float x3, float y3) / rCubicTO(float x1, float y1,float x2 ,float y2, float x3, float y3) 三次贝塞尔曲线

      • moveTo(float x, float y) 从当前停笔位置，移动画笔到指定位置，然后再开始绘制

      • arcTo(RectF oval, float startAngle, float sweepAngle, boolen forceMoveTo) / arcTo(float left, float top, float right , float bottom , float startAngle, float sweeoAngle) / arcTo(RectF oval, float startAngle, float sweepAngle) 画弧形

        • 比之drawArc()方法，缺少了userCenter,因为此处是明确画弧形，而userCenter为trues时绘制的是扇形。 forceMoveTo 表示是从当前位置直接跳到指定位置开始绘制弧形还是 从当前位置画一条直线到指定位置，然后再开始绘制弧形，即是否有拖动的痕迹。
        • addArc()是使用forceMoveTo = true的简化版arcTo()
    • close() 直线连接起底而最终的终点，封闭子图形

  • Path.setFillType(fillType) 辅助计算 -- 自相交时的填充绘制

    • FillType 四种取值

      • EVEN_ODD
      • WINDING (默认值）
      • INVERSE_EVEN_ODD (第1种反模式）
      • INVERSE_WINDING （第2种反模式)

    • EVEN_ODD -- even-odd rule 奇偶原则

      • 区域内的任意一点向任意方向发射射线，如果与图形相交的次数为奇数，则认为区域在图形的内部，区域被填充颜色；如果为偶数，则为图形内部，则不填充颜色。

        

        奇偶原则

    • WINDING 缠绕原则

      • 每个图形都有其绘制的方向（CW 顺时针,CCW 逆时针）
      • 区域内的任意一点向任意方向发射射线，起始交叉数为0，如果与顺时针方向的线条相交则交叉数增加1，如果与逆时针方向的线条相交则交叉数减去1，最终的交叉数如果不是0，那么区域在图形的内部，区域被填充颜色，如果为0，区域在图形的外部，区域不填充颜色。
      

      缠绕原则
      
      
      

      对比

11. drawBitmap(Bitmap bitmap, float left, float top, paint() 画bitmap

    • 把bitmap图形绘制到left,top位置。
    • 重载方法
      • drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)
      • drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)
      • drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

12. drawText(String text, float x,float y, Paint paint) 绘制文字

    • text 需要绘制的文字， x,y 绘制的起始点坐标，文字是在起始点坐标之上进行绘制
    • paint.setTextSize() 设置绘制的文打字大小
    • paint.setStyle(Style.FILL) 设置填充样式

HenCoder 原文