Android drawPath的简单使用

Android drawPath的简单使用

---

最近，有一个时钟屏保的需求，网上也有不少这方面的demo，但是有些方面还是不能满足我的需要。举个栗子，需要使我的时钟的时针和分针都是带箭头的，这样看起来更美观。

那么问题来了，怎么才能画出一个带箭头的指针呢？通过查询AndroidAPI，我发现了drawPath方法——专门用来画多边形。好，我们先来画个多边形看看：

Paint paint = new Paint();
paint.setColor(Color.WHITE);
paint.setAntiAlias(true);

//p[]为一个flaot数组，用来存储多边形点的坐标
Path path = new Path();
path.moveTo(p[0], p[1]);
path.lineTo(p[2], p[3]);
path.lineTo(p[4], p[5]);
path.lineTo(p[6], p[7]);
path.lineTo(p[8], p[9]);
path.close(); // 使这些点构成封闭的多边形

canvas.drawPath(path,paintHour);

但是，我们怎么才能确定这些点的坐标呢？在时钟上，指针转到不同的角度，对应的指针各个点的坐标就会发生变化。现在，我们只需根据这个角度，就能得出各个点的坐标。

float r = (Math.min(getHeight() / 2, getWidth() / 2));//时钟半径
float length = r * 0.4;//时针前面的长度
float backLength = 30f;//时针后面超出部分长度
float g = length / 8;//s时针前面箭头的长度

//当前时针旋转的角度
float angle = Calendar.getInstance().get(Calendar.HOUR_OF_DAY)%12/12f*360;
float a = 10f;//时针后面超出部分的两点与时针的夹角
float b = 4f;//时针前面部分的两点与时针的夹角

float[] points = new float[10];//五个点的坐标

//算出五个点的坐标，这里就不详细介绍怎么算的了。画个图，找好角度，就一目了然了。
if(angle <= 90f){
            points[0] = -(float) (backLength /(Math.cos(a*Math.PI/180))*Math.sin((angle+a)*Math.PI/180));
            points[1] = (float) (backLength /(Math.cos(a*Math.PI/180))*Math.cos((angle+a)*Math.PI/180));
            points[2] = (float) (length/(Math.cos(b*Math.PI/180))*Math.sin((angle-b)*Math.PI/180));
            points[3] = -(float) (length/(Math.cos(b*Math.PI/180))*Math.cos((angle-b)*Math.PI/180));
            points[4] = (float) Math.sin(angle*Math.PI/180) * (length+g);
            points[5] = -(float) Math.cos(angle*Math.PI/180) * (length+g);
            points[6] = (float) (length/(Math.cos(b*Math.PI/180))*Math.sin((angle+b)*Math.PI/180));
            points[7] = -(float) (length/(Math.cos(b*Math.PI/180))*Math.cos((angle+b)*Math.PI/180));
            points[8] = -(float) (backLength /(Math.cos(a*Math.PI/180))*Math.sin((angle-a)*Math.PI/180));
            points[9] = (float) (backLength /(Math.cos(a*Math.PI/180))*Math.cos((angle-a)*Math.PI/180));
        }else if(angle <= 180f){
            points[0] = -(float) (backLength /(Math.cos(a*Math.PI/180))*Math.cos((angle-90+a)*Math.PI/180));
            points[1] = -(float) (backLength /(Math.cos(a*Math.PI/180))*Math.sin((angle-90+a)*Math.PI/180));
            points[2] = (float) (length/(Math.cos(b*Math.PI/180))*Math.cos((angle-90-b)*Math.PI/180));
            points[3] = (float) (length/(Math.cos(b*Math.PI/180))*Math.sin((angle-90-b)*Math.PI/180));
            points[4] = (float) Math.cos((angle-90)*Math.PI/180) * (length+g);
            points[5] = (float) Math.sin((angle-90)*Math.PI/180) * (length+g);
            points[6] = (float) (length/(Math.cos(b*Math.PI/180))*Math.cos((angle-90+b)*Math.PI/180));
            points[7] = (float) (length/(Math.cos(b*Math.PI/180))*Math.sin((angle-90+b)*Math.PI/180));
            points[8] = -(float) (backLength /(Math.cos(a*Math.PI/180))*Math.cos((angle-90-a)*Math.PI/180));
            points[9] = -(float) (backLength /(Math.cos(a*Math.PI/180))*Math.sin((angle-90-a)*Math.PI/180));
        }else if(angle <= 270f){
            points[0] = (float) (backLength /(Math.cos(a*Math.PI/180))*Math.sin((angle-180+a)*Math.PI/180));
            points[1] = -(float) (backLength /(Math.cos(a*Math.PI/180))*Math.cos((angle-180+a)*Math.PI/180));
            points[2] = -(float) (length/(Math.cos(b*Math.PI/180))*Math.sin((angle-180-b)*Math.PI/180));
            points[3] = (float) (length/(Math.cos(b*Math.PI/180))*Math.cos((angle-180-b)*Math.PI/180));
            points[4] = -(float) Math.sin((angle-180)*Math.PI/180) * (length+g);
            points[5] = (float) Math.cos((angle-180)*Math.PI/180) * (length+g);
            points[6] = -(float) (length/(Math.cos(b*Math.PI/180))*Math.sin((angle-180+b)*Math.PI/180));
            points[7] = (float) (length/(Math.cos(b*Math.PI/180))*Math.cos((angle-180+b)*Math.PI/180));
            points[8] = (float) (backLength /(Math.cos(a*Math.PI/180))*Math.sin((angle-180-a)*Math.PI/180));
            points[9] = -(float) (backLength /(Math.cos(a*Math.PI/180))*Math.cos((angle-180-a)*Math.PI/180));
        }else if(angle <= 360f){
            points[0] = (float) (backLength /(Math.cos(a*Math.PI/180))*Math.cos((angle-270+a)*Math.PI/180));
            points[1] = (float) (backLength /(Math.cos(a*Math.PI/180))*Math.sin((angle-270+a)*Math.PI/180));
            points[2] = -(float) (length/(Math.cos(b*Math.PI/180))*Math.cos((angle-270-b)*Math.PI/180));
            points[3] = -(float) (length/(Math.cos(b*Math.PI/180))*Math.sin((angle-270-b)*Math.PI/180));
            points[4] = -(float) Math.cos((angle-270)*Math.PI/180) * (length+g);
            points[5] = -(float) Math.sin((angle-270)*Math.PI/180) * (length+g);
            points[6] = -(float) (length/(Math.cos(b*Math.PI/180))*Math.cos((angle-270+b)*Math.PI/180));
            points[7] = -(float) (length/(Math.cos(b*Math.PI/180))*Math.sin((angle-270+b)*Math.PI/180));
            points[8] = (float) (backLength /(Math.cos(a*Math.PI/180))*Math.cos((angle-270-a)*Math.PI/180));
            points[9] = (float) (backLength /(Math.cos(a*Math.PI/180))*Math.sin((angle-270-a)*Math.PI/180));
        }

到此，一个带箭头的指针就画好了。看下效果图：