Овальный Градиент в Android - PullRequest
Новая
       39

Овальный Градиент в Android

13 голосов
/ 20 августа 2010

Я знаю, как настроить и отобразить овальную форму.Я знаю, как применить градиент к этой форме.Что я не могу понять, так это как получить овальный градиент, чтобы он соответствовал форме. 

<?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>

Если вы можете себе представить, этот градиент имеет полупрозрачное свечение белого цвета в середине, а затем исчезает до нулякрая.Мне нужно, чтобы он выходил в форме овала, а не просто кругового градиента.Как мне этого добиться?

Ответы [ 4 ]

3 голосов
/ 29 августа 2010

Я бы предложил более «прямой» подход к рисованию. Если вы можете рисовать градиент попиксельно, вам нужно просто запомнить, что для

  • круг градиент цвета пропорционален r
  • эллипс (овал) градиент цвета пропорционален r1+r2

Здесь:

r - расстояние до центра круга

r1, r2 - расстояния до двух фокусов эллипса

EDIT: Рассмотрим этот код пиксельного шейдера: 

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;
}

Вы получите овал что-то вроде этого: alt text

удачи

2 голосов
/ 23 августа 2010

Это трудно, поскольку определенные таким образом рисованные объекты рисуют сами во время выполнения, адаптируясь к пространству, в котором вы их помещаете. Лучшим решением, если вы должны сделать это в коде, было бы принять форму, которую вы задали в XMLи нарисуйте его на холст или растровое изображение в виде идеального круга.В этот момент шаблон градиента будет следовать контуру формы.После того, как форма была нарисована в статическом контексте, вы можете добавить форму к виду (например, в качестве фона), который будет искажать его в овал, когда он попытается соответствовать границам вида.Поскольку у вас есть изображение, все это будет пропорционально искажено.

Надеюсь, с этим методом оно не будет слишком плохим.

1 голос
/ 09 февраля 2015 
<?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"/>

0 голосов
/ 20 августа 2010

«тупой, но работающий» способ сделать это - нарисовать контур эллипса, затем множество вложенных эллипсов с тем же «центром», размеры и цвета которых меняются по мере того, как эллипсы уменьшаются, вплоть до однопиксельный эллипс. Если вы настраиваете свой градиент, интерполируйте цвета в HSV, а не в RVB!

...