Android Canvas API 详细说明与示例

1. 基本图形绘制

1.1 画直线

方法签名：

java 复制代码

void drawLine(float startX, float startY, float stopX, float stopY, Paint paint)

参数说明：

startX, startY: 直线起点坐标
stopX, stopY: 直线终点坐标
paint: 画笔对象，控制线条颜色、粗细等属性

示例：

java 复制代码

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    
    Paint paint = new Paint();
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5);  // 设置线宽为5像素
    paint.setAntiAlias(true); // 开启抗锯齿
    
    // 从(50,50)到(250,250)画一条红色直线
    canvas.drawLine(50, 50, 250, 250, paint);
}

1.2 画矩形

方法签名：

java 复制代码

void drawRect(float left, float top, float right, float bottom, Paint paint)

参数说明：

left, top: 矩形左上角坐标
right, bottom: 矩形右下角坐标

示例：

java 复制代码

Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStyle(Paint.Style.FILL); // 填充模式
paint.setStrokeWidth(3);

// 画一个填充的蓝色矩形
canvas.drawRect(100, 100, 300, 300, paint);

// 改为描边模式
paint.setStyle(Paint.Style.STROKE); 
paint.setColor(Color.GREEN);

// 画一个绿色边框的矩形
canvas.drawRect(150, 150, 350, 350, paint);

1.3 画圆角矩形

方法签名：

java 复制代码

void drawRoundRect(RectF rect, float rx, float ry, Paint paint)

参数说明：

rect: 矩形区域
rx: x方向的圆角半径
ry: y方向的圆角半径

示例：

java 复制代码

Paint paint = new Paint();
paint.setColor(Color.MAGENTA);
paint.setStyle(Paint.Style.FILL_AND_STROKE);

RectF rect = new RectF(100, 100, 400, 300);

// 画一个圆角矩形，x方向圆角20，y方向圆角30
canvas.drawRoundRect(rect, 20, 30, paint);

1.4 画圆形

方法签名：

java 复制代码

void drawCircle(float cx, float cy, float radius, Paint paint)

参数说明：

cx, cy: 圆心坐标
radius: 半径

示例：

java 复制代码

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

// 在(200,200)处画一个半径100的黄色实心圆
canvas.drawCircle(200, 200, 100, paint);

paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(5);

// 在同一个位置画一个黑色边框圆
canvas.drawCircle(200, 200, 100, paint);

1.5 画三角形

实现方式 ：

使用Path类绘制

示例：

java 复制代码

Paint paint = new Paint();
paint.setColor(Color.CYAN);
paint.setStyle(Paint.Style.FILL);

Path path = new Path();
path.moveTo(200, 100);    // 顶点
path.lineTo(100, 300);    // 左下角
path.lineTo(300, 300);    // 右下角
path.close();             // 闭合路径

canvas.drawPath(path, paint);

2. 路径绘制(Path)

2.1 绘制贝塞尔曲线

二次贝塞尔曲线：

java 复制代码

path.quadTo(float x1, float y1, float x2, float y2)

三次贝塞尔曲线：

java 复制代码

path.cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)

示例：

java 复制代码

Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(5);

// 二次贝塞尔曲线
Path quadPath = new Path();
quadPath.moveTo(100, 500);
quadPath.quadTo(200, 300, 300, 500);
canvas.drawPath(quadPath, paint);

// 三次贝塞尔曲线
Path cubicPath = new Path();
cubicPath.moveTo(400, 500);
cubicPath.cubicTo(450, 400, 550, 600, 600, 500);
canvas.drawPath(cubicPath, paint);

3. 文字绘制

3.1 基本文字绘制

方法签名：

java 复制代码

void drawText(String text, float x, float y, Paint paint)

参数说明：

x, y: 文字基线(baseline)的起始位置

示例：

java 复制代码

Paint textPaint = new Paint();
textPaint.setColor(Color.BLACK);
textPaint.setTextSize(50);  // 设置文字大小为50px
textPaint.setAntiAlias(true);

// 在(100,100)处绘制文字
canvas.drawText("Hello Canvas", 100, 100, textPaint);

3.2 测量文字宽度

java 复制代码

float textWidth = paint.measureText("Hello");

4. 位图绘制

4.1 基本位图绘制

方法签名：

java 复制代码

void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

示例：

java 复制代码

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.my_image);
canvas.drawBitmap(bitmap, 100, 100, null);

4.2 缩放绘制位图

java 复制代码

Rect src = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
RectF dst = new RectF(100, 100, 400, 400);
canvas.drawBitmap(bitmap, src, dst, null);

5. 变换操作

5.1 平移

java 复制代码

canvas.save();  // 保存当前状态
canvas.translate(100, 100);  // 向右下平移100px
// 在这里绘制的内容都会应用这个平移
canvas.drawRect(0, 0, 200, 200, paint);  // 实际在(100,100)-(300,300)绘制
canvas.restore();  // 恢复之前的状态

5.2 旋转

java 复制代码

canvas.save();
canvas.rotate(45, 200, 200);  // 以(200,200)为中心旋转45度
canvas.drawRect(150, 150, 250, 250, paint);
canvas.restore();

5.3 缩放

java 复制代码

canvas.save();
canvas.scale(0.5f, 0.5f, 200, 200);  // 以(200,200)为中心缩小为原来的一半
canvas.drawRect(100, 100, 300, 300, paint);  // 实际绘制为(150,150)-(250,250)
canvas.restore();

6. 图层操作

6.1 创建图层

java 复制代码

int layerId = canvas.saveLayer(0, 0, width, height, paint, Canvas.ALL_SAVE_FLAG);
// 在这里绘制的内容会在独立图层上
canvas.drawRect(100, 100, 300, 300, paint);
canvas.restoreToCount(layerId);  // 合并图层

掌握这些API的使用方法和参数含义，可以让你在自定义View时更加得心应手。实际开发中，通常需要组合使用这些API来实现复杂的绘制效果。