Android中使用Canvas绘制简单的图形(二) 进阶 绘制钟表

基础绘制 请阅读 http://blog.csdn.net/daweibalang717/article/details/51776446

通过上文可以学会简单的图形绘制，我们来进行一个钟表的绘制。

效果图：

布局文件：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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: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="com.example.myapplication.MainActivity">    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/imageView"        android:layout_centerInParent="true"        android:layout_marginTop="55dp" /></RelativeLayout>

Java 文件：

 package com.example.myapplication;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Typeface;import android.os.AsyncTask;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.widget.ImageView;import java.util.Calendar;public class MainActivity extends AppCompatActivity {    private ImageView mClockImageView;    private int width = 600;    private int height = 600;    private Calendar mCanlendar;    //时分秒    private int mHours,mMinue,mSecond;    private boolean isRun;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mClockImageView = (ImageView) findViewById(R.id.imageView);        isRun = true;        MyClockTask task = new MyClockTask();        task.execute();    }    //AsyncTask 类 可参考博客：http://blog.csdn.net/Kaiwii/article/details/21541499    private class MyClockTask extends AsyncTask<Object,Bitmap,Object>{        @Override        protected Object doInBackground(Object[] objects) {            while (isRun){                //一秒钟重绘一次指针                publishProgress(getDrawClockPointer());                try {                    Thread.sleep(1000);                } catch (InterruptedException e) {                    e.printStackTrace();                }            }            return null;        }        @Override        protected void onProgressUpdate(Bitmap... values) {            super.onProgressUpdate(values);            //每次重绘的内容更新到 ImageView 上；            mClockImageView.setImageBitmap(values[0]);        }    }    //画指针    private Bitmap getDrawClockPointer(){        Bitmap bm = getDrawClockDial();        Canvas canvas = new Canvas(bm);        Paint paint = new Paint();        paint.setAntiAlias(true);        paint.setColor(Color.BLACK);        mCanlendar = Calendar.getInstance();        mHours = mCanlendar.get(Calendar.HOUR);        mMinue = mCanlendar.get(Calendar.MINUTE);        mSecond = mCanlendar.get(Calendar.SECOND);        canvas.save();        //画时针（参考表盘如何画数字的）,一小时30度，再加上分钟的度数（60分钟，时针偏转30度），每分钟时针偏转 mMinue*(30.0f/60.0f)，        float degreesH = mHours*30 + mMinue*(30.0f/60.0f);        //基于圆心旋转        canvas.rotate(degreesH,width / 2,height / 2);        //时针的风格        paint.setColor(Color.RED);        paint.setStrokeWidth(6);        //时针的长         float lengthH = (height/2)*0.4f;        //时针 : 第四个参数的解释：因为半径是 height/2 或 width/2，线是从圆心开始的，所以结束的Y坐标是：height - height/2 - length        canvas.drawLine(width / 2,height / 2,width / 2,height - height/2 - lengthH,paint);        canvas.restore();        canvas.save();        //画分针 每分钟 6度 在加上秒针的度数（60秒钟 偏转6度），那么每秒钟 分钟偏转的度数  mSecond*(6.0f/60.0f);        float degreesM = mMinue*6 + mSecond*(6.0f/60.0f);        //基于圆心旋转        canvas.rotate(degreesM,width / 2,height / 2);        //分针的风格        paint.setColor(Color.GREEN);        paint.setStrokeWidth(4);        //分针的长        float lengthM = (height/2)*0.6f;        //分针 : 第四个参数的解释：因为半径是 height/2 或 width/2，线是从圆心开始的，所以结束的Y坐标是：height - height/2 - length        canvas.drawLine(width / 2,height / 2,width / 2,height - height/2 - lengthM,paint);        canvas.restore();        canvas.save();        //画秒针 每秒 6度        float degreesS = mSecond*6;        //基于圆心旋转        canvas.rotate(degreesS,width / 2,height / 2);        //秒针的风格        paint.setColor(Color.BLUE);        paint.setStrokeWidth(2);        //秒针的长        float lengthS = (height/2)*0.8f;        //秒针 : 第四个参数的解释：因为半径是 height/2 或 width/2，线是从圆心开始的，所以结束的Y坐标是：height - height/2 - length        canvas.drawLine(width / 2,height / 2,width / 2,height - height/2 - lengthS,paint);        canvas.restore();        return bm;    }    //画表盘    private Bitmap getDrawClockDial() {        //创建Bitmap        Bitmap bm = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);        //创建画布        Canvas canvas = new Canvas(bm);        //创建画笔        Paint paint = new Paint();        //空心        paint.setStyle(Paint.Style.STROKE);        //颜色        paint.setColor(Color.BLACK);        //宽度        paint.setStrokeWidth(6);        //抗锯齿        paint.setAntiAlias(true);        //画一个圆，前两个参数是中心点，第三个是半径，第四个是画笔        //注：因为圆圈的宽度为20，所以我们在计算的时候要把宽度给算进来        canvas.drawCircle(width / 2, height / 2, (width - 6) / 2, paint);        //在圆的中间画一个点 (圆点)        paint.setStyle(Paint.Style.FILL);        canvas.drawCircle(width / 2, height / 2, 4, paint);        /**         * 方便理解：画布是个虚拟的感念，可理解为即坐标系，而我们要画的内容是画在bitmap上的。         *         * 现在要画刻度了，我们要怎么画呢，我们想象一个圈360度，总共12个小时         * 一个小时就是：360/12 = 30；         * 思路：我们先保存画布的状态 canvas.save();         * for循环中，我们把坐标系旋转30度，然后写上 1 ，         * 然后再30度，写上2 ...等旋转360度的时候写上 12         * 这时候画布正好转了一圈，但是，注意，注意：         * 我们调用了canvas.restore(); 就是把坐标系回到开始保存的状态，         * 开始的状态的意思是：（坐标系是 x 左到右横向，Y是从上到下），我们旋转了360度把数字都给写上了，         * 而且写完后 （坐标系是 x 左到右横向，Y是从上到下，因为我们旋转了360度），         * 但是我们毕竟旋转了360度。也就是说现在坐标系的状态         * 是360度，canvas.restore()就是把这状态转回0度，         * 当然了，你不调用canvas.save(); canvas.restore(); 也是可以的，毕竟是旋转了360度，我这里说这个其实         * 就是为了说明这两个方法。还有旋转的概念，旋转的其实是坐标系（之前我对这点特别迷惑，认为画的东西就在画布上）         * 参考博客：http://blog.csdn.net/dinko321/article/details/7679019         * */        //先保存现在画布的状态，打个比方说就是 现在记录现在画布的方向，那头朝上，那头朝下啊的什么的。        canvas.save();        //这个画笔用来画  3 、6、9、12 加粗        Paint textPaint = new Paint();        textPaint.setColor(Color.BLACK);        textPaint.setTextSize(25);        textPaint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));        textPaint.setTextAlign(Paint.Align.CENTER);        for (int i = 1; i <= 12; i++) {            //旋转30度 后两个参数是基于那个点旋转，这里是圆心            canvas.rotate(30, width / 2, height / 2);            // 3 、6、9、12 加粗            if (i % 3 == 0) {                //Y 值我是估计写的 关于这个函数可以看：http://blog.csdn.net/sirnuo/article/details/21165665                canvas.drawText(String.valueOf(i), width / 2, (20 + 6) * 2, textPaint);            } else {                paint.setTextSize(20);                paint.setTextAlign(Paint.Align.CENTER);                canvas.drawText(String.valueOf(i), width / 2, (20 + 6) * 2, paint);            }        }        canvas.restore();        return bm;    }    @Override    protected void onResume() {        super.onResume();        isRun = true;    }    @Override    protected void onPause() {        super.onPause();        isRun = false;    }    @Override    protected void onDestroy() {        super.onDestroy();    }}

本代码总结于学习视频，是用于备忘。函数参数说明都在代码注释中。