手记

Android 画布Canvas

潇湘沐
2018-10-05 21:28:20浏览 3021

写完 Android 画笔Paint，自然少不了Canvas画布，本文延续上篇风格，一一来过Canvas API

drawARGB


1
void drawARGB (int a,int r,int g,int b)


统一颜色绘制，四个参数取值范围0~255

drawArc


1
2
3
4
5
void drawArc (RectF oval,
                float startAngle,
                float sweepAngle,
                boolean useCenter,
                Paint paint)


绘制弧面或弧线。对于绘制对应图形的填充面，还是图形的轮廓线，这在于画笔Paint中的setStyle。
oval：矩形；
startAngle：起点角度，0度的角度对应于0度的几何角（在手表3点钟）；
sweepAngle：顺时针扫过的角度；
useCenter：弧面或弧线；
paint：画笔

弧面

1
2
RectF rectF = new RectF(100f, 100f, 500f, 500f);
canvas.drawArc(rectF, 0, 150, true, mPaint);

弧线

1
2
RectF rectF = new RectF(100f, 100f, 500f, 500f);
canvas.drawArc(rectF, 0, 150, false, mPaint);


drawBitmap

绘制使用指定的矩阵的位图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//方法1
void drawBitmap (Bitmap bitmap,
                float left,
                float top,
                Paint paint)
//方法2
void drawBitmap (Bitmap bitmap,
                Rect src,
                Rect dst,
                Paint paint)
//方法3
void drawBitmap (Bitmap bitmap,
                Matrix matrix,
                Paint paint)

例子代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.logo);
canvas.drawBitmap(mBitmap, 0, 0, mPaint);
//绘制Bitmap的一部分，并对其拉伸
//srcRect绘制Bitmap的哪一部分
Rect src = new Rect(0, 0, mBitmap.getWidth(), mBitmap.getHeight() / 3);
//dstRecF绘制的Bitmap拉伸到哪里
RectF dst = new RectF(0, mBitmap.getHeight(), canvas.getWidth(), mBitmap.getHeight() + 200);
canvas.drawBitmap(mBitmap, src, dst, mPaint);
Matrix matrix = new Matrix();
matrix.postTranslate(0, mBitmap.getHeight() + 200);
canvas.drawBitmap(mBitmap, matrix, mPaint);


drawBitmapMesh


1
2
3
4
5
6
7
8
void drawBitmapMesh (Bitmap bitmap,
                int meshWidth,
                int meshHeight,
                float[] verts,
                int vertOffset,
                int[] colors,
                int colorOffset,
                Paint paint)


绘制网格顶点被均匀地分布在该位图
bitmap：位图
meshWidth：横向上把该源位图划成成多少格
meshHeight：竖向上把该源位图划成成多少格
verts：长度为(meshWidth + 1) (meshHeight + 1) 2的数组，它记录了扭曲后的位图各顶点位置
vertOffset：控制verts数组中从第几个数组元素开始才对bitmap进行扭曲
colors：可以为null，指定在每个顶点，其值由对应的位图颜色相乘内插的颜色。如果不为空，必须有至少（meshWidth+ 1）*（meshHeight+ 1）+ colorOffset数组中的值。
colorOffset int: Number of color elements to skip before drawing
paint：画笔，可以为null

效果参考博客 Android Canvas的drawBitmapMesh实现扭曲图像

drawCircle


1
2
3
4
void drawCircle (float cx,
                float cy,
                float radius,
                Paint paint)


绘制圆
cx，cy代表圆心的坐标
radius圆的半径
paint画笔

1
canvas.drawCircle(500f, 500f, 200, mPaint);


drawColor


1
void drawColor (int color)


设置画布颜色

drawLine


1
2
3
4
5
6
7
8
9
10
11
void drawLine (float startX,
                float startY,
                float stopX,
                float stopY,
                Paint paint)
void drawLines (float[] pts,
                Paint paint)
void drawLines (float[] pts,
                int offset,
                int count,
                Paint paint)


画线
方法1
startX，startY起点坐标
stopX，stopY终点坐标
paint画笔

方法2
pts：绘制直线的端点数组，每条直线占用4个数据，即起终点坐标。
paint：绘制直线所使用的画笔。

方法2
pts：绘制直线的端点数组，每条直线占用4个数据，即起终点坐标。
offset：跳过的数据个数，取值为4的倍数。
count：实际参与绘制的数据个数。
paint：绘制直线所使用的画笔。


1
canvas.drawLine(100f,100f,500f,500f,mPaint);


1
2
3
4
5
float[] pts = {100f, 100f, 400f, 400f,
                400f, 400f, 250f, 560f,
                250f, 560f, 400f, 800f,
                400f, 800f, 280f, 880f};
