自定义View之点 线 面以及绘制一个综合应用时钟

            本来前天应该整理的了，但是临时有任务给耽搁了，不过今天回过头来发现好多注意点都忘了，还是记录一下吧。

            canvas绘制点，绘制线，绘制各种图形，其实这个可以说是最简单的了，也没有什么具体可以讲的，方法的参数含义基本上都可以理解，这里只说一点：圆弧或者扇形是的绘制如何确定。圆弧的绘制是这样的，他是将一个矩形(之所以不是正方形是因为也可以是椭圆的一部分)的内切圆的一部分截取出来的。那问题就是矩形如何确定呢？这里举个例子：例如所需扇形的半径为100，圆心坐标为(200,200),那么所需矩形的左上角坐标就为(100,100),右下角坐标为(300,300)，我想规律已经出来了，没错就是这么算的，矩形的左上角坐标x=centerX-r,y=centerY-r ，矩形右下角坐标为 x=centerX+r   y=centerY+r 。这个自己敲一下代码就看出来了。。。。其他方法，没什么好说的，自己敲一下代码就理解了，不多说了也，我把我的代码复制下来，里面也有注意的地方。

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.YELLOW);
        canvas.drawPoint(50,50,mPaint);
        //实心圆  圆心坐标x y  半径 r  画笔
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(100, 100, 80, mPaint);

        //绘制圆弧(实心)  这里注意如何确定参数中第一个矩形的坐标如何确定，(centerX-r,centerY-r,centerX+r,centerY+r)  开始的角度 -90度为我们理解的0度方向   转过的角度  是否连接圆心
         RectF oval = new RectF(0, 200, 200, 400);
//        canvas.drawArc(oval,-90,90,false,mPaint);//圆弧
        canvas.drawArc(oval, -90, 90, true, mPaint);//扇形

        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(3);
        RectF ov = new RectF(0, 350, 200, 550);
//        canvas.drawArc(ov,-90,90,true,mPaint);//扇形
        canvas.drawArc(ov, -90, 90, false, mPaint);//弧线

        //椭圆
        canvas.drawOval(0, 650, 200, 800, mPaint);
        //矩形
        Rect rect = new Rect(0, 850, 200, 1050);
        canvas.drawRect(rect, mPaint);
        //圆角矩形
        canvas.drawRoundRect(250, 10, 450, 210, 15, 15, mPaint);
        // 按照path写文字
        mPaint.setTextSize(DensityUtils.sp2px(getContext(), 16));
        mPaint.setStrokeWidth(1);
        mPaint.setStyle(Paint.Style.FILL);
        String te = "abcdefsgeg";
        Path pa = new Path();
        pa.addArc(300, 500, 900, 1000, -180, 120);
        canvas.drawTextOnPath(te, pa, 0, 0, mPaint);

        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(3);
        Path p = new Path();
        p.moveTo(500, 800);
        p.quadTo(650, 850, 450, 1150);//赛贝尔曲线
//        p.cubicTo(100,200,200,500,6200,850);//两个控制点的赛贝尔曲线  http://www.cnblogs.com/lenve/p/5865874.html
        canvas.drawPath(p, mPaint);

补充：看来确实是过了两天忘了很多东西，有两个重要的知识忘了记录了

