Android 图形：绘制渐变色奥运五环图形，游戏文字，验证码，Matrix旋转，缩放，倾斜，平移等

概述：

主要是涉及Android “图形图像技术”的基础知识

0.绘制以渐变色填充的矩形

1.绘制奥运五环

2.绘制游戏对白界面

3.绘制路径及绕路径文字

4.绘制Android的机器人

5.绘制彩色字符串

6.绘制一个随机数字组成的验证码

7.使用 Matrix 旋转 图像

8.使用 Matrix 缩放 图像

9.使用 Matrix 倾斜 图像

10.使用 Matrix 旋转后平移 图像

源码下载：

https://github.com/zhuanghongji/GraphicsSummaryZhj

效果图：

java代码：

MainActivity：

public class MainActivity extends AppCompatActivity {

FrameLayout mFrameLayout;
private Button mBtn0, mBtn1, mBtn2, mBtn3;
private Button mBtn4, mBtn5, mBtn6, mBtn7;
private Button mBtn8, mBtn9, mBtn10;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(sav<strong>edInstanceState);
setContentView(R.layout.activity_main);
</strong>
initViews();
initEvents();
}

/**
* 初始化所有按钮（10个）的事件
*/
private void initEvents() {
mBtn0.setOnClickListener(new MyOnClickListener());
mBtn1.setOnClickListener(new MyOnClickListener());
mBtn2.setOnClickListener(new MyOnClickListener());
mBtn3.setOnClickListener(new MyOnClickListener());
mBtn4.setOnClickListener(new MyOnClickListener());
mBtn5.setOnClickListener(new MyOnClickListener());
mBtn6.setOnClickListener(new MyOnClickListener());
mBtn7.setOnClickListener(new MyOnClickListener());
mBtn8.setOnClickListener(new MyOnClickListener());
mBtn9.setOnClickListener(new MyOnClickListener());
mBtn10.setOnClickListener(new MyOnClickListener());
}

/**
* 初始化所有控件（10个）
*/
private void initViews() {
mFrameLayout = (FrameLayout) findViewById(R.id.frameLayout0);

mBtn0 = (Button) findViewById(R.id.btn0);
mBtn1 = (Button) findViewById(R.id.btn1);
mBtn2 = (Button) findViewById(R.id.btn2);
mBtn3 = (Button) findViewById(R.id.btn3);
mBtn4 = (Button) findViewById(R.id.btn4);
mBtn5 = (Button) findViewById(R.id.btn5);
mBtn6 = (Button) findViewById(R.id.btn6);
mBtn7 = (Button) findViewById(R.id.btn7);
mBtn8 = (Button) findViewById(R.id.btn8);
mBtn9 = (Button) findViewById(R.id.btn9);
mBtn10 = (Button) findViewById(R.id.btn10);
}

/**
* 处理按钮点击事件
*/
private class MyOnClickListener implements View.OnClickListener {
@Override
public void onClick(View v) {
mFrameLayout.removeAllViewsInLayout();  //移除mframeLayout中所有的view
switch (v.getId()) {
case R.id.btn0:
mFrameLayout.addView(new MyView(MainActivity.this,0));
break;
case R.id.btn1:
mFrameLayout.addView(new MyView(MainActivity.this,1));
break;
case R.id.btn2:
mFrameLayout.addView(new MyView(MainActivity.this,2));
break;
case R.id.btn3:
mFrameLayout.addView(new MyView(MainActivity.this,3));
break;
case R.id.btn4:
mFrameLayout.addView(new MyView(MainActivity.this,4));
break;
case R.id.btn5:
mFrameLayout.addView(new MyView(MainActivity.this,5));
break;
case R.id.btn6:
mFrameLayout.addView(new MyView(MainActivity.this,6));
break;
case R.id.btn7:
mFrameLayout.addView(new MyView(MainActivity.this,7));
break;
case R.id.btn8:
mFrameLayout.addView(new MyView(MainActivity.this,8));
break;
case R.id.btn9:
mFrameLayout.addView(new MyView(MainActivity.this,9));
break;
case R.id.btn10:
mFrameLayout.addView(new MyView(MainActivity.this,10));
break;
}
}
}

