Compartir vía

Acerca de las listas de imágenes

  • Artículo

Una lista de imágenes es una colección de imágenes del mismo tamaño, a las que puede hacer referencia cada una de ellas por su índice. Las listas de imágenes se usan para administrar eficazmente grandes conjuntos de iconos o mapas de bits. Todas las imágenes de una lista de imágenes están contenidas en un único mapa de bits ancho en formato de dispositivo de pantalla. Una lista de imágenes también puede incluir un mapa de bits monocromo que contiene máscaras que se usan para dibujar imágenes de forma transparente (estilo de icono).

La API de Microsoft Win32 proporciona funciones y macros de lista de imágenes que permiten crear y destruir listas de imágenes, agregar y quitar imágenes, reemplazar y combinar imágenes, dibujar imágenes y arrastrar imágenes. Para usar las funciones de lista de imágenes, incluya el archivo de encabezado de control común en los archivos de código fuente y vincule con la biblioteca de exportación de controles común. Además, antes de llamar a cualquier función de lista de imágenes, use la función InitCommonControls o InitCommonControlsEx para asegurarse de que se cargue el archivo DLL de control común.

En esta sección se explican los temas siguientes:

Tipos

Hay dos tipos de listas de imágenes: sin máscara y enmascaradas. Una lista de imágenes sin máscara consta de un mapa de bits de color que contiene una o varias imágenes. Una lista de imágenes enmascaradas consta de dos mapas de bits de igual tamaño. La primera es un mapa de bits de color que contiene las imágenes y el segundo es un mapa de bits monocromático que contiene una serie de máscaras, una para cada imagen del primer mapa de bits.

Cuando se dibuja una imagen sin máscara, simplemente se copia en el contexto del dispositivo de destino; es decir, se dibuja sobre el color de fondo existente del contexto del dispositivo. Cuando se dibuja una imagen enmascarada, los bits de la imagen se combinan con los bits de la máscara, lo que suele producir áreas transparentes en el mapa de bits donde se muestra el color de fondo del contexto del dispositivo de destino. Hay varios estilos de dibujo que puede especificar al dibujar una imagen enmascarada. Por ejemplo, puede especificar que la imagen vacile para indicar un objeto seleccionado.

Crear y destruir listas de imágenes

Para crear una lista de imágenes, llame a la función ImageList_Create . Los parámetros incluyen el tipo de lista de imágenes que se va a crear, las dimensiones de cada imagen y el número de imágenes que desea agregar a la lista. Para una lista de imágenes sin máscara, la función crea un solo mapa de bits lo suficientemente grande como para contener el número especificado de imágenes de las dimensiones especificadas. A continuación, crea un contexto de dispositivo compatible con la pantalla y selecciona el mapa de bits en él. Para una lista de imágenes enmascaradas, la función crea dos mapas de bits y dos contextos de dispositivo compatibles con pantalla. Selecciona el mapa de bits de imagen en un contexto de dispositivo y el mapa de bits de máscara en el otro. El archivo DLL de control común contiene el código ejecutable para las funciones de lista de imágenes.

En ImageList_Create, especifique el número inicial de imágenes que estarán en una lista de imágenes, así como el número de imágenes por las que puede crecer la lista. Por lo tanto, si intenta agregar más imágenes de las especificadas inicialmente, la lista de imágenes crece automáticamente para dar cabida a las nuevas imágenes.

Si ImageList_Create se realiza correctamente, devuelve un identificador al tipo HIMAGELIST. Este identificador se usa en otras funciones de lista de imágenes para acceder a la lista de imágenes y administrar las imágenes. Puede agregar y quitar imágenes, copiar imágenes de una lista de imágenes a otra y combinar imágenes de dos listas de imágenes diferentes. Cuando ya no necesite una lista de imágenes, puede destruirla especificando su identificador en una llamada a la función ImageList_Destroy .

Agregar y quitar imágenes

