Android 自定义View之Canvas详解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mengks1987/article/details/77743993

自定义View的相关文章:

drawPoint(float x, float y, Paint paint):在(x,y)处绘制点

x,y:x,y坐标

drawPoints(float[] pts, Paint paint):绘制一系列点

pts:多个(x,y)集合

drawPoints(float[] pts, int offset, int count, Paint paint)

pts:多个(x,y)集合
offset:pts从offset处开始绘制
count:从offset处开始取count个点绘制

canvas.drawPoint(100,100,mPaint);

canvas.drawPoints(new float[]{100,200,130,200,150,200,170,200,190,200},mPaint);

canvas.drawPoints(new float[]{100,300,130,300,150,300,170,300,190,300},2,4,mPaint);

效果图:
这里写图片描述

线

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

startX,startY:开始点的(x,y)坐标
stopX, stopY:结束点的(x,y)坐标

drawLines(float[] pts, Paint paint)

4个点确定一条线

drawLines(float[] pts, int offset, int count, Paint paint)

同Points截取一段点作为线点坐标,4个一组

canvas.drawLine(100,100,200,100,mPaint);

canvas.drawLines(new float[]{100,200,200,200,300,200,400,200},mPaint);

canvas.drawLines(new float[]{100,200,200,200,300,300,400,300},4,4,mPaint);

效果图:
这里写图片描述

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

cx,cy:圆形坐标
radius:半径

canvas.drawCircle(100,100,50,mPaint);

效果图:
这里写图片描述

矩形

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

这里写图片描述

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)

rx:x方向的圆角半径
ry:y方向的圆角半径
其他同drawRect

canvas.drawRoundRect(100,100,300,300,30,30,mPaint);

效果图:
这里写图片描述

文字

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

在(x,y)坐标处绘制文字,注意 mPaint.setTextAlign(Paint.Align.CENTER); 设置不同的align效果不同。还有其他几个重载方法,是对text的截取。

drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint):在路径上绘制文字

hOffset:水平偏移
vOffset:垂直偏移

Path path = new Path();
path.moveTo(100,200);
path.lineTo(200,100);
path.lineTo(300,200);
canvas.drawPath(path,mPaint);
canvas.drawTextOnPath("ABCDEFGHIGKLMN",path,0,0,mPaint);

效果图:
这里写图片描述

Path

drawPath(Path path, Paint paint):绘制路径、贝塞尔曲线等

Path详解

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint):在矩形区域内绘制弧

oval:矩形区域
startAngle:开始角度
sweepAngle:旋转角度
useCenter:是否和中心连线

canvas.drawArc(100,100,300,300,0,270,true,mPaint);

效果图:
这里写图片描述

椭圆

drawOval(RectF oval, Paint paint):在矩形区域内画椭圆

canvas.drawOval(new RectF(100,100,400,200),mPaint);

效果图:
这里写图片描述

Bitmap

drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

Matrix 详解

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

距离左和顶部等距离。

drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)

src:图片绘制区域
dst:画布绘制区域

看这段代码:

canvas.drawBitmap(bitmap,new Rect(0,0,bitmap.getWidth()/2,getHeight()/2),new Rect(getWidth()/2,getHeight()/2,getWidth(),getHeight()),mPaint);

代码的意思是将图的左上角4分之一绘制在屏幕的右下角。
这里写图片描述

用这个方法可以实现炫酷的效果,比如人走路的效果,如果没有此方法,可能需要数十张图片播放,使用此方法可以整合成一张图片,维护成本大大降低,后面我们实现一个类似的效果。

猜你喜欢

转载自blog.csdn.net/mengks1987/article/details/77743993