在上一篇中,我简单的介绍用xml文件绘制图像的基础,本部分主要介绍通过Android提供的Canvas对象来实现一些常见的2D图形绘制,最后我用这个API画了一只好丑的鸡
1,Canvas获取
我们知道,Canvas就相当于我们的画布,那么画画当然第一步就是找画布了
方式一:
自定义view,在onDraw()方法中获取,比如:
public class MyView extends View{
public MyView(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
方式二:
通过Bitmap对象配合其构造方法获取,比如:
Bitmap bitmap=Bitmap.createBitmap( 700,700, Bitmap.Config.ARGB_8888);
Canvas canvas=new Canvas(bitmap);
这里的画布Canvas可以画的图形常见的有,它们都是通过canvas.drawXXX()来实现的:
- 矩形
- 圆角矩形
- 圆形
- 椭圆
- 线条
- 扇形
- 弧形
- 点
- 字体
下面我会一一进行简单介绍
2,Paint获取
同理,找到了画布,得有画笔才能画画,所以第二步是找画笔,这里面我们只需要通过其构造方法就可以获取:
Paint paint=new Paint();
当然画笔有很多种,我们这里可以通过setXXX()方法来设置画笔的属性,常用的属性有:
paint.setColor(); //颜色
paint.setAntiAlias(); //锯齿效果
paint.setStyle(); //风格
paint.setStrokeWidth(); //线条宽度
paint.setARGB(); //A,R,G,B值
paint.setAlpha(); //透明度
paint.setDither(); //抗抖动
paint.setColorFilter(); //颜色过滤器
比如:
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(3);
3,简单实践
画笔和画布都有了,下面就来画一画各种形状感受一下,我这里是通过Bitmap对象创建画布Canvas,然后将其展示到一个ImageView查看绘制效果
(1)矩形(实心和空心)
imageView=findViewById(R.id.disply_screen);
Bitmap bitmap=Bitmap.createBitmap( 600,600, Bitmap.Config.ARGB_8888);
Canvas canvas=new Canvas(bitmap);
Paint paint=new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
paint.setStrokeWidth(3);
canvas.drawRect(100,100,200,200,paint);
paint.setStyle(Paint.Style.FILL);
canvas.drawRect(300,100,400,200,paint);
imageView.setImageBitmap(bitmap);
主要接口参数释义:
canvas.drawRect(left,top,right,bottom,paint)
以paint绘制以点(left,top)与点(right,bottom)组成对角线的矩形
绘制效果:
(2)圆角矩形(实心和空心)
canvas.drawRoundRect(100,100,200,200,10,10,paint);
paint.setStyle(Paint.Style.FILL);
canvas.drawRoundRect(300,100,400,200,10,10,paint);
主要接口参数释义:
canvas.drawRoundRect(left,top,right,bottom,rx,ry,paint)
以paint绘制以点(left,top)与点(right,bottom)组成对角线且x方向角度rx,y方向角度ry的圆角矩形
绘制效果:
(3)绘制圆形(实心和空心)
canvas.drawCircle(200,200,100,paint);
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(400,200,100,paint);
主要接口参数释义:
canvas.drawCircle(x,y,r,paint)
以paint绘制以点(x,y)为圆心,r为半径的圆形
绘制效果:
(4)绘制椭圆(实心和空心)
canvas.drawOval(100,100,300,200,paint);
paint.setStyle(Paint.Style.FILL);
canvas.drawOval(400,100,600,200,paint);
主要接口参数释义:
canvas.drawOval(left,top,right,bottom,rx,ry,paint)
以paint绘制以点(left,top)与点(right,bottom)组成对角线的矩形作为该椭圆外接矩形的椭圆
绘制效果:
很简单,我们可以使用以下方法简单验证一下:
paint.setColor(Color.RED); canvas.drawRect(200, 200, 500, 400, paint); paint.setColor(Color.BLUE); canvas.drawOval(200, 200, 500, 400, paint);
绘制效果:
(5)绘制线条(单条和多条)
canvas.drawLine(300,300,400,400,paint);
paint.setColor(Color.BLUE);
//多条线
canvas.drawLines(new float[]{100,100,250,100,100,100,250,250,100,100,100,250},paint);
主要接口参数释义:
canvas.drawLine(startX,startY,endX,endY,paint)
以paint绘制起点为(startX,startY)与终点为(endX,endY)的线段
canvas.drawLines(points,paint)
以paint绘制float数组points中点信息的多条线段
绘制效果:
(6)绘制扇形和弧形
canvas.drawArc(100,100,300,300,0,120,false,paint);
canvas.drawArc(400,100,600,300,0,120,true,paint);
主要接口参数释义:
canvas.drawArc(left,top,right,bottom,startAngle,sweepAngle,userCenter,paint)
以paint绘制以点(left,top)与点(right,bottom)组成对角线的矩形作为该椭圆外接矩形的椭圆,开始角度为startAngle,扇形角度为sweepAngle的扇形,是否使用椭圆中心点(扇形和弧形的区别)取决于userCenter参数;开始角度的定义以x轴正方向为0度,沿顺时针方向旋转
绘制效果:
(7)绘制点(点太小,设置一下画笔)
float x=0;
float y=0;
Random random=new Random();
paint.setStrokeWidth(10);
for(int i=0;i<100;i++){
x=random.nextFloat()*600;
y=random.nextFloat()*600;
canvas.drawPoint(x,y,paint);
}
主要接口参数释义:
canvas.drawPoint(x,y,paint)
以paint绘制坐标为(x,y)的点
绘制效果:
(8)绘制字体
paint.setStrokeWidth(15); paint.setTextSize(50); paint.setColor(Color.BLACK); canvas.drawText("H",210,200,paint); canvas.drawText("F",340,200,paint); canvas.drawText("U",440,200,paint); canvas.drawText("T",570,200,paint); paint.setColor(Color.RED); canvas.drawText("w",300,300,paint); paint.setColor(Color.BLUE); canvas.drawText("h",400,400,paint); paint.setColor(Color.RED); canvas.drawText("y",500,300,paint);
主要接口参数释义:
canvas.drawText(text,x,y,paint)
以paint在坐标为(x,y)的点绘制text文本
绘制效果:
4,画鸡环节
说实话,这只鸡被我画的实在太丑了,我真的不想看它:
画鸡代码:
package com.hfut.operation2ddraw; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageView; /** * @author why * @date 2018-8-23 20:30:40 */ public class MainActivity extends AppCompatActivity { private static final String TAG = "MainActivity"; ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView=findViewById(R.id.disply_screen); Bitmap bitmap=Bitmap.createBitmap( 700,700, Bitmap.Config.ARGB_8888); Canvas canvas=new Canvas(bitmap); Paint paint=new Paint(); //canvas.drawLine(100,100,250,250,paint); paint.setAntiAlias(true); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(3); //绘制鸡身 canvas.drawCircle(350,350,150,paint); //绘制鸡翅膀 paint.setStyle(Paint.Style.FILL); paint.setColor(getResources().getColor(R.color.chickFur)); canvas.drawArc(295,254.639f,500,315.361f,0,240,false,paint); //绘制鸡脚 paint.setStrokeWidth(5); paint.setColor(Color.BLACK); canvas.drawLines(new float[]{350,500,270,600,350,500,430,600},paint); Path path1=new Path(); path1.moveTo(270,600); path1.lineTo(230,620); path1.lineTo(250,640); path1.lineTo(280,630); path1.lineTo(270,600); path1.lineTo(250,640); paint.setStyle(Paint.Style.STROKE); canvas.drawPath(path1,paint); Path path2=new Path(); path2.moveTo(430,600); path2.lineTo(390,620); path2.lineTo(410,640); path2.lineTo(460,620); path2.lineTo(430,600); path2.lineTo(410,640); paint.setStyle(Paint.Style.STROKE); canvas.drawPath(path2,paint); //绘制鸡头 paint.setStrokeWidth(7); paint.setColor(Color.DKGRAY); canvas.drawCircle(200,200,60,paint); //绘制鸡嘴 Path mouthPath=new Path(); mouthPath.moveTo(140,200); mouthPath.lineTo(110,200); mouthPath.lineTo(140,185); paint.setStrokeWidth(10); canvas.drawPath(mouthPath,paint); canvas.drawLine(140,200,130,220,paint); //绘制鸡眼 paint.setStrokeWidth(3); paint.setColor(Color.BLACK); paint.setStyle(Paint.Style.FILL); canvas.drawOval(240,170,200,200,paint); paint.setColor(Color.RED); canvas.drawOval(230,180,210,190,paint); paint.setColor(Color.BLACK); canvas.drawLine(200,170,240,170,paint); imageView.setImageBitmap(bitmap); } }
画鸡主要是在熟悉API的时候娱乐一下,但是确实发现了自己不适合画画。