Puede agregar imágenes, iconos o cursores de mapa de bits a una lista de imágenes. Para agregar imágenes de mapa de bits, especifique los identificadores en dos mapas de bits en una llamada a la función ImageList_Add . El primer mapa de bits contiene una o varias imágenes que se van a agregar al mapa de bits de imagen y el segundo mapa de bits contiene las máscaras que se van a agregar al mapa de bits de máscara. En el caso de las listas de imágenes sin máscara, se omite el segundo identificador de mapa de bits; se puede establecer en NULL.

La función ImageList_AddMasked también agrega imágenes con mapa de bits a una lista de imágenes enmascaradas. Esta función es similar a ImageList_Add, salvo que no se especifica un mapa de bits de máscara. En su lugar, se especifica un color que el sistema combina con el mapa de bits de imagen para generar automáticamente las máscaras. Cada píxel del color especificado en el mapa de bits de la imagen se cambia a negro y el bit correspondiente de la máscara se establece en 1. Como resultado, cualquier píxel de la imagen que coincida con el color especificado es transparente cuando se dibuja la imagen.

La macro ImageList_AddIcon agrega un icono o cursor a una lista de imágenes. Si la lista de imágenes está enmascarada, ImageList_AddIcon agrega la máscara que se proporciona con el icono o el cursor al mapa de bits de máscara. Si la lista de imágenes no está enmascarada, la máscara del icono o cursor no se usa al dibujar la imagen.

Puede crear un icono basado en una imagen y máscara en una lista de imágenes mediante la función ImageList_GetIcon . La función devuelve el identificador al nuevo icono.

ImageList_Add, ImageList_AddMasked y ImageList_AddIcon asignar un índice a cada imagen a medida que se agrega a una lista de imágenes. Los índices son de base cero; es decir, la primera imagen de la lista tiene un índice de cero, el siguiente tiene un índice de uno, etc. Después de agregar una sola imagen, las funciones devuelven el índice de la imagen. Cuando se agrega más de una imagen a la vez, las funciones devuelven el índice de la primera imagen.

La función ImageList_Remove quita una imagen de una lista de imágenes.

Reemplazo y combinación de imágenes

Las funciones ImageList_Replace y ImageList_ReplaceIcon reemplazan una imagen de una lista de imágenes por una nueva imagen. ImageList_Replace reemplaza una imagen por una imagen y máscara de mapa de bits, y ImageList_ReplaceIcon reemplaza una imagen por un icono o cursor.

La función ImageList_Merge combina dos imágenes, almacenando la nueva imagen en una nueva lista de imágenes. La nueva imagen se crea dibujando la segunda imagen de forma transparente sobre la primera. La máscara de la nueva imagen es el resultado de realizar una operación OR lógica en los bits de las máscaras para las dos imágenes existentes.

Imágenes de dibujo

Para dibujar una imagen, use la función ImageList_Draw o ImageList_DrawEx . Especifique el identificador de una lista de imágenes, el índice de la imagen que se va a dibujar, el identificador para el contexto del dispositivo de destino, una ubicación dentro del contexto del dispositivo y uno o varios estilos de dibujo.

Al especificar el estilo de ILD_TRANSPARENT , ImageList_Draw o ImageList_DrawEx usa un proceso de dos pasos para dibujar una imagen enmascarada. En primer lugar, realiza una operación AND lógica en los bits de la imagen y los bits de la máscara. A continuación, realiza una operación XOR lógica en los resultados de la primera operación y los bits en segundo plano del contexto del dispositivo de destino. Este proceso crea áreas transparentes en la imagen resultante; es decir, cada bit blanco de la máscara hace que el bit correspondiente de la imagen resultante sea transparente.

Antes de dibujar una imagen enmascarada en un fondo de color sólido, debe usar la función ImageList_SetBkColor para establecer el color de fondo de la lista de imágenes en el mismo color que el destino. Establecer el color elimina la necesidad de crear áreas transparentes en la imagen y permite ImageList_Draw o ImageList_DrawEx simplemente copiar la imagen en el contexto del dispositivo de destino, lo que da lugar a un aumento significativo del rendimiento. Para dibujar la imagen, especifique el estilo ILD_NORMAL en una llamada a ImageList_Draw o ImageList_DrawEx.

