Android 中的椭圆形渐变

Question

我知道如何设置和显示椭圆形。我知道如何对这个形状应用渐变。我不知道如何获得椭圆形渐变来匹配形状。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval" >
    <gradient
        android:startColor="#66FFFFFF"
        android:endColor="#00FFFFFF"
        android:gradientRadius="100"
        android:type="radial" />
</shape>

如果你能想象得到，这个渐变在中间有半透明的白光，然后在边缘渐变到 alpha 零。我需要让它以椭圆形出现，而不仅仅是圆形渐变。我怎样才能实现这个目标？

Answer 1

<?xml version="1.0" encoding="utf-8"?>

<stroke android:width="1dp" android:color="#ffffffff" />

<size
    android:width="40dp"
    android:height="40dp"/>

<gradient
    android:type="radial"
    android:startColor="#ffff0000"
    android:endColor="#330000ff"
    android:gradientRadius="40dp"
    android:angle="270"
    android:centerX=".5"
    android:centerY=".5"/>

Answer 2

这很困难，因为以这种方式定义的可绘制对象在运行时自行绘制，适应您放置它们的空间。如果您必须在代码中执行此操作，最好的解决方案是采用您在 XML 中定义的可绘制形状并绘制它作为一个完美的圆放在画布上或位图中。此时，渐变图案将遵循形状轮廓。一旦形状被绘制到静态上下文中，您就可以将形状添加到视图中（比方说，作为背景），当它尝试适应视图边界时，这会将其扭曲成椭圆形。既然你有一个图像，整个事物就会按比例扭曲。

希望这种方法的像素不会太差。

Answer 3

我发现的另一个解决方法是使用scaleX =“1.x”或scaleY =“1.x”。然而，这与形状不相符。

Answer 4

一种“愚蠢但有效”的方法是绘制椭圆轮廓​​，然后绘制具有相同“中心”的多个嵌套椭圆，其大小和颜色随着椭圆变小而变化，一直到一个像素椭圆。
如果您自定义渐变编码，请在 HSV 中插入颜色，而不是在 RVB 中！

Answer 5

我建议更“直接”的绘图方法。如果您可以逐像素绘制渐变，那么您只需要记住，对于

• 圆形，渐变颜色与r
• 椭圆形（椭圆形） 渐变颜色与r1+r2成正比

，这里：

r - 到圆心的距离

r1,r2 - 到椭圆两个焦点的距离

编辑：
考虑这个像素着色器代码：

uniform sampler2D tex;

void main()
{
    vec2 center = vec2(0.5,0.5);
    float len = 1.3*(distance(gl_TexCoord[0].xy,center));
    vec2 foc1 = vec2(len,0.);
    vec2 foc2 = vec2(-len,0.);
    float r = distance(center+foc1,gl_TexCoord[0].xy) +
             distance(center+foc2,gl_TexCoord[0].xy);
    float k = pow(r*0.9,1.3);
    vec4 color = vec4(k,k,k,1.);
    gl_FragColor = color;
}

你会得到类似这样的椭圆形：

祝你好运