自定义view基础 | 青训营笔记

Tylerthecreator
235 阅读4分钟

自定义view基础 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天

Canvas.drawXXX() 和 Paint 基础

用drawXXX() 系列方法和 Paint 的基础应付简单的绘制需求，他们主要包括：

  1. Canvas 类下的所有 draw- 打头的方法，例如 drawCircle()

drawBitmap() 。

  1. Paint 类的几个最常用的方法。具体是：

    • Paint.setStyle(Style style) 设置绘制模式
    • Paint.setColor(int color) 设置颜色
    • Paint.setStrokeWidth(float width) 设置线条宽度
    • Paint.setTextSize(float textSize) 设置文字大小
    • Paint.setAntiAlias(boolean aa) 设置抗锯齿开关

Canvas.drawColor(@ColorInt int color) 颜色填充

这是最基本的 drawXXX() 方法：在整个绘制区域统一涂上指定的颜色。

例如 drawColor(Color.BLACK) 会把整个区域染成纯黑色，覆盖掉原有内容；

drawColor(Color.parse("#88880000") 会在原有的绘制效果上加一层半透明的

红色遮罩。

类似的方法还有 drawRGB(int r, int g, int b) 和 drawARGB(int a, int r, int g, int b) ，

它们和 drawColor(color) 只是使 用方式不同，作用都是一样的。

drawCircle(oat centerX, oat centerY, oat radius, Paint paint) 画圆

前两个参数 centerX centerY 是圆心的坐标，第三个参数 radius 是圆的半径， 单位都是像素，它们共同构成了这个圆的基本信息

第四个参数 paint 提供基本信息之外 的所有风格信息，例如颜色、线条粗细、阴影等。

坐标系：

image.png 要画一个红色的圆：

paint.setColor(Color.RED); // 设置为红色
canvas.drawCircle(300, 300, 200, paint);

画空心圆使用 paint.setStyle(Paint.Style.STROKE) 来把绘制模式改为画线模式。

paint.setStyle(Paint.Style.STROKE); // Style 修改为画线模式
canvas.drawCircle(300, 300, 200, paint);

setStyle(Style style) 这个方法设置的是绘制的 Style 。Style 具体来说有三 种： FILL , STROKE 和 FILL_AND_STROKE 。FILL 是填充模式，STROKE 是画线模 式（即勾边模式），FILL_AND_STROKE 是两种模式一并使用：既画线又填充。它的 默认值是 FILL ，填充模式。****

在 STROKE 和 FILL_AND_STROKE 下，还可以使用 paint.setStrokeWidth(float width) 来设置线条的宽度：

paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(20); // 线条宽度为 20 像素
canvas.drawCircle(300, 300, 200, paint); 
​

开抗锯齿

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

drawRect(oat left, oat top, oat right, oat bottom, Paint paint) 画矩形

left , top , right , bottom 是矩形四条边的坐标。

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

drawPoint(oat x, oat y, Paint paint) 画点

x 和 y 是点的坐标。点的大小可以通过 paint.setStrokeWidth(width) 来设 置；点的形状可以通过 paint.setStrokeCap(cap) 来设置：ROUND 画出来是圆形 的点， SQUARE 或 BUTT 画出来是方形的点。

drawPoints(oat[] pts, int offset, int count, Paint paint) / drawPoints(oat[] pts, Paint paint) 画点（批量）

同样是画点，它和 drawPoint() 的区别是可以画多个点。pts 这个数组是点的坐 标，每两个成一对；offset 表示跳过数组的前几个数再开始记坐标；count 表示 一共要绘制几个点。

drawOval(oat left, oat top, oat right, oat bottom, Paint paint) 画椭圆

left , top , right , bottom 是这个椭圆的左、上、右、下四个边界点的坐标。

drawLine(oat startX, oat startY, oat stopX, oat stopY, Paint paint) 画线

startX , startY , stopX , stopY 分别是线的起点和终点坐标

drawLines(oat[] pts, int offset, int count, Paint paint) / drawLines(oat[] pts, Paint paint) 画线（批量）

drawRoundRect(oat left, oat top, oat right, oat bottom, oat rx, oat ry, Paint paint) 画圆角矩形

left , top , right , bottom 是四条边的坐标，rx 和 ry 是圆角的横向半径和纵向 半径

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

drawArc() 是使用一个椭圆来描述弧形的。left , top , right , bottom 描述的是 这个弧形所在的椭圆；startAngle 是弧形的起始角度（x 轴的正向，即正右的方 向，是 0 度的位置；顺时针为正角度，逆时针为负角度），sweepAngle 是弧形划 过的角度；useCenter 表示是否连接到圆心，如果不连接到圆心，就是弧形，如果 连接到圆心，就是扇形

drawPath(Path path, Paint paint) 画自定义图 形

drawPath(path) 这个方法是通过描述路径的方式来绘制图形的，它的 path 参数 就是用来描述图形路径的对象。path 的类型是 Path ，使用方法大概像下面这 样：

public class PathView extends View {
 Paint paint = new Paint();
 Path path = new Path(); // 初始化 Path 对象
 ......
 {
 // 使用 path 对图形进行描述（这段描述代码不必看懂）
 path.addArc(200, 200, 400, 400, -225, 225);
 path.arcTo(400, 200, 600, 400, -180, 225, false);
 path.lineTo(400, 542);
 }
 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 canvas.drawPath(path, paint); // 绘制出 path 描述的图形（心形），大
 }
}

quadTo(oat x1, oat y1, oat x2, oat y2) / rQuadTo(oat dx1, oat dy1, oat dx2, oat dy2) 画二次贝塞尔曲线

这条二次贝塞尔曲线的起点就是当前位置，而参数中的 x1 , y1 和 x2 , y2 则分别 是控制点和终点的坐标。和 rLineTo(x, y) 同 理，rQuadTo(dx1, dy1, dx2, dy2) 的参数也是相对坐标

moveTo(oat x, oat y) / rMoveTo(oat x, oat y) 移动到目标位置

用于设置起点

close() 封闭当前子图形

\

avatar
文章
阅读
粉丝