Puede establecer el color de fondo de una lista de imágenes enmascaradas en cualquier momento para que se dibuje correctamente en cualquier fondo sólido. Establecer el color de fondo en CLR_NONE hace que las imágenes se dibujen transparentemente de manera predeterminada. Para recuperar el color de fondo de una lista de imágenes, use la función ImageList_GetBkColor .

Los estilos ILD_BLEND25 y ILD_BLEND50 interpolan la imagen con el color de resaltado del sistema. Estos estilos resultan útiles si usa una imagen enmascarada para representar un objeto que el usuario puede seleccionar. Por ejemplo, puede usar el estilo ILD_BLEND50 para dibujar la imagen cuando el usuario la selecciona.

Una imagen sin máscara se copia en el contexto del dispositivo de destino mediante la operación de trama SRCCOPY. Los colores de la imagen parecen iguales independientemente del color de fondo del contexto de dispositivo. Los estilos de dibujo especificados en ImageList_Draw o ImageList_DrawEx tampoco tienen ningún efecto en la apariencia de una imagen sin máscara.

Arrastrar imágenes

La API de Win32 incluye funciones para arrastrar una imagen en la pantalla. Las funciones de arrastre mueven una imagen sin problemas, en color y sin parpadear el cursor. Se pueden arrastrar imágenes enmascaradas y sin máscara.

La función ImageList_BeginDrag inicia una operación de arrastre. Los parámetros incluyen el identificador de la lista de imágenes, el índice de la imagen que se va a arrastrar y la ubicación de la zona activa dentro de la imagen. La zona activa es un solo píxel que las funciones de arrastre reconocen como la ubicación exacta de la pantalla de la imagen. Normalmente, una aplicación establece la zona activa para que coincida con la zona activa del cursor del mouse. La función ImageList_DragMove mueve la imagen a una nueva ubicación.

La función ImageList_DragEnter establece la posición inicial de la imagen de arrastre dentro de una ventana y dibuja la imagen en la posición. Los parámetros incluyen el identificador de la ventana en la que se va a dibujar la imagen y las coordenadas de la posición inicial dentro de la ventana. Las coordenadas son relativas a la esquina superior izquierda de la ventana (no al área cliente). Lo mismo ocurre con todas las funciones de arrastre de imágenes que toman coordenadas como parámetros. Esto significa que debe compensar los anchos de los elementos de ventana, como el borde, la barra de título y la barra de menús al especificar las coordenadas. Si especifica un identificador de ventana NULL al llamar a ImageList_DragEnter, las funciones de arrastre dibujan la imagen en el contexto del dispositivo asociado a la ventana de escritorio y las coordenadas son relativas a la esquina superior izquierda de la pantalla.

La función ImageList_SetDragCursorImage crea una nueva imagen de arrastre mediante la combinación de la imagen especificada (normalmente una imagen de cursor del mouse) con la imagen de arrastre actual. Dado que las funciones de arrastre usan la nueva imagen durante una operación de arrastre, debe usar la función ShowCursor para ocultar el cursor del mouse real después de llamar a ImageList_SetDragCursorImage. De lo contrario, el sistema puede parecer tener dos cursores del mouse mientras dure la operación de arrastre.

Cuando una aplicación llama a ImageList_BeginDrag, el sistema crea una lista de imágenes interna y temporal y, a continuación, copia la imagen de arrastre especificada en la lista interna. Puede recuperar el identificador de la lista de imágenes de arrastre temporal mediante la función ImageList_GetDragImage . La función también recupera la posición de arrastre actual y el desplazamiento de la imagen de arrastre en relación con la posición de arrastre.

Información de imagen

