【技术创作101训练营】Flutter 三步搞定会转的饼状图原创

大家好，我是和尚，今天继续给大家分享零基础学习flutter系列的三部搞定会传的饼状图。饼状图在我们日常中是非常常见的，不仅需要图形绘制，还需要手势操作和动画的结合，整体看起来非常复杂。今天呢，和尚就对其进行拆解，分成三步骤，轻松搞定会转的饼状图，然后因此和尚自定义了一个ACE派wIgE的小部件。呃，首先分为整体分为三步骤，一个是绘制饼状图，第二个是绘制文本信息，第三个是添加手势操作，添加手势操作的时候之后再有三个小点，更更方便理解。课上呃先从第一步来开始说起，绘制饼状图饼状图呃，为了方便区分饼状图的颜色分类和比例数据，比例和上预先定义了几个基本的属性分类，包括基本的数据比例数据等。呃，添加几个原型的container即可，设置几个方便于区分的颜色即可。

呃，和尚为了节省时间，预先部分代码已经预先编辑好了，然后重点部分和尚会做详细的介绍。呃来跑一下，基本的效果就是首先是第一个添加了几个基本的呃颜色分类，整体的思路就是呃，之后的话就是对于饼状图的绘制呃整体的思路是通过covers呃来绘制饼状图，之前和尚也有整理过covers相关的博客，然后这次和尚也是通过最基本的呃。Draw方式绘制扇形，然后拼接成一个圆的方式，呃核心代码就是在初始的这个list data里面进行遍历，然后呃根据和尚预定设置了几个测试的值来呃获取他们的对应的比例和对应的呃饼状图的角度就就对应的360度相除就可以了。

然后和尚先运行一下，看一下。这样一个基本的饼状图的样子就绘，绘制好了是非常简单的。接下来的话就是第二步绘制文本信息。文本信息的绘制，呃，为了更好的显示效果，和上规定只有角度大于30度的时候才会添加对应的呃文本信息，否则的话，如果太小的话就会呃展示不开，或者是显示效果不不太好，嗯。其中cars的绘制就是如果对于我们来说，Cars的绘制是从屏幕，就是对应尺寸的左上角来开始。

为作为原始坐标的，这个时候扇形内的或者首先需要通过translate平移平移坐标系，然后平移到圆，圆的中点，圆的圆心嘛。嗯。绘制呃，就相当于这个这个图来看的话，更方便于理解，然后绘制文字的角度，之后就是绘，绘制文字，绘制文字通过呃。这个照paragraph这个方式来绘制，呃，绘制文字的角度与扇形的角平分线要平行的，呃，因此通过root方式对坐标系进行适当的角度的旋转，然后因为水平是绘制的嘛。可能可以通过paragraph。

Paragraph获取文字绘制所占据的高度，然后再通过呃。呃，Paragraph绘制的时候适当的调整文字的起始坐标，然后与Y轴坐标上平移，在Y轴上向上平移半，就是整个呃文本的高度的一半，就这样的话就是居中的，否则它是在这个水平线的靠下的一个位置来才进行绘制的。文字绘制结束之后，然后再将圆盘再将坐标系呃，Root旋转回至之前的位置，然后再平移回至原来的位置，然后这样便利就可以在这儿和尚也做了一个基本的那个呃备注。只有在大于30度的时候才会平移坐标系，平移至，首先平移到圆的中点，然后再进行旋转，旋转的话，旋转角度跟之前跟上一步的那个绘制饼，绘制那个弧。

绘制扇形的方式是一样的，之后的话就是绘制呃文文字，在这paragraph的时候，在这设置一个起始的位置。然后之后绘制完结束之后再恢复旋转的角度。恢复起始的坐标，然后每一个扇形都是这样处理就可以了，然后合上来跑一下效果。其实整个过程都是呃。比较清晰，比较容易简单理解的，这样的话，但是呃，饼状图和文字绘制就就编辑好了，就剩下就是第三步，第三步的话就是对于手势的操作。呃，手势的操作也是相对复杂的一步，对于手势的操作可以用这用gesture方式来进行，嗯，监听也也可以通过呃，但是和尚为了防止后期添加其他的需求，重写了pen recognizer，呃来对手势操作进进行监听。

