Android Canvas API 详细说明与示例

1. 基本图形绘制

1.1 画直线

方法签名：

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

参数说明：

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

示例：

@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 画矩形

方法签名：

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

参数说明：

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

示例：

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 画圆角矩形

方法签名：

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

参数说明：

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

示例：

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 画圆形

方法签名：

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

参数说明：

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

示例：

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类绘制

示例：

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 绘制贝塞尔曲线

二次贝塞尔曲线：

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

三次贝塞尔曲线：

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

示例：

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 基本文字绘制

方法签名：

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

参数说明：

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

示例：

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 测量文字宽度

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

4. 位图绘制

4.1 基本位图绘制

方法签名：

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

示例：

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

4.2 缩放绘制位图

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 平移

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

5.2 旋转

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

5.3 缩放

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 创建图层

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来实现复杂的绘制效果。