1.绘制线，必须要说Paint中与线有关的参数，因为很重要，很重要

       //绘制线的一些设置
        mPaint.setStrokeCap(Paint.Cap.SQUARE);//Paint.Cap.BUTT  无延伸效果，是多大就多大   Paint.Cap.ROUND 延伸为圆角   Paint.Cap.SQUARE 延伸为矩形
        mPaint.setStrokeJoin(Paint.Join.ROUND);//设置连接处效果 Paint.Join.BEVEL  有倒角，为直线倒角   Paint.Join.MITER  没有倒角  Paint.Join.ROUND 圆形倒角  详见：http://blog.csdn.net/abcdef314159/article/details/51720686
        mPaint.setStrokeMiter(Paint.ANTI_ALIAS_FLAG);//设置画笔的倾斜度(不知有没有用)
        mPaint.setHinting(Paint.HINTING_OFF);//设置画笔的隐藏模式  Paint.HINTING_OFF 关闭  Paint.HINTING_ON 打开
        //TODO:特殊线需要单独研究
        mPaint.setPathEffect(new CornerPathEffect(2));//有时候我们需要点画线等特殊的线，这个可以设置连接线的形状  CornerPathEffect 两段线之间用圆角 DashPathEffect将线段虚线话   DiscretePathEffect打散path效果  其他效果详见 http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0120/2334.html
        //mPaint.setRasterizer();//设置光栅，被废弃(无需研究)

下面举例说明两个参数的含义，其他可以看看里面引用的参考文章，讲的很好

        mPaint.setStrokeCap(Paint.Cap.BUTT);//设置线的两端情况 默认为此状态即是多长就多长
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(25);
        Path path=new Path();
        path.moveTo(400,500);
        path.lineTo(600,500);
        canvas.drawPath(path,mPaint);

        mPaint.setStrokeCap(Paint.Cap.ROUND);//两端为圆角伸出
        Path path1=new Path();
        path1.moveTo(400,550);
        path1.lineTo(600,550);
        canvas.drawPath(path1,mPaint);

        mPaint.setStrokeCap(Paint.Cap.SQUARE);//两端为矩形伸出
        Path path2=new Path();
        path2.moveTo(400,600);
        path2.lineTo(600,600);
        canvas.drawPath(path2,mPaint);

        mPaint.setStrokeCap(Paint.Cap.BUTT);
        mPaint.setStrokeJoin(Paint.Join.BEVEL);//设置线与线的连接方式,此参数表示直切，还有圆角，直角，默认为直角
        Path path3=new Path();
        path3.moveTo(400,650);
        path3.lineTo(600,650);
        path3.lineTo(600,750);
        canvas.drawPath(path3,mPaint);

效果就是最后第二张图片中的几条大粗线。

2.绘制点线面，不得不说一个path函数，非常非常重要 参见：http://www.cnblogs.com/lenve/p/5865874.html

下面开始绘制一个大家都会练习的一个例子:时钟。里面有很重要的内容，最好运行一下，仔细看思路。

public class TimeView extends TextView {
    private Paint mPaint;
    private int mSecond;
    private int mMinite;
    private int mHour;

    public TimeView(Context context) {
        this(context, null);
    }

