Android drawPath的简单使用

本文介绍如何利用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));
        }

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

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值