La temperatura ha estado cambiando recientemente, y ha vuelto al clima de alta temperatura de más de 30 grados en los últimos días. En ese clima, si la oficina no tiene aire acondicionado o ventilador eléctrico, es difícil concentrarse en trabajo. El acondicionador de aire se puede usar todos los días. Hay ventiladores en la oficina, pero es probable que usted mismo haya preparado el ventilador. Si no ha tenido tiempo de prepararlo, primero puede considerar dibujar un ventilador en el escritorio y mirar sopla.Después de todo, los antiguos esperaban que las ciruelas apagaran su sed.Dibujemos un ventilador para refrescarnos hoy.
Dirección de la fuente
Preparación
Primero considere la estructura del ventilador. Nuestro ventilador consta de varias partes, a saber, la base, la columna, el marco del ventilador y las aspas del ventilador. Estructura arriba y abajo, la base está en la parte inferior, las otras están en la parte superior, excepto la base, el resto se dibujan en uno Canvas, la estructura general es la siguiente
aspa del ventilador
En realidad, las aspas de un ventilador pueden verse como dibujando una forma de abanico en el lienzo, y necesitamos usar una función para dibujar una forma de abanico drawArc. La lista de parámetros de esta función es la siguiente
Todos estamos familiarizados con los parámetros. Los parámetros necesarios para dibujar el sector aquí son
brush: Se utiliza para establecer el color del degradadostartAngle: Indica el ángulo inicialsweepAngle: Indica el ángulo del sectoruserCenter: Indica si los dos extremos del sector están conectados al centro del círculotopLeft: Indica las coordenadas de la esquina superior izquierda del rango en forma de abanicosize: Indica el rango de dibujo del sectorstyle: el valor predeterminado se completa con Relleno, por lo que no tenemos que preocuparnos por eso
Según los parámetros, necesitamos crear varias variables, la primera son las coordenadas del centro del círculo, que son las coordenadas del centro tomadas Canvas, por lo que no importa cuán grande o pequeña sea la ventana, nuestras coordenadas del centro estarán en el centro. de todo el lienzo
El segundo es nuestro radio, el tamaño del radio determina el tamaño de todo el rango de dibujo en forma de abanico.
Entonces nuestro código para dibujar un abanico es el siguiente
Una forma de abanico se dibuja de esta manera, y un ventilador tiene un total de tres aspas. Queremos dibujar tres formas de abanico, y están igualmente divididas en la circunferencia. ¿Cómo deberíamos dibujarlo? Usando este método aquí, primero cree una matriz, que contiene el color degradado que se usará para cada sector
Luego crea una matriz, que contiene cada sector.startAngle
Entonces, en primer lugar, podemos dibujar los seis sectores atravesando la matriz
我们看到这个时候界面上展示的就是一个由六个扇形组成的大圆形，然后我们把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的原因我们接下去会说，这个跟风扇的转速有关
让风扇转起来
Desde el punto de vista del código, deje que el ventilador gire en una posición diferente cada vez que se dibuja el ventilador. Desde los parámetros drawArcen la función dibujamos el ventilador, si queremos cambiar la posición del ventilador, es el cambiado startAnglevalor, que es su valor. El valor inicial más un valor que cambia en cualquier momento, el rango de este cambio es 0f ~ 360f, entonces para el proceso de este cambio cíclico, primero debemos pensar en usar animación cíclica
Aquí podemos ver que fanStateel valor de es en realidad el tiempo para repetir la animación. fanStateCuanto menor sea el valor del valor, más rápida será la velocidad de rotación. Además, el valor inicial y el valor objetivo de la animación también se agregan con el fanStatevalor de fanState. Deje que la función Composable animateFloatactive la reorganización, de modo que se pueda regenerar un nuevo objeto InfiniteRepeatableSpec y se pueda cambiar la velocidad. De lo contrario, animateFloatlos tres parámetros no cambiarán y no habrá reorganización, y wheelStateel valor original seguirá siendo el mismo wheelStateDespués de obtener el valor de It se agrega a la función drawArc startAngledentro
También hay un juicio agregado aquí. Cuando el interruptor está encendido, drawArcse startAngleagrega el valor de cambio wheelState. Cuando está apagado, este valor no se agrega, es decir, el ventilador está en un estado estático. Echemos un vistazo al efecto.
Resumir
Nuestro abanico también está terminado, y los puntos de conocimiento utilizados se usan comúnmente en el desarrollo de Compose, como la animación en bucle, el dibujo de Canvas y las operaciones de gestos, así que simplemente dibuje un abanico en la pantalla de la computadora. Sé si puede sentir una brisa fresca después leyendo este artículo~