    public TimeView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TimeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        String time = getTimeShort();
        int hour = Integer.valueOf(time.substring(0, 2));
        mHour = hour % 12;
        mMinite = Integer.valueOf(time.substring(3, 5));
        mSecond = Integer.valueOf(time.substring(6, time.length()));
    }

    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case 0:
                    mSecond++;
                    if (mSecond == 60) {
                        mSecond = 0;
                        mMinite++;
                        if (mMinite == 60) {
                            mMinite = 0;
                            mHour++;
                            if (mHour == 12) {
                                mHour = 0;
                            }
                        }
                    }
                    invalidate();
                    break;
            }
        }
    };

    @Override
    protected void onDraw(Canvas canvas) {
        int screenX = getMeasuredWidth() / 2;
        int screenY = getMeasuredHeight() / 2;
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(3);
        mPaint.setColor(Color.GREEN);
        //绘制背景
        canvas.drawColor(Color.YELLOW);
        //绘制大圆
        canvas.drawCircle(screenX, screenY, 250, mPaint);
        //绘制表芯小圆
        mPaint.setColor(Color.GRAY);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(screenX, screenY, 18, mPaint);
        //绘制指针小圆
        mPaint.setColor(Color.GREEN);
        canvas.drawCircle(screenX, screenY, 10, mPaint);
        //绘制文字北京时间  问题：如何计算指定长度的字符所占的角度(未解决)
        mPaint.setStrokeWidth(2);
        String s = "北京时间";
        mPaint.setTextSize(DensityUtils.sp2px(getContext(), 19));
        Path textPath = new Path();
        RectF rect = new RectF(screenX - 205, screenY - 205, screenX + 205, screenY + 205);
        textPath.arcTo(rect, -111, 90, false);//这里没有做适配，所以可能运行不是在文字正上方
        canvas.drawTextOnPath(s, textPath, 0, 0, mPaint);
        //绘制刻度  这个不是很好理解：思路是这样的，首先将画布平移到圆的中心(本例子中就是屏幕中央),那么此时高中立体几何的知识就用到了，画布已经平移到屏幕中央了，那么
                 // 此时屏幕中央的坐标是多少呢?答案是(0,0),屏幕左上角的坐标是多少呢(-screenWidth/2,-screenHeight/2),为什么？想想立体几何中的知识(具体什么知识我也忘了，不过确实是)
                //然后我们绘制刻度线就要以屏幕中央为基准点，绘制。怎么绘制？很简单，画笔只负责在同一个位置画直线，然后让画布旋转，相对运动吗，这样转一圈，刻度就好了
                //现在是怎么确定直线两点坐标为题，我的思路是在正上方绘制直线，那么坐标就是多少呢？例如线长为20，圆半径为100，则坐标为(0,-100)和(0,-120).理解一下，再读读上面内容画个坐标系就懂了
         canvas.save();//保存当前画布的各种属性状态，配合canvas.restore();使用
        canvas.translate(screenX, screenY);
        for (int i = 0; i < 60; i++) {
            if (i % 5 == 0) {//长
                mPaint.setStrokeWidth(3);
                canvas.drawLine(0, -250, 0, -274, mPaint);
            } else {//短
                mPaint.setStrokeWidth(2);
                canvas.drawLine(0, -250, 0, -265, mPaint);
            }
            canvas.rotate(6);
        }
        //绘制数字(思路和绘制刻度一样)
        Rect re = new Rect();
        for (int i = 1; i < 13; i++) {
            int t = i - 1;
            if (t == 0) {
                t = 12;
            }
            mPaint.setStrokeWidth(2);
            mPaint.setTextSize(DensityUtils.sp2px(getContext(), 16));
            String num = String.valueOf(t);
            mPaint.getTextBounds(num, 0, num.length(), re);
            canvas.drawText(num, -re.width() / 2, -280, mPaint);
            canvas.rotate(30);
        }
        canvas.restore();//回复保存的画布各种属性状态，这中间做的各种改变都放弃掉
        canvas.save();
        //绘制时针
        mPaint.setStrokeWidth(7);
        canvas.translate(screenX, screenY);
        canvas.rotate((float) 30 * mHour + 30 * (float) mMinite / 60);
        canvas.drawLine(0, 20, 0, -155, mPaint);
        canvas.restore();
        //绘制分针
        canvas.save();
        mPaint.setStrokeWidth(5);
        canvas.translate(screenX, screenY);
        canvas.rotate((float) 6 * mMinite + 6 * (float) mSecond / 60);
        canvas.drawLine(0, 25, 0, -175, mPaint);
        canvas.restore();
        canvas.save();
        //绘制秒针
        canvas.translate(screenX, screenY);
        mPaint.setStrokeWidth(3);
        canvas.rotate(6 * mSecond);
        canvas.drawLine(0, 35, 0, -190, mPaint);
        canvas.restore();
        mHandler.sendEmptyMessageDelayed(0, 1000);
    }

    /**
     * 获取时间 小时:分;秒 HH:mm:ss
     *
     * @return
     */
    public static String getTimeShort() {
        SimpleDateFormat formatter = new SimpleDateFormat("HH:mm:ss");
        Date currentTime = new Date();
        return formatter.format(currentTime);
    }

    public void onDestory() {
        mHandler.removeCallbacksAndMessages(null);
        mHandler = null;
    }
}