Android 图形：绘制渐变色奥运五环图形，游戏文字，验证码，Matrix旋转，缩放，倾斜，平移等
16lz
2021-01-23
概述：
主要是涉及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>
更多相关文章
- Android多媒体开发 Pro Android Media 第一章 Android图像编程入
- Android图像处理之色彩特效处理(学习笔记)
- 【Android 内存优化】Bitmap 图像尺寸缩小 ( 考虑像素密度、针对
- Android图像处理技术（实现Android中的PS）（五）
- 初学Android,图形图像之打砖块游戏(二十八)
- Android 获取屏幕截图 和保存到本地的sd卡路径下
- Windows下，Android Studio项目路径中包含中文字符无法编译的问题
- Android图像处理（一）色调、饱和度、亮度
- android--------根据文件路径加载指定文件