自定义View绘制基础之Canvas

简介: 自定义View绘制基础之Canvas

画布Canvas

  Canvas(画布)是一个用于绘制图形的重要类,它提供了一组绘图操作的方法,允许你在屏幕上绘制各种形状、图像和文本。下面是Canvas类的主要函数:



一、绘制图形和图像

1.drawColor

功能:用指定的颜色填充整个画布

原型:

public void drawColor(@ColorInt int color)

参数:

  • color:要填充的颜色

示例:

drawColor(Color.BLACK);  // 纯黑
drawColor(Color.parse("#88880000"); // 半透明红色

2.drawCircle

功能:在画布上绘制一个圆形。

原型:

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

参数:

  • cx:圆心的横坐标。
  • cy:圆心的纵坐标。
  • radius:圆的半径。
  • paint:用于指定绘制效果的画笔

示例:

Paint paint = new Paint();
paint.setColor(Color.RED); 
canvas.drawCircle(300, 300, 100, paint);

3.drawRect

功能:在画布上绘制一个矩形。

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

参数:

  • left:矩形左上角的横坐标。
  • top:矩形左上角的纵坐标。
  • right:矩形右下角的横坐标。
  • bottom:矩形右下角的纵坐标。
  • paint:用于指定绘制效果的画笔。

示例:

Paint paint = new Paint();
paint.setColor(Color.GREEN);
canvas.drawRect(100, 100, 400, 300, paint);

4.drawLine

功能:在画布上绘制一条直线。

原型:

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

参数:

  • startX:起点的横坐标。
  • startY:起点的纵坐标。
  • stopX:终点的横坐标。
  • stopY:终点的纵坐标。
  • paint:用于指定绘制效果的画笔。

示例:

Paint paint = new Paint();
paint.setColor(Color.BLACK);
canvas.drawLine(50, 50, 200, 200, paint);

5.drawText

功能: 在画布上绘制文本。

原型:

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

参数:

  • text:要绘制的文本。
  • x:文本起始点的横坐标。
  • y:文本起始点的纵坐标。
  • paint:用于指定绘制效果的画笔。

示例:

Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setTextSize(30);
canvas.drawText("Hello, Canvas!", 50, 50, paint);

5.drawBitmap

功能: 在画布上绘制位图。

原型:

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

参数解释:

  • bitmap:要绘制的位图。
  • left:位图左上角的横坐标。
  • top:位图左上角的纵坐标。
  • paint:用于指定绘制效果的画笔。

示例:

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

二、绘制路径

1.drawPath

功能:在画布上绘制指定的路径。

原型:

public void drawPath(Path path, @NonNull Paint paint)

参数:

  • path:要绘制的路径。
  • paint:用于指定绘制效果的画笔。

示例:

Paint paint = new Paint();
paint.setColor(Color.RED);
Path path = new Path();
path.moveTo(100, 100);
path.lineTo(300, 100);
path.lineTo(200, 300);
path.close();
canvas.drawPath(path, paint);

三、绘制几何图形

1.drawArc

功能:在画布上绘制一个弧形。

原型:

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

参数解释:

  • oval:包围弧形的矩形。
  • startAngle:弧形起始角度,以 x 轴正方向为 0 度。
  • sweepAngle:弧形扫过的角度。
  • useCenter:是否连接到圆心形成一个扇形。
  • paint:用于指定绘制效果的画笔。

示例:

Paint paint = new Paint();
paint.setColor(Color.GREEN);
RectF oval = new RectF(100, 100, 300, 300);
canvas.drawArc(oval, 45, 90, true, paint);

2.drawOval`

功能: 在画布上绘制一个椭圆。

原型:

public void drawOval(RectF oval, Paint paint)

参数:

  • oval:包围椭圆的矩形。
  • paint:用于指定绘制效果的画笔。

示例:

Paint paint = new Paint();
paint.setColor(Color.BLUE);
RectF oval = new RectF(100, 100, 300, 200);
canvas.drawOval(oval, paint);

四、裁剪

1.clipRect

功能:设置画布的裁剪区域为矩形。

原型:

public boolean clipRect(Rect rect)

参数:

  • rect:裁剪的矩形区域。

示例:

Rect rect = new Rect(50, 50, 200, 200);
canvas.clipRect(rect);

2.clipPath

功能:设置画布的裁剪区域为路径。

原型:

public boolean clipPath(Path path)

参数:

  • path:裁剪的路径。

示例:

Path path = new Path();
// 添加路径操作,例如 moveTo、lineTo
canvas.clipPath(path);

五、几何变换

1.translate

功能:平移画布。

原型:

public void translate(float dx, float dy)

参数:

  • dx:水平方向上的平移距离。
  • dy:垂直方向上的平移距离。

示例:

canvas.translate(100, 50);  // 将画布在水平方向上平移 100,垂直方向上平移 50

2.scale

功能: 缩放画布。

原型:

public void scale(float sx, float sy)

参数:

  • sx:水平方向上的缩放比例。
  • sy:垂直方向上的缩放比例。

示例:

canvas.scale(1.5f, 2.0f);  // 将画布在水平方向上放大 1.5 倍,垂直方向上放大 2 倍

3.rotate

功能: 旋转画布。

原型:

public void rotate(float degrees)

参数:

  • degrees:旋转的角度。

示例:

canvas.rotate(45);  // 将画布顺时针旋转 45 度

4.skew

功能 斜切(错切)画布。

原型:

void skew(float sx, float sy)

参数解释:

  • sx:水平方向上的错切因子。
  • sy:垂直方向上的错切因子。

示例:

canvas.skew(0.2f, 0);  // 在水平方向上进行横向错切

5.concat

功能: 使用矩阵进行多种变换。

原型:

void concat(Matrix matrix)

参数解释:

  • matrix:变换矩阵。

示例:

Matrix matrix = new Matrix();
matrix.postTranslate(100, 50);  // 平移
matrix.postRotate(45);  // 旋转
canvas.concat(matrix);  // 应用变换矩阵

六、保存和恢复画布

1.save()和restore()

功能: 保存和恢复画布的状态,包括平移、缩放、旋转等变换。

原型:

int save()
void restore()

无参数。

示例:

int saveCount = canvas.save();  // 保存当前画布状态
// 在这里进行绘制和变换操作
canvas.restoreToCount(saveCount);  // 恢复到保存的画布状态
目录
相关文章
|
前端开发
canvas生成自定义大小图片
canvas生成自定义大小图片
|
定位技术 API
基于Leaflet.draw的自定义绘制实战
本文介绍了如何基于leaflet.draw进行自定义绘制,同时获取对象的bbox和geojson信息。
798 0
基于Leaflet.draw的自定义绘制实战
|
14天前
|
XML 前端开发 JavaScript
如何使用 SVG 和 Canvas 来创建动画?
【10月更文挑战第24天】使用 SVG 和 Canvas 创建动画都有各自的特点和优势,SVG 更适合基于 XML 和 CSS 的简单动画,而 Canvas 则更适合通过 JavaScript 实现复杂的、高性能的动画效果。在实际应用中,可以根据具体的需求和场景选择合适的技术来创建动画。
36 1
|
4月前
|
前端开发 JavaScript 流计算
canvas系列教程05 ——交互、动画
canvas系列教程05 ——交互、动画
23 0
|
6月前
|
XML 前端开发 数据可视化
View的绘制流程
View的绘制流程
41 1
|
6月前
|
前端开发 算法 计算机视觉
用canvas消除锯齿的方式
用canvas消除锯齿的方式
246 0
|
6月前
|
前端开发
|
人工智能 前端开发 JavaScript
canvas 中如何实现自定义路径动画
前言 大家好!!又到周末了,最近项目忙完了,有时间写文章了。之前有粉丝问我, fly哥怎么实现自定义路径动画, 当时给他说的就是路径无非不就是直线 或者曲线。也就这两种, 直线的话 可以用直线方程, 曲线的话稍微复杂点 ,需要用贝塞尔曲线去做lerp。也就是动画的每一幁的算出路径的对应的坐标就可以了。但是这套方案学习成本太高了, 有没有一种更加简单的方式呢?本篇文章大概花费你5分钟, 你可以学到什么呢 svg 的 两个无敌api 后面介绍 封装了一个自定义路径动画函数 创建Path 制作动画前,先要拿到动画的路径,对此我们可以直接使用svg的path定义规则,比如我们定义了一条较为复杂的路径
canvas 中如何实现自定义路径动画
|
Web App开发 移动开发 前端开发
H5:画布Canvas基础知识讲解(一)之canvas基础、2D context API、路径
H5:画布Canvas基础知识讲解(一)之canvas基础、2D context API、路径
|
API Android开发
【Android 内存优化】自定义组件长图组件 ( 长图滚动区域解码 | 手势识别 GestureDetector | 滑动计算类 Scroller | 代码示例 )
【Android 内存优化】自定义组件长图组件 ( 长图滚动区域解码 | 手势识别 GestureDetector | 滑动计算类 Scroller | 代码示例 )
155 0
【Android 内存优化】自定义组件长图组件 ( 长图滚动区域解码 | 手势识别 GestureDetector | 滑动计算类 Scroller | 代码示例 )