canvas drawable 绘制图片时钟

文章目录

• 1、功能介绍
• 2、文件结构
• 3、xml 文件
• 4、MainActivity.java文件

• 5、自定义的view 文件

1、功能介绍

1）通过 实例化 drawable 资源图片对象
2）调用 canvas 进行 图片的 绘制 和刷新

上图指针分别是 三个 图片

2、文件结构

3、xml 文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/lay_id"
    tools:context=".MainActivity">


    <com.example.ubuntu.mycanvasdraw.MyView
        android:id="@+id/myView_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

4、MainActivity.java文件

package com.example.ubuntu.mycanvasdraw;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Window;
import android.view.WindowManager;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        requestWindowFeature(Window.FEATURE_NO_TITLE); //去掉标题栏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN); //设置全屏
        setContentView(R.layout.activity_main);

    
    }
}

5、自定义的view 文件

package com.example.ubuntu.mycanvasdraw;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import java.util.Calendar;

public class MyView extends View {

    private String TAG  = "MyView: ";
    private final  int NEED_INVALIDATE = 100;

    private Drawable drawableHourPoint;  //时针 drawable 对象
    private Drawable drawableMinutePoint;
    private Drawable drawableSecondPoint;

    private Calendar mcalendar; //获取时间
    private int hourWide = 36; //时针 的 宽度
    private int hourHigh = 251; //时针 的 高度


    private int minuteWide = 32;  //分钟的宽度
    private int minuteHigh = 361; //分钟的高度


    private int secondWide = 16;  //秒针的宽度
    private int secondHigh = 324; //秒针的高度


    public MyView(Context context) {
        super(context);
    }



    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setWillNotDraw(false);
    }

    public MyView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        mcalendar=Calendar.getInstance();//获取时间对象

        drawHourPoint(canvas);
        drawaMinutePoint(canvas);
        drawaSecondPoint(canvas);
        handler.sendEmptyMessage(NEED_INVALIDATE);
    }


    //画秒针
    private void drawaSecondPoint(Canvas canvas) {
        if (drawableSecondPoint == null) {
            drawableSecondPoint = getResources().getDrawable(R.drawable.secondpoint);
            //drawableSecondPoint = Drawable.createFromPath("path"); 或者通过路径 从别的地方获取
            drawableSecondPoint.setBounds(((getWidth() - secondWide )/2)  , (getHeight()/2) - secondHigh ,
                    ((getWidth() + secondWide)/2) ,(getHeight()/2) );  //显示的 区域
        }

        int second=mcalendar.get(Calendar.SECOND);


        float senconddegree = (second/60f*360)  ;   //秒针旋转的角度
        Log.i(TAG," second： "  + second +
                "秒针 旋转 的角度： " + senconddegree);
        canvas.save();
        canvas.rotate(senconddegree , getWidth() / 2, getHeight() / 2);
        drawableSecondPoint.draw(canvas);

        canvas.restore();
    }

    //画分针
    private void drawaMinutePoint(Canvas canvas) {
        if (drawableMinutePoint == null) {
            drawableMinutePoint = getResources().getDrawable(R.drawable.minutepoint);
            drawableMinutePoint.setBounds(((getWidth() - minuteWide )/2)  , (getHeight()/2) - minuteHigh ,
                    ((getWidth() + minuteWide)/2),(getHeight()/2) );  //显示的 区域
        }

        int minute= mcalendar.get(Calendar.MINUTE);
        float minudegrees=  (minute/60f*360)  ;  //分针旋转的角度

        Log.i(TAG," minute： "  + minute +
                "时针 旋转 的角度： " + minudegrees);
        canvas.save();
        canvas.rotate(minudegrees , getWidth() / 2, getHeight() / 2);
        drawableMinutePoint.draw(canvas);

        canvas.restore();
    }


    //画时针
    private void drawHourPoint(Canvas canvas) {
        if (drawableHourPoint == null) {
            drawableHourPoint = getResources().getDrawable(R.drawable.hourpoint);
            drawableHourPoint.setBounds(((getWidth() - hourWide )/2)   , (getHeight()/2) - hourHigh  ,
                    ((getWidth() + hourWide)/2),(getHeight()/2));  //显示的 区域
        }

        int hour= mcalendar.get(Calendar.HOUR);
        int minute= mcalendar.get(Calendar.MINUTE);
        int second=mcalendar.get(Calendar.SECOND);

        if (hour > 12) {
            hour = hour - 12 ;
        }

        float hourdregrees=  (hour/12f*360) + (minute/60f*30) ;  //时针旋转的角度

        Log.i(TAG,"hour minute second +：" + hour+ ": " + minute + ": " + second +
                "时针 旋转 的角度： " + hourdregrees);
        canvas.save();
        canvas.rotate(hourdregrees, getWidth() / 2, getHeight() / 2);
        drawableHourPoint.draw(canvas);

        canvas.restore();

    }



    public Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case NEED_INVALIDATE :
                    //重新绘制界面
                    invalidate();//告诉UI主线程重新绘制
                    handler.sendEmptyMessageDelayed(NEED_INVALIDATE, 1000); //再次发送消息，递归调用，
                    break;
                default:
                    break;
            }
        }

    };


}