Android绘图基础之Canvas & Paint & Rect & RectF

---

转载请注明出处：http://blog.csdn.net/crazy1235/article/details/73611978

---

---

Rect & RectF

RectF和Rect都表示的是一个矩形的区域，他们的构造方法类似!

不同的是，Rect 的精度是integer，RectF 的精度是float !!

public Rect(int left, int top, int right, int bottom) {        this.left = left;        this.top = top;        this.right = right;        this.bottom = bottom;    }

public RectF(float left, float top, float right, float bottom) {        this.left = left;        this.top = top;        this.right = right;        this.bottom = bottom;    }

在RectF.java 中，有这样两个函数

public void round(Rect dst) {        dst.set(FastMath.round(left), FastMath.round(top),                FastMath.round(right), FastMath.round(bottom));    }

public void roundOut(Rect dst) {        dst.set((int) Math.floor(left), (int) Math.floor(top),                (int) Math.ceil(right), (int) Math.ceil(bottom));    }

目的就是将 RectF 转成 Rect

---

Canvas

Canvas – 画布

canvas 里的方法基本可以分为这么几类：

• save、restore 等与层的保存和回滚相关的方法；

• scale、rotate、clipxxx 等对画布进行操作的方法；

• drawxxx 等一系列绘图相关的方法；

想要画图案，就得需要用到画布(Canvas)、画笔(Paint)、路径(Path)、填充(Shader)。

想要对图案做变形处理，就得用到Matrix(矩阵)

---

Paint

Paint就是画布上画图用的画笔！

提供了画笔的颜色、透明度、大小、笔刷的风格等属性！

Paint常用属性如下：

• setARGB/setColor 设置颜色

• setAlpha 设置透明度

• setAntiAlias 设置是否抗锯齿

• setShader 设置画笔的填充效果

• setShaderLayer 设置阴影

• setStyle 设置画笔风格（填充模式）

  • Paint.Style.FILL :填充内部

  • Paint.Style.FILL_AND_STROKE ：填充内部和描边

  • Paint.Style.STROKE ：仅描边

• setStrokeWidth 设置边框的宽度

• setStrokeCap() 设置线冒样式

  • Paint.Cap.ROUND ： 圆形线冒

  • Paint.Cap.SQUARE：方形线冒

  • Paint.Cap.BUTT：无线冒

• setStrokeJoin() 设置线段连接处样式

  • Paint.Join.MITER：结合处为锐角

  • Paint.Join.Round：结合处为圆弧

  • Paint.Join.BEVEL：结合处为直线)

• setStrokeMiter(float miter) ：设置笔画的倾斜度

• setPathEffect(PathEffect effect) ：设置路径样式

• setXfermode(Xfermode xfermode)：设置Xfermode样式

• setTextSize()：设置文字大小

• setTextAlign(Align align) : 设置文字排列方式

• setTextScaleX(float scaleX)：设置文字X轴方向缩放比例，默认值是1.0，大于1.0表示放大，小于1.0表示缩小

• setTextSkewX(float skewX)：设置文字X轴错切

---

Point

Canvas绘制点有三个重载的函数：

• drawPoint(float x, float y, @NonNull Paint paint)

• drawPoints(@Size(multiple=2) @NonNull float[] pts, @NonNull Paint paint)

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

paint.setStrokeWidth(50);paint.setColor(Color.BLACK);canvas.drawPoint(200, 200, paint); // 点的x、y坐标， 画笔

private float[] points = new float[]{10, 10, 100, 10, 200, 100};canvas.drawPoints(points, paint); // 坐标的数组 + 画笔// 数组中多余（不是2的倍数时）系统忽略掉！

// 第二个参数表示数组偏移几位// 第三个参数表示使用数组中的几位，最好是2的倍数！canvas.drawPoints(points, 1, 4, paint); 

---

Line

Canvas绘制线有三个重载的函数

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

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

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

canvas.drawLine(100, 100, 200, 200, paint); // 起点和终点，加上画笔

private float[] lines = new float[]{0, 0, 100, 0, 0, 0, 100, 100, 0, 0, 0, 100};canvas.drawLines(lines, paint); // 绘制多条线

绘制多条线的函数，第一个参数是一个数组，而数组的长度需要时4的倍数！

@Size(multiple=4) @NonNull float[] pts

如果不是4的倍数，绘制的时候只会去前面是4的倍数的组，后面的将被舍弃！

三个参数的函数：

canvas.drawLines(lines, 2, 8, paint);

第一个参数同样是点(x, y)的集合，第二个参数表示“偏移量“，就是需要跳过数组前面一定的值，从中间某个位置开始取值；第三个参数count， 表示要取出值的个数，由于要画线，所以count尽量是4的倍数！

---

两个参数的函数的效果图：

---

Arc

Canvas中关于画圆弧也有2个重载的函数：

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

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

画圆弧依托于oval（椭圆）！

RectF 或者Rect 表示一个矩形区域，一个矩形区域对应着一个内接椭圆~

