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

相关推荐
_祝你今天愉快33 分钟前
Android FrameWork - Zygote 启动流程分析
android
龙之叶2 小时前
Android系统模块编译调试与Ninja使用指南
android
源码哥_博纳软云3 小时前
JAVA国际版多商户运营版商城系统源码多商户社交电商系统源码支持Android+IOS+H5
android·java·ios·微信·微信小程序·小程序·uni-app
用户2018792831673 小时前
bindService是如何完成binder传递的?
android
洞见不一样的自己3 小时前
Android 小知识点
android
tangweiguo030519875 小时前
Flutter性能优化完全指南:构建流畅应用的实用策略
android·flutter
AI大法师11 小时前
Android应用性能监测与调优:掌握Profiler和LeakCanary等关键工具
android
2501_9151063216 小时前
iOS混淆工具实战 金融支付类 App 的安全防护与合规落地
android·ios·小程序·https·uni-app·iphone·webview
alexhilton17 小时前
运行时着色器实战:实现元球(Metaballs)动效
android·kotlin·android jetpack
從南走到北18 小时前
JAVA国际版东郊到家同城按摩服务美容美发私教到店服务系统源码支持Android+IOS+H5
android·java·开发语言·ios·微信·微信小程序·小程序