饼状图带点击特效

         第一次写博客，心情稍微嘎动，以前本来想写点东西，但是发现很多网上都已经有不错的东西了，所以再写上去也没有特别的，但是最近由于项目接触到了一个饼状图点击带特效的我不知道网上有没有，因为之前一个同事说没有找到，我也就懒得找了就直接自己花一天时间写了一个，写的时候发现还用到了很多初中数学知识，好了先看看效果然后再说一下实现的思路。



            主要思路如下：

                     1.绘制：主要是重写view类里面的onDraw方法。

     2.事件：主要是重写view类的onTouch方法。

   项目就一个可能会比较绕的地方就是如何知道我点击的是扇形的哪一块？思路如下：

     a，我先得判断我点击的那个点不在中间那个白色圆里和整个大圆外面。

    b，剩下的就是在我们想要点击的扇形区域里面。

根据上面两点我们整个思路就清晰很多了，就抓住这两个点做文章就可以做出我们想要的了，先解决上面的a点还是比较好解决的，首先我们知道中间白色圆的半径，

以及白色圆的中心坐标点，（因为如果不知道上面两个东西你如何把白色圆画出来呢？是吧），这样子我们就能计算出我们点击的点是否落在了这个白色圆里面，

如何计算？不会？面壁去。根据下图我们就可以得出两点之间的距离，再根据两点之间的距离和半圆的半径相比较我们可以得出此点击点是否在圆中，相同原理

我们也可以得出此点是否在大圆的外面，那么剩下的点就是落在了我们期望的扇形区域里面。

[插入



接下来解决剩下的b问题，如何计算出我们的点落在扇形区域的哪一块，首先我们要把它当它是一个完整的圆，然后每个扇形的角度我们是知道的，

然后我们以正三点钟方向为起始点，也就是0点位置，然后求出我们点击的那个点在多少度，只要求出这个度数，那我们就能知道我们落在了那个

区域如下图：



     上面已经把最难的两个点讲完了，接下来就讲点轻松点的简单的，我是如何绘制的呢？

首先安卓提供了一个drawArc方法用来绘制弧形，用这个函数绘制出一个像抽奖的转盘，然后在转盘上面绘制一个白色的圆，

那么就可以看到一个环形五彩图，然后刚进来的跑马灯效果的实现是通过在最上面用drawArc这个方法绘制一个360度的扇形

也就是一个圆，这样子用每5毫秒线程控制每秒减少3度去减即可，这样子就能实现刚进来的跑马灯效果了。代码如下：

// TODO Auto-generated method stub
super.onDraw(canvas);
//		int height = getHeight();// 获取对应高度
//		int width = getWidth(); // 获取对应宽度
//		int left = getLeft();
//		int right = getRight();
//		int top = getTop();
//		int bottom = getBottom();
//开始保存旋转画布状态
canvas.save();

canvas.rotate(rotateDegree, (width >> 1) + dip2px(cxt, 9), (height >> 1) + dip2px(cxt, 9));

//大圆的正方形
oval.set((width >> 4) + dip2px(cxt, 16), (width >> 4) + dip2px(cxt, 16), height - dip2px(cxt, 16), height - dip2px(cxt, 16));

//绘制突出的选中扇形弧
mBitmapPaint.setColor(colorsAlp[selRotation - 1]);
ovalAlp.set((width >> 4) + dip2px(cxt, movePosition + 5), (width >> 4) + dip2px(cxt, movePosition + 5), height - dip2px(cxt, movePosition + 5), height - dip2px(cxt, movePosition + 5));
int totalDegree = 0;
for(int j = 0; j < selRotation - 1; ++j) {
totalDegree += rotationDegree[j];
}
canvas.drawArc(ovalAlp, totalDegree, rotationDegree[selRotation - 1], true, mBitmapPaint);

/**
* 画一段实心扇形
* 第一个参数：一个矩形，用户定义扇形的大小
* 第二个参数：画扇形的起始角度
* 第三个参数：要画的角度
* 第四个参数是否包括圆形（true为包括，一般用于画扇形；false为不包括，一般用于画弧形）
* 第四个参数：画笔
*/
//绘制各个扇形区域
for(int i = 0; i < rotationDegree.length; ++i) {
mBitmapPaint.setColor(colors[i]);
int totalDegree2 = 0;
for(int j = 0; j < i; ++j) {
totalDegree2 += rotationDegree[j];
}
canvas.drawArc(oval, totalDegree2, rotationDegree[i],  true, mBitmapPaint);

}

int xCircle = (width >> 1) + dip2px(cxt, 9);
int yCircle = (height >> 1) + dip2px(cxt, 9);
//绘制中心圆
mBitmapPaint.setColor(0xFFFFFFFF);
canvas.drawCircle(xCircle, yCircle, dip2px(cxt, 60), mBitmapPaint);

//绘制奔跑消失的圆
mBitmapPaint.setColor(0xFFFFFFFF);
oval.set((width >> 4) + dip2px(cxt, 15), (width >> 4) + dip2px(cxt, 15), height - dip2px(cxt, 15), height - dip2px(cxt, 15));
canvas.drawArc(oval, 0, runDegree,  true, mBitmapPaint);

canvas.restore(); //恢复旋转的状态

int d = dip2px(cxt, 60) << 1;
//绘制灰色title
mBitmapPaint.setColor(0xFFA2A2A2);
mBitmapPaint.setTextSize(dip2px(cxt, textSize));
float titleLength = getTextViewLength(mBitmapPaint, titleTxt);
canvas.drawText(titleTxt, xCircle - dip2px(cxt, 60) + (d- titleLength) / 2, yCircle - dip2px(cxt, 8), mBitmapPaint);

//绘制金额
mBitmapPaint.setColor(moneyColor);
mBitmapPaint.setTextSize(dip2px(cxt, textSize));
float moneyTextLen = getTextViewLength(mBitmapPaint, String.valueOf(moneyFloat));
canvas.drawText(String.valueOf(moneyFloat), xCircle - dip2px(cxt, 60) + (d- moneyTextLen) / 2, yCircle + dip2px(cxt, 10), mBitmapPaint);

mBitmapPaint.reset();// 重置画笔

最后把APK发出来，给大家玩耍一下，为了避免有些人吃现成的，所以暂时不开发源码。如果想要源码请给这个（17053065032）帅比支付宝转15块钱饭钱，钱多的可以多转点，哈哈哈并留下你的邮箱+ChartArcDemo, 

收到之后会马上发到你邮箱。谢谢老板们啊

     

APK下载链接：http://download.csdn.net/detail/lixingfugg/9187503

95dd