就是在这里，然后之前好像只是绘制了一个cast，在这的话。通过这个手势的一个监听。来监听的，呃。这个理，这个其实和G基本上是一致的，包括点击下点击的时候的一个起始，可以获取起始坐标，然后呃，滑动过程中的一个更新的一个坐标，还有一个结束时候的一个呃信息。这样的话，和尚又分为三小步，首先是第一个设置手势范围，呃，因为和尚没有设置全屏，只是设置固定的位置，就是包括这个红框中的位置，就直接把这个，呃，就刚才那个point，呃，这个。

扇形，扇形的范围设置在这个child里面就可以。限合成为了限制手势操作，嗯，这个是非常容易理解的一个，那第二步的话就是添加手势操作。呃，添加手势操作第二步设置旋转的角度，呃。在图中可以方便理解和让预想的想法是通过gesture的点ARM update这获取，呃。更新手势坐标与初始坐标差来定位旋转角度，比如O式圆心从A到B的话，就是从A移到B，然后三点形成一个三角形，通过余弦定理来获取角AOB的一个角度，比如从C到D的话，就是呃角Co OD的一个一个余弦的角度。

其中饼状图的绘制采用的是笛卡尔坐标系，以绘制左，以绘制区左上角这为坐标系的原点，而居中的饼状图的圆心在整个坐标呃整个组件所所在的屏幕的尺寸中间，这个是。这呃d car坐标系的原点，然后，但是饼状图的圆心是在中心的，所以这个需要注意一下。呃，因此和尚采用的是呃，Render box来获取。呃，自定义组件和占据屏幕的尺寸。再乘以1/2就是对应的呃，饼状图圆心的XY。呃，其中需要注意的是手术操作的offset detail这这里面。

呃，这里面有两个位置，就是一个local position和global position，这两个对应的是不同的，呃，Position是对应的是做。是相对于组件内左上角呃坐标原点的相对位置，而global position获取的是整个屏幕左上角对应的实际位置，会让刚开始通过的是local position来方式来获取，但计算出来的角度受wi呃所占据的位置和尺寸的影响差别较大，因此后后来和尚建议使用嗯，Global position来进行呃进行角度的获取和。计算，然后通过J，呃，通过G的点on update，更新后的坐标点与更新前的坐标点就是这三个点。再结合圆心形成呃，一个坐标，一个三角形余弦定理来获取。

夹角这个是需要通过呃ma函数里面的一些操作，可以直接直接应用，非常的方便。然后和尚先来试一下。这样的话，你看基本的是可以动的，但是。不管和尚的鼠标是往哪个方向移，但是它只能顺时针方顺时针的旋转，这个就有了我们的第三步操作，添加设置旋转的方向。原因，其原因就在于刚才获取余弦，通过这种方式获取余弦定律转换的角度都是正数。

正数的话，他就无法区分它的那个方向了，然后然后和尚通过了一个另一种方式调整一下，就设置一个水平向右的一个，呃，单单元向量。单位向量，然后再通过前后手势变更的角度进行两个呃角度的差，就是比如我们要从E到A的话，我们是先从BOE获取它的一选嗯角度，然后再减去角A的一个角度，这个角度。呃，这个角度和从boa减BOE这个角度这两个手势方向是相反的，这样的话，余弦定余弦获取的余弦函数就是相反的。就比较容易。理解的好，然也是之前就预先处理好的，呃，其中在计算的时候需要用的大ma函数中最基本的数据函数公式计算所得的角度加在饼状图绘制取。

就可以了。那请问注意在文字绘制的时候也需要注意呃，旋转角度扣上来跑一下效果。这样一个会转的饼状图就基本搞定了，然后完整的代码和上已经上传到getth up上，有需要的朋友可以了解一下，然后和上建议呢，先是大家尝试一下，因为有一些小的细节还需要大家体会一下，比如和尚之前遇到的global position和呃local position的区别，还有以及对于这个呃文字位置的一个起始的位置是不是太靠近圆心，然后啊，这个这个文字的高度是不是稍微向上调整半个呃半个文字高度才会水平居中这样的一些小的一个点。嗯，然后今天的分享就到此为止了，谢谢大家，再见。