Hay varias funciones que recuperan información de una lista de imágenes. La función ImageList_GetImageInfo rellena una estructura IMAGEINFO con información sobre una sola imagen, incluidos los identificadores de la imagen y los mapas de bits de máscara, el número de planos de color y bits por píxel, y el rectángulo delimitador de la imagen dentro del mapa de bits de imagen. Puede usar esta información para manipular directamente los mapas de bits de la imagen. La función ImageList_GetImageCount recupera el número de imágenes de una lista de imágenes.

Superposiciones de imagen

Cada lista de imágenes incluye una lista de índices que se van a usar como superposiciones. Una superposición es una imagen que se dibuja de forma transparente sobre otra imagen. Cualquier imagen que se encuentra actualmente en la lista de imágenes se puede usar como superposición. Puede especificar hasta cuatro superposiciones por lista de imágenes. Este límite se ha ampliado a 15 en la versión 4.71.

Agregue el índice de una imagen a la lista de superposiciones mediante la función ImageList_SetOverlayImage , especificando el identificador de la lista de imágenes, el índice de la imagen existente y el índice de superposición deseado. Esto, en efecto, indica a la lista de imágenes que "la imagen en el índice x se puede usar como superposición y quiero hacer referencia a la superposición como índice de superposición y". Los índices de superposición se basan en uno en lugar de en cero porque un índice de superposición de cero significa que no se usará ninguna superposición.

Se especifica una superposición al dibujar una imagen con la función ImageList_Draw o ImageList_DrawEx . La superposición se especifica realizando una operación OR lógica entre las marcas de dibujo deseadas y el resultado de la macro INDEXTOOVERLAYMASK . La macro INDEXTOOVERLAYMASK toma el índice de superposición y lo da formato para su inclusión con las marcas de estas funciones. Esto dibujará la imagen con la superposición especificada. En el ejemplo siguiente se muestra cómo se agrega y especifica una superposición al dibujar la imagen.

ImageList_SetOverlayImage(himl, 0, 3);
ImageList_Draw(himl, 1, hdc, 0, 0, ILD_MASK | INDEXTOOVERLAYMASK(3));

Se dibujará la imagen 1 y, a continuación, se superpone esa imagen con la imagen 0. Dado que 3 es el índice de superposición que especificó en la llamada ImageList_SetOverlayImage , 3 se coloca en la macro INDEXTOOVERLAYMASK .

Iconos antialiados de 32 bits

El suavizado de contornos es una técnica para suavizar o desenfocar bordes agudos. Esto proporciona a las imágenes una apariencia más natural. Las listas de imágenes de Windows Vista y Windows 7 admiten el uso de iconos y mapas de bits antialias de 32 bits. Los valores de color usan 24 bits y 8 bits se usan como canal alfa en los iconos. Para crear una lista de imágenes que pueda controlar una imagen de 32 bits por píxel (bpp), llame a la función ImageList_Create y pase una marca de ILC_COLOR32.

Para crear correctamente iconos de 32 bits, debe crear varias imágenes para cada icono, como se muestra en la ilustración siguiente.

Ilustración en la que se muestran tres tamaños de iconos para cada una de tres profundidades de color

  • Las tres primeras imágenes están en modo de 16 colores para su uso en modo seguro.
  • Los tres iconos siguientes se usan en modo de 256 colores.
  • Los tres últimos iconos tienen el canal alfa y solo se pueden usar en sistemas operativos que ejecutan color de 24 bits o superior.
  • El orden de las imágenes en el formato de icono importa. Si el orden es incorrecto, las versiones anteriores de Windows funcionan mal al extraer los iconos. Extraer los iconos incorrectamente puede provocar daños en la memoria y representación incorrecta.
  • Las versiones anteriores de Windows tenían un límite de recursos de 10 iconos.

Nota

Puede usar herramientas de terceros para generar archivos de iconos y mapas de bits que contengan un canal alfa. Si usa LoadImage para cargar un mapa de bits de 32 bpp que contiene alfa, debe especificar la marca LR_CREATEDIBSECTION.