canvas.drawLines(pts, mPaint);


1
2
3
4
5
6
float[] pts = {100f, 100f, 400f, 400f,
                400f, 400f, 250f, 560f,
                250f, 560f, 400f, 800f,
                400f, 800f, 280f, 880f};
//有选择地绘制直线
canvas.drawLines(pts, 4, 8, mPaint);

跳过前4个数据，绘制后面8的数据，即绘制了第二第三个点：

drawOval


1
void drawOval (RectF oval,Paint paint)


绘制椭圆

1
2
3
4
RectF rectF = new RectF(100f, 100f, 600f, 500f);
//等同于圆的效果
//RectF rectF = new RectF(100f, 100f, 500f, 500f);
canvas.drawOval(rectF, mPaint);


drawPath


1
void drawPath (Path path,Paint paint)


例子

1
2
3
4
5
Path path = new Path();
//向Path中加入Arc
RectF arcRecF = new RectF(0, 0, 500, 500);
path.addArc(arcRecF, 0, 135);
canvas.drawPath(path, mPaint);

更多Path（宝藏，可继续挖掘），详见博客android绘图之Path总结

drawPoint


1
2
3
void drawPoint (float x,
                float y,
                Paint paint)


绘制点，x，y分别是点坐标

1
2
3
4
5
6
void drawPoints (float[] pts,
                int offset,
                int count,
                Paint paint)
void drawPoints (float[] pts,
                Paint paint)

drawPoints与drawLines类似

drawRGB


1
2
3
void drawRGB (int r,
                int g,
                int b)


RGB绘制画布颜色，取值也是0~255

drawRect


1
2
3
4
5
void drawRect (float left,
                float top,
                float right,
                float bottom,
                Paint paint)


绘制矩形，前四个参数分别表示矩形的左，顶，右，低


1
2
void drawRect (Rect r,Paint paint)
void drawRect (RectF rect,Paint paint)


Rect 和 RectF区别是Rect初始化 是int，RectF 是left


1
canvas.drawRect(100f,100f,500f,500f,mPaint);

drawRoundRect


1
2
3
4
void drawRoundRect (RectF rect,
                float rx,
                float ry,
                Paint paint)


绘制圆矩形
rx：圆角x方向的半径
ry：圆角y方向的半径


1
2
RectF rectF = new RectF(100f, 100f, 500f, 500f);
canvas.drawRoundRect(rectF, 50, 150, mPaint);


drawText


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
void drawText (CharSequence text,
                int start,
                int end,
                float x,
                float y,
                Paint paint)
void drawText (String text,
                float x,
                float y,
                Paint paint)
void drawText (String text,
                int start,
                int end,
                float x,
                float y,
                Paint paint)


绘制文本
start：指的文本从哪个开始；end：文本结束的位置；x，y：文本起点

1
2
3
4
mPaint.setTextSize(50);
String text = "我的微信公众号：吴小龙同学";
canvas.drawText(text, 2, text.length(), 100, 100, mPaint)
canvas.drawText("我的微信公众号：吴小龙同学", 100, 400, mPaint);


drawTextOnPath


1
2
3
4
5
6
7
8
9
10
11
12
void drawTextOnPath (String text,
                Path path,
                float hOffset,
                float vOffset,
                Paint paint)
void drawTextOnPath (char[] text,
                int index,
                int count,
                Path path,
                float hOffset,
                float vOffset,
                Paint paint)


沿着Path绘制一段文字
hOffset : 与路径起始点的水平偏移距离
vOffset : 与路径中心的垂直偏移量


1
2
3
4
5
6
7
8
Path path = new Path();
//Path.Direction.CW，沿外环；Path.Direction.CCW，沿内环
path.addCircle(500, 500, 200, Path.Direction.CW);
mPaint.setTextSize(50);
// 绘制路径
canvas.drawPath(path, mPaint);
String text = "我的微信公众号：吴小龙同学";
canvas.drawTextOnPath(text, path, 0f, 0f, mPaint);


drawVertices


1
2
3
4
5
6
7
8
9
10
11
12
void drawVertices (Canvas.VertexMode mode,
                int vertexCount,
                float[] verts,
                int vertOffset,
                float[] texs,
                int texOffset,
                int[] colors,
                int colorOffset,
                short[] indices,
                int indexOffset,
                int indexCount,
                Paint paint)


绘制顶点数组

原文链接：http://www.apkbus.com/blog-705730-61589.html

相关标签
Android
0人推荐
随时随地看视频
慕课网APP

相关阅读

Android 画笔Paint
Textview水平指定方向循环滚动
Flutter 布局（一）- Container详解
OpenGL 学习系列---坐标系统