在本教程中，我们将讨论Android的一个非常重要的部分，即Canvas。
每个开发人员都希望远离这个领域。
本教程的目的是使您更加了解Android Canvas，并且更加放心。

Android画布

很多时候，您最终会遇到需要实现自定义视图和/或者对其进行动画处理的情况。
需求可能是如此具体，以至于您需要从头开始实施。
画布在构建此类自定义视图中起着至关重要的作用。

Canvas是2D绘图框架，为我们提供了在底层位图上进行绘图的方法。
位图充当画布在其上放置的表面。
Paint类用于提供颜色和样式。

在深入研究Canvas之前，让我们看一下Custom View的生命周期。

自定义视图包含以下常用方法：

onMeasure()
onLayout()
onDraw()

在onMeasure内部，我们确定视图及其子视图的大小。

在" onLayout"内部，将尺寸分配给视图。

onDraw方法是绘制画布的位置。

画布对象基本上是onDraw方法中的一个参数。

invalidate()方法用于重绘视图。
它再次调用onDraw方法。
通常，当需要基于某些事件更新文本或者颜色或者视图时，将使用此选项。

Canvas类包含一些方法来绘制某些形状，例如直线，圆弧，圆，上方。
此外，我们也可以使用Paths绘制复杂的几何图形。

我们也可以在画布上绘制文本或者仅绘制颜色。

由于画布是在屏幕上绘制的，因此绘制的视图需要以像素(px)为单位进行度量。

让我们看看如何通过示例android studio项目在Canvas上绘制基本内容。

Android Canvas示例项目结构

Android Canvas示例项目

要创建路径，两个方法很重要：moveTo()和lineTo()。

moveTo将带您到屏幕上指定的坐标。

lineTo从当前位置到指定位置画一条线。

close()用于关闭路径。

画布坐标系如何工作？

在画布中0,0是左上角。
当您向右水平移动时，x坐标会增加。
当您垂直向下移动时，y坐标以像素为单位增加。

矩形与矩形

Rect对象用于创建一个矩形，其中每边均以整数值指定。
RectF进行相同的操作，但使用浮点值。

在下面的示例中，我们将看到如何绘制各种形状以及如何使用Paint对其进行样式设置。

Android Canvas示例代码

" activity_main.xml"布局的代码是基本的根布局，我们将其中添加Canvas：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  android:id="@+id/linearLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity" 

下面给出了MainActivity.java的代码：

package com.theitroad.androidcanvasbasics;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity {

  LinearLayout linearLayout;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      linearLayout = findViewById(R.id.linearLayout);
      MyView myView = new MyView(this);
      linearLayout.addView(myView);
  }
}

MyView类是我们创建自定义视图的地方。
最后，让我们来使用Canvas！

package com.theitroad.androidcanvasbasics;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.RectF;
import android.graphics.Region;
import android.util.DisplayMetrics;
import android.view.View;

public class MyView extends View {

  Paint mPaint, otherPaint, outerPaint, mTextPaint;
  RectF mRectF;
  int mPadding;

  float arcLeft, arcTop, arcRight, arcBottom;

  Path mPath;

  public MyView(Context context) {
      super(context);

      mPaint = new Paint();
      mPaint.setAntiAlias(true);

      mPaint.setStyle(Paint.Style.STROKE);
      mPaint.setColor(Color.BLUE);
      mPaint.setStrokeWidth(5);

      mTextPaint = new Paint(Paint.LINEAR_TEXT_FLAG | Paint.ANTI_ALIAS_FLAG);
      mTextPaint.setColor(Color.BLACK);
      mTextPaint.setTextSize(pxFromDp(context, 24));

      otherPaint = new Paint();

      outerPaint = new Paint();
      outerPaint.setStyle(Paint.Style.FILL);
      outerPaint.setColor(Color.YELLOW);

      mPadding = 100;

      DisplayMetrics displayMetrics = new DisplayMetrics();

      ((Activity) getContext()).getWindowManager()
              .getDefaultDisplay()
              .getMetrics(displayMetrics);

      int screenWidth = displayMetrics.widthPixels;
      int screenHeight = displayMetrics.heightPixels;

      arcLeft = pxFromDp(context, 20);
      arcTop = pxFromDp(context, 20);
      arcRight = pxFromDp(context, 100);
      arcBottom = pxFromDp(context, 100);

      Point p1 = new Point((int) pxFromDp(context, 80) + (screenWidth/2), (int) pxFromDp(context, 40));
      Point p2 = new Point((int) pxFromDp(context, 40) + (screenWidth/2), (int) pxFromDp(context, 80));
      Point p3 = new Point((int) pxFromDp(context, 120) + (screenWidth/2), (int) pxFromDp(context, 80));

      mPath = new Path();
      mPath.moveTo(p1.x, p1.y);
      mPath.lineTo(p2.x, p2.y);
      mPath.lineTo(p3.x, p3.y);
      mPath.close();

      mRectF = new RectF(screenWidth/4, screenHeight/3, screenWidth/6, screenHeight/2);

  }

  @Override
  protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);

      canvas.drawRoundRect(mRectF, 10, 10, otherPaint);
      canvas.clipRect(mRectF, Region.Op.DIFFERENCE);
      canvas.drawPaint(outerPaint);

      canvas.drawLine(250, 250, 400, 400, mPaint);
      canvas.drawRect(mPadding, mPadding, getWidth() - mPadding, getHeight() - mPadding, mPaint);
      canvas.drawArc(arcLeft, arcTop, arcRight, arcBottom, 75, 45, true, mPaint);

      otherPaint.setColor(Color.GREEN);
      otherPaint.setStyle(Paint.Style.FILL);

      canvas.drawRect(
              getLeft() + (getRight() - getLeft())/3,
              getTop() + (getBottom() - getTop())/3,
              getRight() - (getRight() - getLeft())/3,
              getBottom() - (getBottom() - getTop())/3, otherPaint);

      canvas.drawPath(mPath, mPaint);
      otherPaint.setColor(Color.BLACK);
      canvas.drawCircle(getWidth()/2, getHeight()/2, arcLeft, otherPaint);

      canvas.drawText("Canvas basics", (float) (getWidth() * 0.3), (float) (getHeight() * 0.8), mTextPaint);

  }

  public static float pxFromDp(final Context context, final float dp) {
      return dp * context.getResources().getDisplayMetrics().density;
  }

}

pxFromDp方法用于获取与传递的dp值等效的像素。

canvas.drawLine(250，250，400，400，mPaint);只需画一条从x1 y1到x2 y2的线。

以下代码用于在屏幕中央绘制一个矩形。

canvas.drawRect(
              getLeft() + (getRight() - getLeft())/3,
              getTop() + (getBottom() - getTop())/3,
              getRight() - (getRight() - getLeft())/3,
              getBottom() - (getBottom() - getTop())/3, otherPaint);

在" drawCircle"方法内部，传递的前两个参数是圆心的坐标。
第三个参数设置圆的半径。

clipRect用矩形裁剪画布。
最后一个参数设置裁剪区域样式。

Region.Op.DIFFERENCE在画布和clipRect方法中指定的矩形之间的区域上设置Paint。

在drawText方法内部，两个float值设置文本的原点位置。
我们将其设置为屏幕左侧的30％和屏幕顶部的80％。

为什么在Paint中需要使用抗别名标志？反别名标志可确保形状平滑。

画布上绘制的不同形状如何相对定位？