/**
* 通常情况下，要在Android中绘图，需要创建一个继承自View类的视图
* 并且在该类中重写它的onDraw(Canvas canvas)方法，然后在显示绘
* 图的Activity中添加该视图
*/
public class MyView extends View {

int drawType;

public MyView(Context context,int drawType) {
super(context);
this.drawType = drawType;
}

@Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();      //定义一个默认的画笔
//            canvas.drawColor(Color.WHITE);  //绘制画布为白色
switch (drawType) {
case 0:     //绘制以渐变色填充的矩形
drawJianBianJuXing(paint,canvas);
break;
case 1:     //绘制奥运五环
drawAoYunWuHuan(paint, canvas);
break;
case 2:     //绘制一个游戏对白界面
drawGameView(paint, canvas);
break;
case 3:     //绘制路径及绕路径文字
drawPathText(paint, canvas);
break;
case 4:     //绘制Android的机器人
drawAndroidMan(paint, canvas);
break;
case 5:     //绘制彩色字符串
drawColorfulString(paint, canvas);
break;
case 6:     //绘制一个随机数字组成的验证码
drawRadomNumberVerify(paint, canvas);
break;
case 7:     //使用 Matrix 旋转 图像
drawRotate(paint, canvas);
break;
case 8:     //使用 Matrix 缩放 图像
drawScale(paint, canvas);
break;
case 9:     //使用 Matrix 倾斜 图像
drawSkew(paint, canvas);
break;
case 10:     //使用 Matrix 旋转后平移 图像
drawRotateTranslate(paint,canvas);
break;
}

super.onDraw(canvas);
}
}

/**
* 0.绘制以渐变色填充的矩形
*/
public void drawJianBianJuXing(Paint paint,Canvas canvas) {
//线性渐变
Shader shader=new LinearGradient(0, 0, 50, 50, Color.RED, Color.GREEN, Shader.TileMode.MIRROR);
paint.setShader(shader);    //为画笔设置渐变器
canvas.drawRect(10, 70, 100, 150, paint);    //绘制矩形
//径向渐变
shader=new RadialGradient(160, 110, 50, Color.RED, Color.GREEN, Shader.TileMode.MIRROR);
paint.setShader(shader);    //为画笔设置渐变器
canvas.drawCircle(160, 110, 50, paint);
//角度渐变
shader=new SweepGradient(265,110,new int[]{Color.RED,Color.GREEN,Color.BLUE},null);
paint.setShader(shader);
canvas.drawRect(220, 70, 310, 150, paint);  //绘制矩形
}

