最近在查询移动历史话费页面上,新增加了一个小小的消费比例的饼图,就是这个小小的饼图,给我修改话费账单页面造成了一点小小的麻烦,如果我要修改账单里得金额,我必须在Photoshop中重新计算消费比例,再根据此修改出一张新的图,非常麻烦。因此我尝试完全仿照它的样式自己用代码绘制出这样一个“小圆饼”。还好的是,这个小饼比较简单,固定由三部分费用组成,详见下图所示。
这个图虽然比较简单,但也存在绘制饼图的所有“麻烦”要素:
(1)角度变换问题。饼图并不是正透视,而是倾斜视角,所以角度存在变幻关系。这里的饼图和视平线成一个倾斜夹角,因此我们简单的认为,假设以圆饼圆心为原点,圆饼边缘上的点的横坐标不变,而纵坐标y具有这样的变换关系:y'=y*k; 其中k=椭圆高度/椭圆宽度;如下图所示:
因此 tg a'=k tg a, 即a'=atan( k*tg a );
另一点需要注意的是,图上的角度以12点为起始点,因此圆饼边界射线的角度值范围从-90~270度,而反正切函数值的范围是-90~90度,反正切后需要把值重新映射到-90~270度范围。
(2)另一个难点是绘制圆饼的侧面,也就是在视角可见的圆柱面,每一块侧面由上下两段椭圆弧+两侧两个一条垂直线段组成一个闭合路径,然后填充它即可。具体方法参见DrawPieSide方法,代码略。
这样我们填入相应的金额,点击生成按钮即可生成一张饼图,然后点击保存按钮即可把图片保存到硬盘。
源代码下载链接: