最近气温多变，这几天又回到了三十多度的高温气候，在这样的气候里边假如办公室里边不开个空调或许电电扇的话，那么是很难会集精力作业的，空调的话可能每个办公室都有，但电扇的话估量要自己去预备了，假如还没来得及预备的话，那么能够先考虑下在桌面上画个电扇看着它吹，毕竟古人有望梅止渴，咱们今天就来画电扇降温

源码地址

github.com/coffeetang/…

预备作业

首要考虑下这个电扇的结构，咱们这个电扇一共有这几个部分组成，分别是底座，立柱，扇框，扇叶，底座上有总开关，有能够调节风速强度的开关，那么全体来看是个上下结构，底座在最下面，其他的在上面，除了底座其余的都制作在一个Canvas里边，大致结构如下

扇叶

电扇的扇叶，其实能够看成是在画布上画扇形，而咱们画扇形就要用到函数drawArc，这个函数的传参列表如下所示

参数咱们都很熟悉了，这儿制作扇形所需求用到的参数有

• brush：用来设置突变色的
• startAngle：表明起始视点
• sweepAngle：表明扇形视点
• userCenter：表明扇形两头是否与圆心相连
• topLeft：表明制作扇形规模的左上角坐标
• size：表明扇形的制作规模
• style：默许值便是Fill填充的，所以咱们能够不用去挂心

依据参数，咱们需求创立几个变量，首要是圆心坐标，它是取的Canvas的中心坐标，所以无论窗口变大变小，咱们的圆心坐标都会在整个画布的中心方位

其次是咱们的半径，半径的巨细决定了整个扇形制作的规模巨细

那么咱们制作一个扇形的代码便是下面这样的

一个扇形就这样画出来了，而一个电扇一共有三个扇叶，咱要画三个扇形，并且是圆周上等分的，该怎么画呢？这儿运用这个方法，首要创立一个数组，这个数组里边是每个扇形要用到的突变色彩

然后再创立一个数组，这个数组里边是每个扇形的startAngle

那么首要咱们就能够通过遍历数组的方式，把六个扇形都画出来

咱们看到这个时分界面上展现的便是一个由六个扇形组成的大圆形，然后咱们把colorList里边每隔一组色彩就把色彩改成通明的，那么这个圆形就看起来就像是三个被等分的出来的扇形一样了

扇框与立柱

扇叶已经完成了，接下来便是制作扇框与立柱的作业，这两个都比较简单，立柱便是从圆心方位向下制作出一条直线

然后咱们在扇形靠外一点的方位制作一个圆形作为扇框的边框，这儿用到了drawPath函数，drawPath的第一个参数是Path,所以咱们先将Path做出来

然后再调用drawPath函数，将framePath传进去

然后便是电扇前面的网罩，网罩常见的有从中心向外延伸出去的一条条直线，也有的便是一个个井字格组成起来的样子，这边按照前者做个网罩款式出来，这种款式与扇叶的思维有点接近，都是按照视点在一个圆周上等分的制作款式，所以咱们首要需求确定好这些视点，也有一个list维护起来

这儿便是有45根线，每过8度画一根，而咱们知道制作线条用到的函数drawLine需求知道一个start坐标和一个end坐标，start都知道是圆形坐标，而end的xy坐标就要依据视点与半径算出来了，计算的代码如下所示

第一个参数便是网罩的半径长度，第二个参数为圆形x坐标或许y坐标，第三个参数是视点，那么咱们就能够运用这两个函数，遍历lineAngleList来制作出网罩

制作电扇部分就完成了，下面开始开发底座上的开关

总开关与强度开关

底座上的开关分两个区域，左面是调节强度的区域，右边是总开关区域，总开关设计成一个滑块的款式，滑块默许在左面为封闭状况，点击或许拖动滑块，滑块滑动到右边，状况变成开启，滑块高亮，首要建立一个变量用来记载当前开关状况，再界说两个常量分别代表封闭与打开

默许为封闭状况，滑块的完成咱们需求用到swipeable操作符，参数列表如下

其间咱们需求用到的参数有

• state:滑块的状况，需求监听滑块的状况来更新开关的状况值
• anchors:锚点，某个方位对应滑块的一个状况值
• thresholds:阈值，判读一个鼠标拖动事情滑动到某个方位的时分，这个方位属于哪种状况，那么当鼠标停止拖动时分，滑动能够animate到对应状况方位
• orientation:拖动方向

依据需求的参数咱们来创立对应的变量，滑块的代码如下所示

这儿滑块的布景色彩会依据开关状况来改变，而开关的状况咱们就通过监听swipeState来更新

咱们拖动滑块改动开关状况的功能如上图所示完成了，而点击滑块边上区域来改动开关状况就需求在滑块父布局上添加点击事情，点击一次更新滑块状况，而更新操作需求用到SwipeableState里边的animateTo函数，这个函数是个挂起函数，所以还需求给它提供一个协程作用域，刚好咱们更新滑块状况是依据点击来触发的，所以这儿挑选运用LaunchedEffect函数

滑块部分就做完了，然后是左面区域的调节强度功能，这个区域预备由三个色块组成，每个色块都能够点击，每点击一个色块,强度设置成对应级别，符合该级别的色块色彩高亮，否则就变暗，所以这儿也需求一个表明强度的变量值

然后添加上三个色块以及每个色块的逻辑代码和点击事情

这儿每个色块高亮的条件都不一样，但是有个共同条件便是有必要是开关状况开启的情况下才能高亮，假如封闭的话，所有色块都会变暗，别的fanState对应的值有1000,600,200的原因咱们接下去会说，这个跟电扇的转速有关

让电扇转起来

让电扇转起来从代码的视点便是让扇形每次制作的方位不同就能够了，而从咱们制作扇形的函数drawArc里边的参数来看，要更改扇形制作的方位那便是改动startAngle的值，也便是它的初始值加上一个时刻改动的值，这个改动的规模便是0f～360f,那么对于这个循环改变的过程，咱们必定第一个想到的便是运用循环动画

这边咱们看到了，fanState的值其实便是循环动画的时刻，fanState的值越小阐明转速越快，别的动画的初始值与目标值也加上了fanState的值，这样做的意图是为了当fanState改变时分，需求让Composable函数animateFloat触发重组，这样才能重新生成新的InfiniteRepeatableSpec目标，改动转速，否则的话，animateFloat的三个参数都不发生改变也就不发生重组，wheelState依然仍是开始的值，wheelState的值拿到以后，就能够把它加给drawArc函数里边的startAngle了

这儿还加了一个判断，当开关是开启状况下，drawArc的startAngle才加上改变值wheelState,当封闭状况下，则不加这个值，也便是电扇处于静止状况，咱们再来看看效果

总结

咱们这个电扇也做完了，用到的知识点都是平常Compose开发中常用，像是循环动画，Canvas制作以及手势操作之类的，就这样简简单单在电脑屏幕上画出来了一个电扇，不知道看完这篇文章的你能否感受到一丝凉风～