而圆弧正是椭圆上的一部分！

        paint.setColor(Color.GREEN);        paint.setStrokeWidth(10);        canvas.drawArc(rectF, 0, 90, true, paint); // startAngel 表示圆弧起始的角度，sweepAngle表示圆弧的角度（跨度），  useCenter 表示是否将中心包括在内，绘制成扇形！        paint.setColor(Color.RED);        canvas.drawArc(rectF, 90, 90, true, paint);        paint.setColor(Color.BLUE);        canvas.drawArc(rectF, 180, 90, true, paint);        paint.setColor(Color.BLACK);        canvas.drawArc(rectF, 270, 90, true, paint);

        paint.setColor(Color.GREEN);        canvas.drawArc(rectF, 0, 90, true, paint);        paint.setColor(Color.RED);        canvas.drawArc(rectF, 90, 90, false, paint); // 不包括中心点        paint.setColor(Color.BLUE);        canvas.drawArc(rectF, 180, 90, true, paint);        paint.setColor(Color.BLACK);        canvas.drawArc(rectF, 270, 90, false, paint); // 不包括中心点

而8个参数的函数，前面四个参数分别是left, top, right, bottom！正好定义了一个RectF 矩形区域！

其实这两个函数内部是有关联的：

public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint) {        drawRoundRect(rect.left, rect.top, rect.right, rect.bottom, rx, ry, paint); // 将RectF拆开，调用8个参数的函数！    }

举例：

 canvas.drawArc(0, 0, 300, 300, 30, 90, true, paint);        paint.setColor(Color.GRAY);        canvas.drawArc(0, 0, 300, 300, 30, -90, true, paint);

---

Circle

绘制圆形就需要一个中心点坐标(x, y)，加一个半径，和画笔！

• drawCircle(float cx, float cy, float radius, @NonNull Paint paint)

canvas.drawCircle(200, 200, 100, paint);

如果想画一个圆环，就是中间不填充，改一下画笔的填充模式即可！

paint.setStyle(Paint.Style.STROKE);canvas.drawCircle(200, 200, 100, paint);

---

Oval

绘制椭圆就需要一个矩形区域！

• drawOval(@NonNull RectF oval, @NonNull Paint paint)

• drawOval(float left, float top, float right, float bottom, @NonNull Paint paint)

canvas.drawOval(rectF, paint);paint.setColor(Color.RED);paint.setStyle(Paint.Style.STROKE);canvas.drawOval(150, 300, 700, 700, paint);

---

Rect

绘制矩形

• drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)

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

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

private Rect rect = new Rect(150, 150, 300, 500);private RectF rectF = new RectF(100.5f, 100.5f, 400.5f, 600.0f);

canvas.drawRect(rect, paint);paint.setColor(Color.RED);paint.setStyle(Paint.Style.STROKE);canvas.drawRect(rectF, paint);paint.setColor(Color.YELLOW);canvas.drawRect(50.0f, 50.0f, 650.0f, 650.0f, paint);

---

RoundRect

• drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, @NonNull Paint paint)

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

canvas.drawRoundRect(rectF, 30, 30, paint);paint.setStyle(Paint.Style.STROKE);paint.setColor(Color.YELLOW);canvas.drawRoundRect(50.0f, 50.0f, 600.f, 300.f, 30, 30, paint);

---

Text

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

• drawText(@NonNull CharSequence text, int start, int end, float x, float y, @NonNull Paint paint)

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

• drawTextOnPath(@NonNull char[] text, int index, int count, @NonNull Path path, float hOffset, float vOffset, @NonNull Paint paint)

• drawTextOnPath(@NonNull String text, @NonNull Path path, float hOffset,float vOffset, @NonNull Paint paint)

paint.setColor(Color.BLUE);paint.setTextSize(40.0f);canvas.drawText("黄河之水天上来\n奔流到海不复回", 0, 100, paint);paint.setColor(Color.YELLOW);paint.setTextSkewX(-0.5f); // X轴错切canvas.drawText("为天地立心，为生民立命", 2, 6, 0, 200, paint);paint.setColor(Color.MAGENTA);paint.setTextScaleX(1.5f); // X轴缩放canvas.drawText(chars, 1, 5, 0, 300, paint);paint.setColor(Color.BLACK);paint.setTextSize(30.0f);canvas.drawText(spannableString, 0, spannableString.length() - 1, 0, 400, paint);path.addOval(rectF2, Path.Direction.CCW);paint.setStyle(Paint.Style.STROKE);canvas.drawPath(path, paint);paint.setColor(Color.RED);paint.setTextSize(40.0f);paint.setStyle(Paint.Style.FILL);canvas.drawTextOnPath("大河向东流", path, 0, 50, paint);

---

Bitmap

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

• drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull RectF dst, @Nullable Paint paint)

• drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull Rect dst, @Nullable Paint paint)

• drawBitmap(@NonNull Bitmap bitmap, @NonNull Matrix matrix, @Nullable Paint paint)

src 是指bitmap的区域，dst是指bitmap显示在屏幕上的区域

private Matrix matrix = new Matrix();matrix.postRotate(180.0f); // 旋转180°matrix.postTranslate(800, 1200);bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.child);

canvas.drawBitmap(bitmap, 20, 20, null);canvas.drawBitmap(bitmap, srcRect, dstRect, paint);canvas.drawBitmap(bitmap, matrix, paint);

关于Matrix，之后的blog会再详细介绍！

---

Path

• drawPath(@NonNull Path path, @NonNull Paint paint) // 路径 + 画笔

path.moveTo(50, 100);path.lineTo(50, 300);path.lineTo(100, 500);path.lineTo(400, 500);path.lineTo(300, 300);path.lineTo(450, 50);path.lineTo(200, 200);paint.setColor(Color.BLACK);paint.setStyle(Paint.Style.STROKE);canvas.drawPath(path, paint);