在上一篇中,我简单的介绍用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的时候娱乐一下,但是确实发现了自己不适合画画。
注:欢迎扫码关注