¿Generando gradientes mediante programación?
Pregunta
Dados 2 colores rgb y un área rectangular, me gustaría generar un degradado lineal básico entre los colores.He hecho una búsqueda rápida y lo único que he podido encontrar es esta entrada de blog, pero parece que falta el código de ejemplo, o al menos así era en el momento de esta publicación.Cualquier cosa ayuda, algoritmos, ejemplos de código, lo que sea.Esto estará escrito en Java, pero la capa de visualización ya está a cargo, solo necesito descubrir cómo saber qué mostrar.
Solución
quieres una interpolación entre el primer y el segundo color.Interpolar colores es fácil calculando la misma interpolación para cada uno de sus componentes (R, G, B).Hay muchas formas de interpolar.La más sencilla es utilizar la interpolación lineal:solo toma el porcentaje pag del primer color y porcentaje 1 - pag del segundo:
R = firstCol.R * p + secondCol.R * (1 - p)
hay otra pregunta relacionado con esto.
Existen otros métodos de interpolación que a veces funcionan mejor.Por ejemplo, usando un en forma de campana (sigmoidea) La función de interpolación hace que la transición sea más suave.
/EDITAR:Vaya, te refieres a usar una función predefinida.Vale, aún más fácil.La publicación del blog que vinculó ahora tiene un código de ejemplo en Python.
En Java, puedes usar el GradientPaint
.
Otros consejos
Puedes usar el incorporado Pintura Degradada clase.
void Paint(Graphics2D g, Regtangle r, Color c1, Color c2)
{
GradientPaint gp = new GradientPaint(0,0,c1,r.getWidth(),r.getHeight(),c2);
g.setPaint(gp);
g.fill(rect);
}
Usando las clases básicas de AWT, podrías hacer algo como esto:
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Rectangle2D;
import javax.swing.JPanel;
public class LinearGradient extends JPanel {
public void paint(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
Color color1 = Color.RED;
Color color2 = Color.BLUE;
int steps = 30;
int rectWidth = 10;
int rectHeight = 10;
for (int i = 0; i < steps; i++) {
float ratio = (float) i / (float) steps;
int red = (int) (color2.getRed() * ratio + color1.getRed() * (1 - ratio));
int green = (int) (color2.getGreen() * ratio + color1.getGreen() * (1 - ratio));
int blue = (int) (color2.getBlue() * ratio + color1.getBlue() * (1 - ratio));
Color stepColor = new Color(red, green, blue);
Rectangle2D rect2D = new Rectangle2D.Float(rectWidth * i, 0, rectWidth, rectHeight);
g2.setPaint(stepColor);
g2.fill(rect2D);
}
}
}
Siguiendo con la excelente respuesta de David Crow, aquí hay un ejemplo de implementación de Kotlin.
fun gradientColor(x: Double, minX: Double, maxX: Double,
from: Color = Color.RED, to: Color = Color.GREEN): Color {
val range = maxX - minX
val p = (x - minX) / range
return Color(
from.red * p + to.red * (1 - p),
from.green * p + to.green * (1 - p),
from.blue * p + to.blue * (1 - p),
1.0
)
}
he estado usando RMagia para eso.Si necesita ir más allá del degradado simple, ImageMagick y uno de sus envoltorios (como RMagick o JMagick para Java) podría resultar útil.