Овальный градиент в Android
Я знаю, как настроить и отобразить овальную форму. Я знаю, как применить градиент к этой форме. Я не могу понять, как сделать так, чтобы овальный градиент соответствовал форме.
<?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>
Если вы можете себе представить, этот градиент имеет полупрозрачное белое свечение в середине, а затем затухает до альфа-нуля по краям. Мне нужно, чтобы он вышел овальной формы, а не просто круговой градиент. Как мне этого добиться?
3 ответа
Это сложно, поскольку элементы чертежа, определенные таким образом, отрисовываются во время выполнения, адаптируясь к пространству, в которое вы их помещаете. Лучшим решением, если вы должны сделать это в коде, было бы чтобы взять фигуру, которую вы определили в XML, и нарисовать ее на холсте или в растровом изображении в виде идеального круга. На этом этапе узор градиента будет следовать контуру формы. После того, как фигура была нарисована в статическом контексте, вы можете добавить фигуру в представление (скажем, в качестве фона), что будет искажать ее в овал, когда она пытается соответствовать границам представления. Поскольку у вас есть изображение, все будет пропорционально искажено.
Надеюсь, с этим методом пиксель не будет слишком плохим.
"Тупой, но работающий" способ сделать это - нарисовать контур эллипса, затем множество вложенных эллипсов с одним и тем же "центром", размеры и цвета которых меняются по мере уменьшения эллипсов, вплоть до однопиксельного эллипса. Если вы создаете свой градиент, интерполируйте цвета в HSV, а не в RVB!
Я бы предложил более "прямой" подход к рисованию. Если вы умеете рисовать градиент попиксельно, то вам нужно просто помнить, что для
- окружности цвет градиента пропорционален
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;
}
Вы получите что-то вроде этого овала:
удачи