/**
* 1.绘制奥运五环
*/
public void drawAoYunWuHuan(Paint paint,Canvas canvas) {
paint.setAntiAlias(true);        //使用抗锯齿功能
paint.setStrokeWidth(3);        //设置笔触的宽度
paint.setStyle(Style.STROKE);    //设置填充样式为描边

paint.setColor(Color.BLUE);
canvas.drawCircle(50, 50, 30, paint);    //绘制蓝色的圆形

paint.setColor(Color.YELLOW);
canvas.drawCircle(100, 50, 30, paint);    //绘制黄色的圆形

paint.setColor(Color.BLACK);
canvas.drawCircle(150, 50, 30, paint);    //绘制黑色的圆形

paint.setColor(Color.GREEN);
canvas.drawCircle(75, 90, 30, paint);    //绘制绿色的圆形

paint.setColor(Color.RED);
canvas.drawCircle(125, 90, 30, paint);    //绘制红色的圆形
}
/**
* 2.绘制一个游戏对白界面
* 在Android中虽然可以用TextView或图片显示文本
* 但是在开发游戏时，会包含很多文字，使用TextView和图片显示文本不太合适
* 这时候，需要通过绘制文本的方式来实现。
*/
public void drawGameView(Paint paint,Canvas canvas) {
paint.setColor(Color.BLACK);        //设置画笔颜色
paint.setTextAlign(Paint.Align.LEFT);    //设置文字左对齐
paint.setTextSize(16);        //设置文字大小
paint.setAntiAlias(true);    //使用抗锯齿功能
canvas.drawText("不，我不想去！", 20, 90, paint);    //通过drawText()方法绘制文字
float[] pos= new float[]{20,20,
45,20,
70,20,
95,20,
120,20,
145,20,
170,20,
195,20,
220,20,
245,20,
270,20};    //定义代表文字位置的数组
// 通过drawPosText()方法绘制文字,pose用于指定每一个字符的位置
// 但官方现在已经不推荐使用该方法！！
canvas.drawPosText("你想和我一起去探险吗？", pos, paint);
}
/**
* 3.绘制路径及绕路径文字
*/
public void drawPathText(Paint paint,Canvas canvas) {
paint.setAntiAlias(true);    //设置使用抗锯齿功能
paint.setColor(0xFFFF6600);    //设置画笔颜色
paint.setTextSize(18);    //设置文字大小
paint.setStyle(Style.STROKE);    //设置填充方式为描边
//绘制圆形路径
Path pathCircle=new Path();//创建并实例化一个path对象
pathCircle.addCircle(70, 70, 40, Path.Direction.CCW);    //添加逆时针的圆形路径
canvas.drawPath(pathCircle, paint);    //绘制路径
//绘制折线路径
Path pathLine=new Path();        //创建并实例化一个Path对象
pathLine.moveTo(150, 100);        //设置起始点
pathLine.lineTo(200, 45);        //设置第一段直线的结束点
pathLine.lineTo(250, 100);        //设置第二段直线的结束点
pathLine.lineTo(300, 80);        //设置第3段直线的结束点
canvas.drawPath(pathLine, paint);    //绘制路径
//绘制三角形路径
Path pathTr=new Path();    //创建并实例化一个path对象
pathTr.moveTo(70,300);    //设置起始点
pathTr.lineTo(120, 270);    //设置第一条边的结束点，也是第二条边的起始点
pathTr.lineTo(170, 300);    //设置第二条边的结束点，也是第3条边的起始点
pathTr.close();            //闭合路径
canvas.drawPath(pathTr, paint);    //绘制路径
//绘制绕路径的环形文字
String str="风萧萧兮易水寒，壮士一去兮不复还";
Path path=new Path();        //创建并实例化一个path对象
path.addCircle(200, 200, 48, Path.Direction.CW);        //添加顺时针的圆形路径
paint.setStyle(Paint.Style.FILL);//设置画笔的填充方式
canvas.drawTextOnPath(str, path,0, -18, paint);    //绘制绕路径文字
}
/**
* 4.绘制Android的机器人
*/
public void drawAndroidMan(Paint paint,Canvas canvas) {
paint.setAntiAlias(true);    //使用抗锯齿功能
paint.setColor(0xFFA4C739);    //设置画笔的颜色为绿色
//绘制机器人的头
RectF rectf_head=new RectF(10, 10, 100, 100);
rectf_head.offset(100, 20);
canvas.drawArc(rectf_head, -10, -160, false, paint);    //绘制弧
//绘制眼睛
paint.setColor(Color.WHITE);    //设置画笔的颜色为白色
canvas.drawCircle(135, 53, 4, paint);    //绘制圆
canvas.drawCircle(175, 53, 4, paint);    //绘制圆
paint.setColor(0xFFA4C739);    //设置画笔的颜色为绿色
//绘制天线
paint.setStrokeWidth(2);    //设置笔触的宽度
canvas.drawLine(120, 15, 135, 35, paint);    //绘制线
canvas.drawLine(190, 15, 175, 35, paint);    //绘制线
//绘制身体
canvas.drawRect(110, 75, 200, 150, paint);    //绘制矩形
RectF rectf_body=new RectF(110,140,200,160);
canvas.drawRoundRect(rectf_body, 10, 10, paint);    //绘制圆角矩形
//绘制胳膊
RectF rectf_arm=new RectF(85,75,105,140);
canvas.drawRoundRect(rectf_arm, 10, 10, paint);    //绘制左侧的胳膊
rectf_arm.offset(120, 0);                            //设置在X轴上偏移120像素
canvas.drawRoundRect(rectf_arm, 10, 10, paint);    //绘制右侧的胳膊
//绘制腿
RectF rectf_leg=new RectF(125,150,145,200);
canvas.drawRoundRect(rectf_leg, 10, 10, paint);    //绘制左侧的腿
rectf_leg.offset(40, 0);                            //设置在X轴上偏移40像素
canvas.drawRoundRect(rectf_leg, 10, 10, paint);    //绘制右侧的腿
}

/**
* 5.绘制彩色字符串
*/
public void drawColorfulString(Paint paint,Canvas canvas) {
paint.setColor(0xFFFF6600);        //设置画笔颜色
paint.setTextAlign(Paint.Align.LEFT);    //设置文字左对齐
paint.setTextSize(30);        //设置文字大小
paint.setAntiAlias(true);    //使用抗锯齿功能
String text="梅花香自苦寒来";
int[] colors = {0xFFFF6600 ,0xFF00FFEA, Color.RED, Color.GREEN, Color.BLUE,Color.YELLOW ,0xFFC600FF};    // 创建颜色数组
for (int i = 0; i < text.length(); i++) {
paint.setColor(colors[i % 7]);                                     // 选择颜色
canvas.drawText(text.charAt(i) + "", 45 + i * 45, 60,paint);                 // 绘制文本信息
}
}
/**
* 6.绘制一个随机数字组成的验证码
*/
public void drawRadomNumberVerify(Paint paint,Canvas canvas) {
paint.setColor(Color.RED);
Random r =new Random(new java.util.Date().getTime()+1);
String str=String.valueOf(r.nextInt());
canvas.drawText(str, 50, 50, paint);
}

