自定义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);  // 恢复到保存的画布状态
目录
相关文章
|
1月前
|
XML 前端开发 JavaScript
如何使用 SVG 和 Canvas 来创建动画?
【10月更文挑战第24天】使用 SVG 和 Canvas 创建动画都有各自的特点和优势,SVG 更适合基于 XML 和 CSS 的简单动画,而 Canvas 则更适合通过 JavaScript 实现复杂的、高性能的动画效果。在实际应用中,可以根据具体的需求和场景选择合适的技术来创建动画。
44 1
|
7月前
|
XML 前端开发 数据可视化
View的绘制流程
View的绘制流程
45 1
|
7月前
|
前端开发 开发者 UED
Flutter的自定义Painter:深入探索自定义绘制Widget的技术实现
【4月更文挑战第26天】Flutter的自定义Painter允许开发者根据需求绘制独特UI,通过继承`CustomPaint`类和重写`paint`方法实现。在`paint`中使用`Canvas`绘制图形、路径等。创建自定义Painter类后,将其作为`CustomPaint` Widget的`painter`属性使用。此技术可实现自定义形状、渐变、动画等复杂效果,提升应用视觉体验。随着Flutter的进化,自定义Painter将提供更丰富的功能。
|
7月前
|
前端开发 算法 计算机视觉
用canvas消除锯齿的方式
用canvas消除锯齿的方式
310 0
|
移动开发 前端开发 JavaScript
Canvas2D基础
1. canvas内容就是上面这些了,就好比设计师能用的颜色就那么多,但是将颜色,图形组合起来,创意真的是无限的,canvas也是如此。 2. webGL是一个 对OpenGL ES 2.0浏览器实现接口,用于3D绘画,生产阶段最好不要用,可用于实验阶段。
266 0
|
人工智能 前端开发 JavaScript
canvas 中如何实现自定义路径动画
前言 大家好!!又到周末了,最近项目忙完了,有时间写文章了。之前有粉丝问我, fly哥怎么实现自定义路径动画, 当时给他说的就是路径无非不就是直线 或者曲线。也就这两种, 直线的话 可以用直线方程, 曲线的话稍微复杂点 ,需要用贝塞尔曲线去做lerp。也就是动画的每一幁的算出路径的对应的坐标就可以了。但是这套方案学习成本太高了, 有没有一种更加简单的方式呢?本篇文章大概花费你5分钟, 你可以学到什么呢 svg 的 两个无敌api 后面介绍 封装了一个自定义路径动画函数 创建Path 制作动画前,先要拿到动画的路径,对此我们可以直接使用svg的path定义规则,比如我们定义了一条较为复杂的路径
canvas 中如何实现自定义路径动画
|
Java Android开发
三句代码创建全屏Dialog或者DialogFragment:带你从源码角度实现
三句代码创建全屏Dialog或者DialogFragment:带你从源码角度实现
915 0
三句代码创建全屏Dialog或者DialogFragment:带你从源码角度实现
|
Android开发
实战-自定义ViewGroup-流动布局(FlowLayout)
安卓自定义 ViewGroup 需要注意的地方 至少需要提供 width, 和height两个属性 同样地,如果要使用自定义的属性,那么就需要创建自己的名字空间,在Android Studio中,第三方的控件都使用如下代码来引入名字空间。 xmlns:custom="http://schemas.android.com/apk/res-auto"
187 0
|
前端开发 vr&ar 容器
Flutter 115: 图解自定义 View 之 Canvas (四) drawParagraph
0 基础学习 Flutter,第一百一十五节:自定义 Canvas 第四节,文本绘制小结!
675 0
Flutter 115: 图解自定义 View 之 Canvas (四) drawParagraph
|
前端开发 Android开发 iOS开发
Flutter 35: 图解自定义 View 之 Canvas (二)
0 基础学习 Flutter,第三十五步:自定义 View 第三节~
4715 0
下一篇
DataWorks