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));
}
到此,一个带箭头的指针就画好了。看下效果图:
