android.graphics.Canvas
一般在自定义View中,重写 onDraw(Canvas canvas) 方法时用到。
/**
* Implement this to do your drawing.
*
* @param canvas the canvas on which the background will be drawn
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.xxx // 自己的逻辑
}
Paint 的使用
Paint 叫画笔,它决定了颜色、画笔宽度、填充效果等。
Canvas 是搭配 Paint 使用的,使用 Canvas 要先初始化 Paint 。如,
Paint paintPointRed = new Paint();
paintPointRed.setColor(Color.RED); // 设置画笔颜色
paintPointRed.setFlags(Paint.ANTI_ALIAS_FLAG); // 设置抗锯齿
paintPointRed.setStrokeWidth(5f); //设置画笔宽度
paintPointRed.setStyle(Paint.Style.STROKE);// 设置只描边,还有填充、填充且描边可选,默认填充
绘制颜色
Canvas.drawColor(int color)
:绘制颜色,参数传具体的颜色值就行。
canvas.drawColor(Color.LTGRAY); 效果就是 View 显示灰色,
绘制点
Canvas.drawPoint(float x, float y, Paint paint)
:在左边(x,y) 处绘制一个点。
Canvas.drawPoints(@Size(multiple = 2) @NonNull float[] pts, @NonNull Paint paint)
:根据数组 pts 绘制多个点。
根据传入的单个坐标或者坐标数组画点,
private Paint paintPointRed = new Paint();
private Paint paintPointGreen = new Paint();
paintPointRed.setColor(Color.RED);
paintPointRed.setFlags(Paint.ANTI_ALIAS_FLAG);
paintPointRed.setStrokeWidth(5f);
paintPointGreen.setColor(Color.GREEN);
paintPointGreen.setFlags(Paint.ANTI_ALIAS_FLAG);
paintPointGreen.setStrokeWidth(20f);
canvas.drawPoint(100,50, paintPointRed);
canvas.drawPoints(new float[]{
200,80,
220,60,
240,40,
},paintPointRed);
canvas.drawPoints(new float[]{
200,200,
300,300,
400,400,
500,500,
600,600,
},paintPointGreen);
我用的两种画笔,画笔颜色不同、宽度不同,效果对比,
从例子中可以看出,画布坐标原点(0,0) 是显示区域左上角 。
画布坐标
默认情况下,坐标原点(0,0) 是显示区域左上角。
使用 Canvas.translate(float dx, float dy)
可以修改画布的坐标原点,
例,先画了点,修改画布坐标原点后,再画同样的点,
canvas.drawPoint(100,50, paintPointRed);
canvas.drawPoints(new float[]{
200,80,
220,60,
240,40,
},paintPointRed);
canvas.drawPoints(new float[]{
200,200,
300,300,
400,400,
500,500,
600,600,
},paintPointGreen);
canvas.translate(800,0); //修改画布坐标原点
canvas.drawPoint(100,50, paintPointRed);
canvas.drawPoints(new float[]{
200,80,
220,60,
240,40,
},paintPointRed);
canvas.drawPoints(new float[]{
200,200,
300,300,
400,400,
500,500,
600,600,
},paintPointGreen);
效果如图,说明画布坐标原点已经变更了。画布坐标原点不同,显示效果不同,so ,变更画布坐标原点有风险,修改需谨慎。
绘制直线
Canvas.drawLine(float startX, float startY, float stopX, float stopY,NonNull Paint paint)
:通过两个点 (startX, startY) 、(stopX, stopY) 确定一条直线。
画笔决定线条的颜色、宽度等。
private Paint paintLine1 = new Paint();
private Paint paintLine2 = new Paint();
paintLine1.setColor(Color.RED);
paintLine1.setFlags(Paint.ANTI_ALIAS_FLAG);
paintLine2.setColor(Color.YELLOW);
paintLine2.setFlags(Paint.ANTI_ALIAS_FLAG);
paintLine2.setStrokeWidth(20f);
canvas.drawLine(100,100, 500,100, paintLine1);
canvas.drawLine(100,200, 500,400, paintLine1);
canvas.drawLine(100,500, 200,600, paintLine2);
效果,
绘制曲线
Canvas.drawPath(@NonNull Path path, @NonNull Paint paint)
:通过 Path 构建贝塞尔曲线,依据 path 画出曲线。
private Paint paintLinePath = new Paint();
paintLinePath.setColor(Color.MAGENTA);
paintLinePath.setFlags(Paint.ANTI_ALIAS_FLAG);
paintLinePath.setStrokeWidth(5f);
Path path = new Path();
path.moveTo(200,200);
path.cubicTo(200,700,800,700, 1000,300);
canvas.drawPath(path, paintLinePath);
效果,
不对啊,说是画线,怎么出来个图像,按理应该只有下面弧形才对。
不着急,这和画笔的 Style 有关,默认是填充效果 Paint.Style.FILL
,修改为描边效果 Paint.Style.STROKE
,
paintLinePath.setStyle(Paint.Style.FILL);
效果如图,nice
绘制文字
drawText(String text, float x, float y, Paint paint)
:在坐标 (x,y) 处绘制文本。
drawText(String text, int start, int end, float x, float y,Paint paint)
:在坐标 (x,y) 处绘制文本,文本只显示第 start 到第 end-1 位 。
canvas.drawText("CanvasActivity", 100 , 300, paintText);
canvas.drawText("CanvasActivity", 2,9,100 , 350, paintText);
效果,
绘制圆形
Canvas.drawCircle(float cx, float cy, float radius, Paint paint)
:以坐标 (cx,cy) 为圆心绘制半径为 radius 的圆形。
private Paint paintCircleMagenta = new Paint();
private Paint paintCircleGreen = new Paint();
paintCircleMagenta.setColor(Color.MAGENTA);
paintCircleMagenta.setFlags(Paint.ANTI_ALIAS_FLAG);
paintCircleGreen.setColor(Color.GREEN);
paintCircleGreen.setFlags(Paint.ANTI_ALIAS_FLAG);
canvas.drawCircle(100,100,50, paintCircleMagenta);
canvas.drawCircle(400,300,100, paintCircleGreen);
canvas.drawCircle(700,300,100, paintCircleGreen);
canvas.drawCircle(700,300,50, paintCircleMagenta);
canvas.drawCircle(1000,300,50, paintCircleMagenta);
canvas.drawCircle(1000,300,100, paintCircleGreen);
效果,
说明后面绘制的图像会覆盖前面绘制的。
绘制椭圆
Canvas.drawOval(RectF oval, Paint paint)
:通过 RectF 确定椭圆位置并绘制。
RectF(float left, float top, float right, float bottom)
: 初始化 RectF 时根据坐标 (left,top)、(right,bottom) 确定矩形的左上角、右下角,得到最大内切椭圆。
Canvas.drawOval(float left, float top, float right, float bottom, Paint paint)
:通过坐标确定椭圆位置并绘制。
个人理解,根据坐标得到矩形,矩形确定最大内切椭圆。
private Paint paintOval1 = new Paint();
paintOval1.setColor(Color.BLUE);
paintOval1.setFlags(Paint.ANTI_ALIAS_FLAG);
canvas.drawOval(new RectF(100,100,300,300), paintOval1);
canvas.drawOval(new RectF(400,100,800,300), paintOval1);
paintOval1.setStyle(Paint.Style.STROKE);//只描边
paintOval1.setStrokeWidth(5f);
canvas.drawOval(900,100,1100,600, paintOval1);
效果,
绘制弧形
Canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
:通过 RectF 确定弧形位置并绘制。
Canvas.drawArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean useCenter, Paint paint)
:通过坐标确定弧形位置并绘制 。
个人理解,根据坐标得到矩形,矩形确定最大内切椭圆,根据参数来截取椭圆区域得到弧形。
private Paint paintArc1 = new Paint();
paintArc1.setColor(Color.CYAN);
paintArc1.setFlags(Paint.ANTI_ALIAS_FLAG);
canvas.drawRect(100,100 ,400,300,paintRect3); // 同位置绘制矩形
canvas.drawArc(100,100,400,300,0,90,false,paintArc1);
canvas.drawRect(100,500 ,400,700,paintRect3);// 同位置绘制矩形
canvas.drawArc(new RectF(100,500,400,700),270,-90,true,paintArc1);
在同位置先绘制了矩形,方便对比,
效果
以 canvas.drawArc(new RectF(100,500,400,700),270,-90,true,paintArc1); 为例说明参数
- 矩形左上角坐标是(100,500) ,右下角坐标是 (400,700) ,从而得到了最大内切椭圆。
- startAngle :开始点相对比 0° 的角度,顺时针方向(绿色箭头方向)为正方向,所以是 270°。
- sweepAngle :开始点旋转的角度,逆时针方向(蓝色箭头方向)为负方向,所以是 -90° 。
- useCenter :如果设为 true ,则包含椭圆中心,即弧形区域是 起点终点间的弧线 + 起点和椭圆中心的直线 + 终点和椭圆中心的直线 围起来的区域。为 false ,弧形区域是 起点终点间的弧线 + 起点到终点的直线 围起来的区域。
绘制矩形
Canvas.drawRect(@NonNull RectF rect, @NonNull Paint paint)
:通过 RectF 确定矩形位置并绘制。
RectF(float left, float top, float right, float bottom)
: 初始化 RectF 时根据坐标 (left,top)、(right,bottom) 确定矩形的左上角、右下角。
private Paint paintCircleGreen = new Paint();
private Paint paintRectMagenta = new Paint();
paintRectMagenta.setColor(Color.MAGENTA);
paintRectMagenta.setFlags(Paint.ANTI_ALIAS_FLAG);
paintRectGreen.setColor(Color.GREEN);
paintRectGreen.setFlags(Paint.ANTI_ALIAS_FLAG);
canvas.drawRect(new RectF(100,100,500,300), paintRectMagenta);
canvas.drawRect(new RectF(500,300,700,500), paintRectGreen);
paintRectGreen.setStyle(Paint.Style.STROKE);// 只描边
paintRectGreen.setStrokeWidth(5f);
canvas.drawRect(new RectF(800,300,1000,500), paintRectGreen);
效果,
绘制圆角矩形
Canvas.drawRoundRect(RectF rect, float rx, float ry, @NonNull Paint paint)
:通过 RectF 确定圆角矩形位置并绘制。
Canvas.drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)
: 通过坐标确定圆角矩形位置并绘制,rx 、ry 决定圆角的弧度。
private Paint paintRoundRect = new Paint();
paintRoundRect.setColor(Color.MAGENTA);
paintRoundRect.setFlags(Paint.ANTI_ALIAS_FLAG);
canvas.drawRoundRect(new RectF(100,100,300,300), 10,10,paintRoundRect);
canvas.drawRoundRect(new RectF(500,100,700,300), 50,50,paintRoundRect);
canvas.drawRoundRect(new RectF(100,400,400,600), 10,10,paintRoundRect);
canvas.drawRoundRect(new RectF(500,400,800,600), 100,100,paintRoundRect);
paintRoundRect.setStyle(Paint.Style.STROKE);// 只描边
paintRoundRect.setStrokeWidth(5f);
canvas.drawRoundRect(new RectF(900,100,1100,300), 10 ,10, paintRoundRect);
canvas.drawRoundRect(new RectF(900,400,1200,600), 100 ,100, paintRoundRect);
效果,