Android 实现椭圆形中心发散渐变绘制

Bertha 。 2023-10-16 11:14 39阅读 0赞

#### 1. 前言 ####

工作中有一个需求，需要实现一个椭圆形的中心发散渐变效果，并且可以自由指定椭圆比例，旋转角度等。  
`Android`中实现椭圆形的绘制很简单，只需要调用`canvas.drawOval()`就可以了，圆形的中心发散渐变可以使用`RadialGradient`，但是椭圆形的中心发散渐变效果`Android`自带的`API`里面却是没有的，这要怎么来实现呢? 自己费了点功夫终于将其实现。

>>> 本文的源码demo可以直接看这里 :  [Android 实现椭圆形中心放射性渐变绘制-源码Demo][Android _-_Demo]

先来看一下实现的效果

![在这里插入图片描述][7bc4b29aac0a43a0924434936c03da80.png]  
它的颜色渐变是从内往外渐变的，从白色`(255,255,255)`一直渐变到黑色`(0,0,0)`

![在这里插入图片描述][95b8f5973c22434cb54caa30d124daca.png]

再来看一下`GIF`动图，效果如下，可以实现各种椭圆的形状，并且保持中心渐变发散的效果。

![在这里插入图片描述][e8e728008cb0479eabccaefc454c3d4f.gif]

#### 2. 实现圆形绘制 ####

首先，我们先来绘制一个普通的圆形，这里直接调用`canvas.drawCircle`就行了

private val paintWhite = Paint().apply {
       
        
    	color = Color.WHITE
        style = Paint.Style.FILL
    }
    
    override fun onDraw(canvas: Canvas) {
       
        
            super.onDraw(canvas)
    
        canvas.drawColor(Color.BLACK)
        canvas.drawCircle(250F, 250F, 250F/2F, paintWhite)
    }

效果如下所示

![在这里插入图片描述][a94ee4e433bf44339674e8012d6b94c7.png]

#### 3. 实现中心发散渐变效果 ####

要实现中心发散渐变效果，`Android`中要使用`RadialGradient`，它用于在绘图时创建一个放射性的渐变效果。  
它的工作方式是通过定义一个渐变的中心点，然后颜色从这个中心点向外散开，形成一个圆形的渐变效果。你可以定义渐变的颜色和位置，以及渐变的半径。  
`RadialGradient`的使用具体可以看我的另一篇博客 : [Paint渲染器 Shader的使用][Paint_ Shader]。  
这里我们就直接附上使用`RadialGradient`来实现中心发散渐变圆形效果的代码。

private val paintGradient =

[Android _-_Demo]: https://download.csdn.net/download/EthanCo/88362946
[7bc4b29aac0a43a0924434936c03da80.png]: https://img-blog.csdnimg.cn/7bc4b29aac0a43a0924434936c03da80.png
[95b8f5973c22434cb54caa30d124daca.png]: https://img-blog.csdnimg.cn/95b8f5973c22434cb54caa30d124daca.png
[e8e728008cb0479eabccaefc454c3d4f.gif]: https://img-blog.csdnimg.cn/e8e728008cb0479eabccaefc454c3d4f.gif
[a94ee4e433bf44339674e8012d6b94c7.png]: https://img-blog.csdnimg.cn/a94ee4e433bf44339674e8012d6b94c7.png
[Paint_ Shader]: https://blog.csdn.net/EthanCo/article/details/88861568