参考 开始了解Canvas和Paint

1. View 的绘制

完成了View的测量后，根据拿到的View的大小，位置，重写onDraw(Canvas canvas)就可以进行绘制。

现实中，如果想要画一幅画，必须要有画笔和画布。Canvas就是画布，Paint就是画笔。Canvas和Patint有各种各样的属性。本篇先学习部分常用的基础的属性，一些可以高度化定制的属性后续再进行学习。

2. Canvas

想要画出一个View就必须要有4个必要的元素：

1. 保存像素的Bitmap
2. 管理绘制请求的Canvas
3. 绘画的原始基本元素，例如矩形，线，文字，Bitmap
4. 拥有颜色和风格信息的画笔

Canvas有两种常见创建方法：
Canvas canvas = new Canvas() 空参构造方法
Canvas canvas = new Canvas(bitmap) 创建一个装载画布。构造方法中传入的bitmap存储所有绘制在canvas的信息。

常用的几个绘制方法

2.1drawRect()

drawRect()有三种重载方法：

• drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)
• drawRect(@NonNull Rect r, @NonNull Paint paint)
• drawRect(@NonNull RectF r, @NonNull Paint paint)
  两个方法的差别在于Rect和RectF的差别：Rect 坐标为integer 而RectF 坐标为float

MeausreView代码，主要绘制就是onDraw()方法：

public class MeasureView extends View {
    private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    public MeasureView(Context context) {
        super(context);
        initPaint();
    }

    public MeasureView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public MeasureView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureWidth(widthMeasureSpec), measuredHeight(heightMeasureSpec));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float left = getLeft();
        float right = getRight();
        float top = getTop();
        float bottom = getBottom();
        canvas.drawRect(left,top,right,bottom,paint); // 绘制矩形
//        Rect rect = new RectF(100,100,200,200);
//        canvas.drawRect(rect,paint);

//        RectF rect = new RectF(100.5f,100.5f,200.5f,200.5f);
//        canvas.drawRect(rect,paint);
    }

    /**
     * 测量宽
     *
     * @param widthMeasureSpec
     */
    private int measureWidth(int widthMeasureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = 200;
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    /**
     * 测量高
     *
     * @param heightMeasureSpec
     */
    private int measuredHeight(int heightMeasureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(heightMeasureSpec);
        int specSize = MeasureSpec.getSize(heightMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = 200;
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    private void initPaint() {
        paint.setColor(Color.parseColor("#FF4081"));
    }
}

MeausureView 的 width = right - left
MeausureView 的 height = bottom - top
在Activity的布局文件中：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.szlk.customview.custom.MeasureView
        android:id="@+id/mv_custom_activity"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/colorPrimary" />
</LinearLayout>

2.2 drawCricle() 绘制圆形

• drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
radius: 半径
  cx : 圆心的x坐标
  cy : 圆心的y坐标
  使用的时候需要考虑圆心和半径
  使用：

   protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float width = getWidth();
        float height = getHeight();
        float radius = Math.max(width,height)/2; //绘制圆形时，半径是宽和高中较大者的二分之一
        Log.d("MeasureView", "onDraw: "+(radius));
        canvas.drawCircle(width/2, height/2, radius, paint);
    }

2.3 drawArc() 绘制扇形

两种构造方法：

1. drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, @NonNull Paint paint)
2. drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint)

两种方法的区别：

• 方法2把坐标封装进RectF对象中
• 方法1要求系统最低为21

• float startAngle 开始绘制的角度
• float sweepAngle 扇形扫过的角度，并不是停止时的角度。停止角度 = startAngle+ sweepAngle
• boolean useCenter ture 就是有焦点圆心 ， false 没有
  
  image.png

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        RectF rect = new RectF(0f,0f,500f,500f);
        canvas.drawArc(rect,0,60,false,paint);
        canvas.drawArc(rect,60,30,true,paint2);
    }

有焦点圆心与无焦点圆心.png

2.4 drawBitmap() 绘制Bitmap

drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint)

• left 左上角横坐标
• top 左上角纵坐标

绘制Bitmap.png

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
    float width = (getWidth()-bitmap.getWidth())/2;
    float height = (getHeight()-bitmap.getHeight())/2;
    canvas.drawBitmap(bitmap,width,height,paint);
}

2.5 drawText()绘制文字

• drawText(@NonNull String text, float x, float y, @NonNull Paint paint)

drawText()绘制文字.png

   @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawText("HelloWorld",100,100,paint);
    }

2.6 drawPath()路径

• drawPath()
• moveTo()就是绘制的起始点，默认为(0,9)
• lineTo() 连接的点
  
  image.png

  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Path p = new Path();
        p.moveTo(100, 100);
        p.lineTo(200, 50);
        p.lineTo(300, 100);
        p.lineTo(200,400);
        canvas.drawPath(p,paint);
    }

3. Paint

画笔能够拿到，所要绘制的几何图形、文字或者Bitmap的颜色、风格等信息
画笔有三种构造方法：

• public Paint() { this(0); } 创建一个默认属性的画笔
• public Paint(int flags) {...} 创建一个带有标记的画笔。也可以通过setFlags()去为一个已经创建过的画笔设置标签
• public Paint(Paint paint) {...} 通过一个已经配置好信息的画笔来创建一个新的画笔

3.1常用属性方法

• 绘制文字

• 绘制图像

注意：onDraw()方法中，最好不要进行new对象。