移动设备既然让我们更便捷,但是你有没有想到它的另一种功能,就是把它当成你个绘图工具来绘制圆形,且这个圆形是一个以GIF格式的形态存在,实现的方法肯定是要加入代码么来进行,因为移动设备暂时还没有绘图的软件来辅助,我们这次根据demo给定的标题数组,数值数组,和颜色数组绘制出一个饼状图。
具体的操作步骤:
核心
1.我们要确立一个核心,其实本身是一个柱状体的图形我们把它进行压缩缩短成为一个比较有立体的3D圆形。
2.给圆形附带阴影根据数据的宽度和高度来定制,使得该圆柱体看起来较为之明显。
3.当我们把圆形的路径设置好以后,给图形增添一点颜色,当添加了阴影后我们再一次添加颜色。
饼图添加阴影的思考:
这里的制作个我们的电脑绘画不一样,不能一次过绘制颜色,因为阴影和设置颜色是两个步骤路径所以我们要逐个去添加。
这是一个绘制的路径,如果你不反复的画几遍,当你把阴影设置颜色的时候会重新DE设置颜色,你之前的操作也基本是无效果,我们需要借助path的路径来绘制,然后在一层一层的画上去,这样才不会导致阴影和颜色的设置被覆盖而显得无效。
3D饼图的核心代码如下:
#进口”sssolidcakeview。”
“实施sssolidcakeview
#语用标记重写绘制方法
-(void)drawRect:(CGRect)矩形
{
//第一步获得上下文
cgcontextrefcakecontextref=uigraphicsgetcurrentcontext();
//反锯齿,让图形边缘更加柔和(设置是否允许图形上下文。抗锯齿)
cgcontextsetallowsantialiasing(cakecontextref,真的);
//缩放坐标系的比例,通过设置Y轴压缩,然后画代阴影的厚度,就画出了像是3d饼图的效果
CGContextScaleCTM(cakecontextref,_xscale,_yscale);
//饼图最先的起始角度
cgfloatstartangle=0;
为(inti=0;i<_dataarray.count;i++){
//画饼的横截面,上一部分完整的圆
//蛋糕当前的角度
cgfloatcurrentangle=[_dataarray[我]floatvalue];
//结束的角度
cgfloatEndAngle=startangle+currentangle;
//每一块蛋糕的起点,也就是圆心
(cakecontextrefCGContextMoveToPoint,_cakecenter。X、Y_cakecenter。);
//添加对应角度扇形
CGContextAddArc(cakecontextref,_cakecenter。X,Y,_cakecenter。_cakeradius,startangle*m_pi*2,*m_piEndAngle×2,0);
//得到对应的颜色
UIColor*currentcolor=_colorarray[我];
//设置边界颜色
CGContextSetStrokeColorWithColor(cakecontextref,currentcolor。cgcolor);
//设置填充颜色
CGContextSetFillColorWithColor(cakecontextref,currentcolor。cgcolor);
//画子路径,这里就绘制还不是在画完厚度再绘制,是因为并不需要绘制所有蛋糕的厚度,但是上一部分的圆是都要绘制的
CGContextDrawPath(cakecontextref,kcgpathfill);
//饼图上一部分圆,startangle处的起点坐标
cgfloatupstartx=_cakecenter。x+_cakeradius*cos(startangle×2×m_pi);
cgfloatupstarty=_cakecenter。Y+_cakeradius*罪(startangle×2×m_pi);
//饼图上一部分圆,处的终点坐标EndAngle
cgfloatupendx=_cakecenter。x+_cakeradius*cos(EndAngle×2×m_pi);
cgfloatupendy=_cakecenter。Y+_cakeradius*罪(EndAngle×2×m_pi);
//饼图厚度在角度结束处Y坐标
cgfloatdownendy=upendy+_cakeheight;
//画圆柱的侧面,饼图的厚度,圆柱的前半部分能看到,后半部分是看不到
//开始的角度如果>=m_pi,就会在圆柱的后面,侧面厚度就没必要画了
如果(startangle<0.5){
//绘制厚度
cgmutablepathref路径=cgpathcreatemutable();
cgpathmovetopoint(路径,零,upstartx,upstarty);
//当结束的角度>0.5×2×m_pi时,结束的角度该是m_pi的地方(视觉原因)
如果(EndAngle>0.5){
//上部分的弧
CGPathAddArc(路径,零,_cakecenter。X,Y,_cakecenter。_cakeradius,startangle×2×m_pi,m_pi,0);
//在角度结束的地方,上部分到下部分的直线
cgpathaddlinetopoint(路径,零,_cakecenter.x-_cakeradius,_cakecenter。Y+_cakeheight);
//下部分的弧
CGPathAddArc(路径,零,_cakecenter。X,_cakecenter。Y+_cakeheight,_cakeradius,m_pi,startangle×2×m_pi,1);
//在角度开始的地方,从下部分到上部分的直线
cgpathaddlinetopoint(路径,零,upstartx,upstarty);
}
别的{
//上部分的弧
CGPathAddArc(路径,零,_cakecenter。X,Y,_cakecenter。_cakeradius,startangle×2×m_pi,EndAngle×2×m_pi,0);
//在角度结束的地方,上部分到下部分的直线
cgpathaddlinetopoint(路径,零,upendx,downendy);
//下部分的弧
CGPathAddArc(路径,零,_cakecenter。X,_cakecenter。Y+_cakeheight,_cakeradius,EndAngle×2×m_pi,startangle×2×m_pi,1);
//在角度开始的地方,从下部分到上部分的直线
cgpathaddlinetopoint(路径,零,upstartx,upstarty);
}
//之前这一段不是很明白,为啥设颜色和阴影都要画一次
//我自己尝试并理解分析了一下,每次画一下想当于,把当前的设置画出来,再次画就在这基础上,再画当前的设置,这里加颜色和阴影就是一层一层的画上去。要是不画的话,再设置颜色相当于重新设置了颜色,之前设置的颜色就无效了。
CGContextAddPath(cakecontextref,路径);
CGContextDrawPath(cakecontextref,kcgpathfill);
//加阴影
【[UIColorcolorwithwhite:0.2α:0.4]setfill]
CGContextAddPath(cakecontextref,路径);
CGContextDrawPath(cakecontextref,kcgpathfill);
}
//最后一句,上一块的结束角度是下一块的开始角度
startangle=EndAngle;
}
//此时不能用以下的方法填充,会导致饼图就一种颜色
//CGContextFillPath(contextref);
}
-(void)setdataarray:(NSArray*)dataarray
{
_dataarray=dataarray;
//重新绘制
【自setNeedsDisplay];
}
在我们在绘制3D饼图的时候我用的是百分比的数据来加入,而在百分比的设置中我并没有把转化的过程具体的详细处理过,如果我们使用view,又是如何的使用view。
代码:
self.solidcakeview=[][sssolidcakeviewallocinit];
self.solidcakeview.dataarray=_dataarray;
self.solidcakeview.colorarray=_colorarray;
self.solidcakeview.namearray=_namearray;
self.solidcakeview.cakecenter=cgpointmake(200,200);
self.solidcakeview.cakeradius=100;
self.solidcakeview.cakeheight=30;
self.solidcakeview.xscale=1;
self.solidcakeview.yscale=0.8;
self.solidcakeview.backgroundcolorUIColor=[白色];
self.solidcakeview.frame=cgrectmake(0,0,phonescreen_width-100,phonescreen_height-20);
[self.view译:自我solidcakeview];
总结:在IOS中制作饼形图,开头我们首先把饼形的核心定个位然后把所有的路径加入其中,下面就是结合代码页面中加入相应的代码来慢慢绘制饼形的圆形后,易用demo把核心代码都展示出来,这次的IOS绘制3D饼形大概就是这样,我相信你们看完后应该可以自己去实现。
¥398.00
¥98.00
¥179.00
¥199.00