/**
* 7.使用 Matrix 旋转 图像
*/
public void drawRotate(Paint paint,Canvas canvas) {
paint.setAntiAlias(true);
Bitmap bitmap_rabbit=BitmapFactory.decodeResource(MainActivity.this.getResources(), R.drawable.rabbit);
canvas.drawBitmap(bitmap_rabbit, 0, 0, paint);        // 绘制原图
//应用setRotate(float degrees)方法旋转图像
Matrix matrix=new Matrix();
matrix.setRotate(30);                        // 以（0,0）点为轴心转换30度
canvas.drawBitmap(bitmap_rabbit, matrix, paint);    // 绘制图像并应用matrix的变换
//应用setRotate(float degrees, float px, float py)方法旋转图像
Matrix m=new Matrix();
m.setRotate(90,87,87);                        // 以（87,87）点为轴心转换90度
canvas.drawBitmap(bitmap_rabbit, m, paint);        // 绘制图像并应用matrix的变换
}

/**
* 8.使用 Matrix 缩放 图像
*/
public void drawScale(Paint paint,Canvas canvas) {
paint.setAntiAlias(true);
Bitmap bitmap_rabbit=BitmapFactory.decodeResource(MainActivity.this.getResources(), R.drawable.rabbit);
//应用setScale(float sx, float sy)方法缩放图像
Matrix matrix=new Matrix();
matrix.setScale(2f, 2f);                        // 以（0,0）点为轴心将图像在X轴和Y轴均缩放200%
canvas.drawBitmap(bitmap_rabbit, matrix, paint);    // 绘制图像并应用matrix的变换
//            应用setScale(float sx, float sy, float px, float py) 方法缩放图像
Matrix m=new Matrix();
m.setScale(0.8f,0.8f,156,156);                        // 以（156,156）点为轴心将图像在X轴和Y轴均缩放80%
canvas.drawBitmap(bitmap_rabbit, m, paint);        // 绘制图像并应用matrix的变换
canvas.drawBitmap(bitmap_rabbit, 0, 0, paint);        // 绘制原图
}

/**
* 9.使用 Matrix 倾斜 图像
*/
public void drawSkew(Paint paint,Canvas canvas) {
paint.setAntiAlias(true);
Bitmap bitmap_rabbit=BitmapFactory.decodeResource(MainActivity.this.getResources(), R.drawable.rabbit);
//应用setSkew(float sx, float sy)方法倾斜图像
Matrix matrix=new Matrix();
matrix.setSkew(2f, 1f);            // 以（0,0）点为轴心将图像在X轴上倾斜2，在Y轴上倾斜1
canvas.drawBitmap(bitmap_rabbit, matrix, paint);    // 绘制图像并应用matrix的变换
//应用setSkew(float sx, float sy, float px, float py) 方法倾斜图像
Matrix m=new Matrix();
m.setSkew(-0.5f, 0f,78,69);            // 以（78,69）点为轴心将图像在X轴上倾斜-0.5
canvas.drawBitmap(bitmap_rabbit, m, paint);        // 绘制图像并应用matrix的变换
canvas.drawBitmap(bitmap_rabbit, 0, 0, paint);        // 绘制原图
}

/**
* 10.使用 Matrix 旋转后平移 图像
*/
public void drawRotateTranslate(Paint paint,Canvas canvas) {
paint.setAntiAlias(true);    //使用抗锯齿功能
Bitmap bitmap_rabbit=BitmapFactory.decodeResource(MainActivity.this.getResources(), R.drawable.rabbit);
canvas.drawBitmap(bitmap_rabbit, 0, 0, paint);        // 绘制原图
Matrix matrix=new Matrix();                // 创建一个Matrix的对象
matrix.setRotate(30);                    // 将matrix旋转30度
matrix.postTranslate(100,50);            // 将matrix平移到（100,50）的位置
canvas.drawBitmap(bitmap_rabbit, matrix, paint);    // 绘制图像并应用matrix的变换
}

}

布局代码：

activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<FrameLayout
android:id="@+id/frameLayout0"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ffffff"
></FrameLayout>

<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>

<Button
android:id="@+id/btn0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="0.绘制以渐变色填充的矩形"/>

<Button
android:id="@+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="1.绘制奥运五环"/>

<Button
android:id="@+id/btn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="2.绘制游戏对白界面"/>

<Button
android:id="@+id/btn3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="3.绘制路径及绕路径文字"/>

<Button
android:id="@+id/btn4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="4.绘制Android的机器人"/>

<Button
android:id="@+id/btn5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="5.绘制彩色字符串"/>

<Button
android:id="@+id/btn6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="6.绘制一个随机数字组成的验证码"/>

<Button
android:id="@+id/btn7"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="7.使用 Matrix 旋转 图像"/>

<Button
android:id="@+id/btn8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="8.使用 Matrix 缩放 图像"/>

<Button
android:id="@+id/btn9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="9.使用 Matrix 倾斜 图像"/>

<Button
android:id="@+id/btn10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:text="10.使用 Matrix 旋转后平移 图像"/>

</LinearLayout>
</ScrollView>
</LinearLayout>