.net - tipo - Creando un brillante efecto gráfico/brillo

system.drawing.image c# example

Question

Me gustaría crear de forma programática un efecto de brillo en una imagen, algo así como en el diseño inspirado en Apple que la Web ha adoptado cuando se actualizó a 2.0 Beta.

Esencialmente esto:

ejemplos de iconos http://nhc.hcmuns.googlepages.com/web2_icons.jpg

Ahora, veo dos enfoques aquí: creo una imagen que tiene un canal alfa con el efecto de brillo, y luego solo combino la entrada y el ícono brillante de alfa para crear esto.

El segundo enfoque: crea la imagen alfa brillante en el código y luego combínalo con el gráfico de entrada.

Preferiría la segunda solución, pero no soy una gran persona de gráficos y no sé cómo se llama el algoritmo para crear esos efectos. ¿Puede alguien darme algunos consejos * por lo que estoy buscando aquí? ¿Hay un "algoritmo de brillo" que tenga un nombre? o incluso una implementación .net ya?

* No, no ese tipo de punteros.

Answer 1

Gracias, Devin! Aquí está mi Código C # para implementar su sugerencia. Funciona bastante bien. Convertir esto en una publicación wiki de propiedad de la comunidad, si a alguien le gusta agregar algún código, no dude en editar esto.

(El ejemplo usa diferentes valores para Alpha y exposición que el código a continuación)

Image img = Image.FromFile("rss-icon.jpg");
pictureBox1.Image = AddCircularGloss(img, 30,25,255,255,255);

public static Image AddCircularGloss(Image inputImage, int exposurePercentage, int transparency, int fillColorR, int fillColorG, int fillColorB)
{
    Bitmap outputImage = new Bitmap(inputImage);
    using (Graphics g = Graphics.FromImage(outputImage))
    {
        using (Pen p = new Pen(Color.FromArgb(transparency, fillColorR, fillColorG, fillColorB)))
        {
            // Looks jaggy otherwise
            g.SmoothingMode = SmoothingMode.HighQuality;
            g.CompositingQuality = CompositingQuality.HighQuality;
            int x, y;

            // 3 * Height looks best
            int diameter = outputImage.Height * 3;
            double imgPercent = (double)outputImage.Height / 100;
            x = 0 - outputImage.Width;

            // How many percent of the image to expose
            y = (0 - diameter) + (int)(imgPercent * exposurePercentage);
            g.FillEllipse(p.Brush, x, y, diameter, diameter);
        }
    }
    return outputImage;
}

(Cambiado después de la sugerencia de John. Sin embargo, no puedo deshacerme del mapa de bits, esto tiene que hacerlo el llamador de la función)

Answer 2

Puedo explicar ese efecto en términos gráficos.

1. Crea una imagen alrededor de 3 * del tamaño del ícono.

2. Dentro de esta imagen, cree un círculo donde (la altura del icono) <radio <2 * (la altura del icono).

3. Llene el círculo con una mezcla alfa / transparencia (a blanco) de, digamos, 10%.

4. Recorta esa imagen circular en una nueva imagen de igual tamaño que tus iconos, donde el centro del círculo se centra fuera del área de visualización pero hacia arriba en 1/2 de la altura de la imagen más pequeña.

Si luego superpone esta imagen en el icono original, el efecto debería verse aproximadamente como los iconos de arriba. Debería ser factible con Imagemagick si le gusta eso, o puede optar por una de las API de gráficos dependiendo del idioma que desee usar. De los pasos anteriores, debería ser sencillo hacerlo programáticamente.

Answer 3

Respondiendo al código C # ... En general, es un buen trabajo para poner en marcha la imagen. He tenido que hacer cosas similares con algunas de mis aplicaciones en el pasado.

Un consejo, sin embargo: todos los objetos gráficos en .NET están basados ​​en primitivas Windows GDI +. Esto significa que estos objetos requieren una eliminación correcta para limpiar sus recursos que no son de memoria, al igual que los identificadores de archivo o las conexiones de bases de datos. Deseará modificar un poco el código para respaldarlo correctamente.

Todos los objetos GDI + implementan la interfaz IDisposable, haciéndolos funcionales con la instrucción using. Considere reescribir su código de manera similar a lo siguiente:

// Experiment with this value
int exposurePercentage = 40;

using (Image img = Image.FromFile("rss-icon.jpg"))
{
    using (Graphics g = Graphics.FromImage(img))
    {    
        // First Number = Alpha, Experiment with this value.
        using (Pen p = new Pen(Color.FromArgb(75, 255, 255, 255)))
        {
            // Looks jaggy otherwise
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;

            int x, y;

            // 3 * Height looks best
            int diameter = img.Height * 3;
            double imgPercent = (double)img.Height / 100;
            x = 0 - img.Width;

            // How many percent of the image to expose
            y = (0 - diameter) + (int)(imgPercent * exposurePercentage);

            g.FillEllipse(p.Brush, x, y, diameter, diameter);

            pictureBox1.Image = img;
        }
    }
}

(Tenga en cuenta que, a diferencia de la mayoría de mis muestras, no he tenido la oportunidad de compilar y probar esto ... Se trata más bien de una muestra de estructuración del código para garantizar que no haya fugas de recursos, no como producto terminado . Probablemente haya mejores formas de abstraer / estructurar eso de todos modos. Y considere seriamente hacerlo: ¡eche esto en una biblioteca de gráficos DLL a la que puede hacer referencia en cualquier proyecto que necesite estas capacidades en el futuro!)