Canvas使用

Canvas我们可以称之为画布,我们可以使用画笔在上面绘制颜色,也可以绘制点、线以及矩形、扇形等各种形状,还可以绘制图片文本路径等,下面我们一一进行介绍

绘制颜色

Canvas提供了三个绘制颜色的方法。

  • drawColor

  • drawRGB

  • drawARGB

绘制基本形状

想要在画布上进行绘制,就需要一个画笔Paint。这里我们只简单介绍画笔的使用,关于画笔的详细使用将在画笔这一章详细介绍。

public class CanvasView extends View {
  public CanvasView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    initPaint();
  }
  //1.创建Paint对象
  private Paint mPaint = new Paint();
  //2.初始化Paint
  private void initPaint(){
    mPaint.setColor(getResources().getColor(R.color.purple));//设置画笔颜色
    mPaint.setStyle(Paint.Style.FILL);//设置画笔样式为填充
    mPaint.setStrokeWidth(10f); //设置画笔宽度为10px
  }

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

绘制点

绘制一个点需要这个点的坐标。

Canvas提供了三个绘制点的方法:

  • public void drawPoint(float x, float y, @NonNull Paint paint);绘制单个点

  • public void drawPoints(@Size(multiple=2) @NonNull float[] pts, @NonNull Paint paint) 绘制多个点

  • public void drawPoints(@Size(multiple=2) float[] pts, int offset, int count, @NonNull Paint paint)

绘制直线

绘制直线需要两个点,初始点和结束点。

Canvas同样提供了三个绘制直线的方法:

  • public void drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint)

  • public void drawLines(@Size(multiple=4) @NonNull float[] pts, int offset, int count,@NonNull Paint paint)

  • public void drawLines(@Size(multiple=4) @NonNull float[] pts, @NonNull Paint paint)

绘制矩形

确定一个矩形最少需要四个数据,就是对角线的两个点的坐标值,这里一般采用左上角和右下角的两个点的坐标。

Canvas提供了三个绘制矩形的方法:

  • public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint):前两个参数是左上角点的坐标,后两个参数是右下角坐标点

  • public void drawRect(@NonNull Rect r, @NonNull Paint paint)

  • public void drawRect(@NonNull RectF rect, @NonNull Paint paint)

绘制圆角矩形

Canvas提供了两个绘制圆角矩形的方法:

  • public void drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,@NonNull Paint paint):相比绘制矩形,我们需要提供一个圆角的半径,由于圆角是一个椭圆,所以需要提供椭圆的两个半径rx和ry。

  • public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)

当rx或者ry的值大于矩形的一半时,按照一半进行处理:

绘制椭圆

绘制圆

绘制圆弧

Canvas提供了两个绘制圆弧的方法:

  • public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint)

  • public void drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, @NonNull Paint paint)

从上面可以看出,相比于绘制椭圆,绘制圆弧还多了三个参数:

  • startAngle:开始角度

  • sweepAngle:扫过角度

  • useCenter:是否使用中心,使用了中心点之后绘制出来类似于一个扇形,而不使用中心点则是圆弧起始点和结束点之间的连线加上圆弧围成的图形。

画布操作

位移(translate)

缩放(scale)

canvas提供了两个方法缩放的方法

  • public void scale (float sx, float sy)

  • public final void scale (float sx, float sy, float px, float py)

这两个方法中前两个参数是相同的分别为x轴和y轴的缩放比例。而第二种方法比前一种多了两个参数,用来控制缩放中心位置的。

缩放比例(sx,sy)取值范围详解:

取值范围(n)
说明

[-∞, -1)

先根据缩放中心放大n倍,再根据中心轴进行翻转

-1

根据缩放中心轴进行翻转

(-1, 0)

先根据缩放中心缩小到n,再根据中心轴进行翻转

0

不会显示,若sx为0,则宽度为0,不会显示,sy同理

(0, 1)

根据缩放中心缩小到n

1

没有变化

(1, +∞)

根据缩放中心放大n倍

如果在缩放时稍微注意一下就会发现缩放的中心默认为坐标原点,而缩放中心轴就是坐标轴,如下:

设置缩放中心位置

前面两个示例缩放的数值都是正数,按照表格中的说明,当缩放比例为负数的时候会根据缩放中心轴进行翻转,下面我们就来实验一下:

本次缩放可以看做是先根据缩放中心(坐标原点)缩放到原来的0.5倍,然后分别按照x轴和y轴进行翻转。

旋转(rotate)

canvas提供了两个旋转的方法:

  • public void rotate (float degrees)

  • public final void rotate (float degrees, float px, float py)

    和缩放一样,第二种方法多出来的两个参数依旧是控制旋转中心点的。

默认的旋转中心依旧是坐标原点:

错切(skew)

skew这里翻译为错切,错切是特殊类型的线性变换。

错切只提供了一种方法:

  • public void skew (float sx, float sy)

参数含义: float sx:将画布在x方向上倾斜相应的角度,sx倾斜角度的tan值. float sy:将画布在y轴方向上倾斜相应的角度,sy为倾斜角度的tan值.

示例:

绘制图片

绘制Bitmap

Canvas提供了如下绘制Bitmap的方法:

绘制部分区域

绘制文字

canvas提供如下绘制文字的方法

为每个字符指定位置

参考

最后更新于