📄 ch17.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Symantec Visual Page Mac 1.1">
<TITLE>Teach Yourself Visual C++® 5 in 24 Hours -- Hour 17 -- Using Image Lists and Bitmaps</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF">
<H1 ALIGN="CENTER"><IMG SRC="../button/sams.gif" WIDTH="171" HEIGHT="66" ALIGN="BOTTOM"
BORDER="0"><BR>
<FONT COLOR="#000077">Teach Yourself Visual C++® 5 in 24 Hours</FONT></H1>
<CENTER>
<P><A HREF="../ch16/ch16.htm"><IMG SRC="../button/previous.gif" WIDTH="128" HEIGHT="28"
ALIGN="BOTTOM" ALT="Previous chapter" BORDER="0"></A><A HREF="../ch18/ch18.htm"><IMG
SRC="../button/next.gif" WIDTH="128" HEIGHT="28" ALIGN="BOTTOM" ALT="Next chapter"
BORDER="0"></A><A HREF="../index.htm"><IMG SRC="../button/contents.gif" WIDTH="128"
HEIGHT="28" ALIGN="BOTTOM" ALT="Contents" BORDER="0"></A>
<HR>
</CENTER>
<H1 ALIGN="CENTER"><FONT COLOR="#000077">- Hour 17 -<BR>
Using Image Lists and Bitmaps</FONT></H1>
<P>Image lists can be used to store collections of bitmaps, making them useful when
several bitmaps are needed, such as in tree view and list view controls. In this
hour, you learn
<UL>
<LI>How to create an image list<BR>
<BR>
<LI>The properties and methods that can be applied to an image list<BR>
<BR>
<LI>How to use an image list as a bitmap container<BR>
<BR>
<LI>The advanced drawing features offered by image lists
</UL>
<P>Also, in this hour you will build a sample program that creates an image list
and uses it as a storage location for bitmap images. This hour will build a foundation
that you will use later in Hour 18, "List View Controls," and Hour 19,
"Tree Views."
<H2><FONT COLOR="#000077"><B>What Is an Image List?</B></FONT></H2>
<P>An image list is similar to an array of bitmaps, just like a roll of film is an
array of images, as shown in Figure 17.1. Unlike rolls of film, an image list can
grow, if needed, as extra images are added to the list. Each bitmap stored in an
image list is associated with an index, which can be used to retrieve a particular
image.</P>
<P><A NAME="01"></A><A HREF="01.htm"><B>Figure 17.1.</B></A> <BR>
<I>An image list is like a roll of bitmap images.</I>
<BLOCKQUOTE>
<P>
<HR>
<FONT COLOR="#000077"><B>Time Saver:</B></FONT><B> </B>Image lists can also be used
outside these new controls, and they provide an easy way to store a series of bitmaps,
because you must handle only a single image-list object instead of separate objects
for each bitmap.
<HR>
</BLOCKQUOTE>
<P>If you want to display bitmaps in tree views or list views, you must use an image
list. If your program needs to manage several different bitmapped images, a single
image list is easier to use than a series of bitmaps. Accessing and displaying multiple
images from an image list is much easier than handling multiple <TT>CBitmap</TT>
objects. Windows Explorer has a much richer user interface than the older File Manager
used in Windows 3.1. Much of this richness is achieved through the use of image lists,
which offer an easy way to store and manage bitmaps.</P>
<P>In addition, image lists offer two features that are difficult to duplicate with
regular bitmaps:
<UL>
<LI>Transparent images
<LI>Overlaid images
</UL>
<P><FONT COLOR="#000077"><B>New Term:</B></FONT><B> </B>A <I>transparent image</I>
is an image that allows the background to be seen through part of the image, as if
part of the bitmap were transparent.</P>
<P>A transparent image is difficult to achieve using a normal bitmap. In the simplest
cases, about twice as many lines of code are required to draw a bitmap transparently
as are required to draw it as an opaque image against a drawing surface. Using an
image list, drawing a transparent bitmap is almost effortless, requiring little more
than parameters that are set correctly.</P>
<P><FONT COLOR="#000077"><B>New Term:</B></FONT><B> </B>An <I>overlaid image </I>is
created by combining two images to form a single, combined image.</P>
<P>An overlaid image is useful when showing special attributes for items represented
by images stored in an image list. For example, when a shared directory is shown
in the Explorer, a server "hand" is superimposed over the directory's folder.
This is an overlaid image.
<H2><FONT COLOR="#000077"><B>How Is an Image List Used?</B></FONT></H2>
<P>As for almost everything else in Windows, there is an MFC class for image lists,
too. The <TT>CImageList</TT> class is used to create, display, and otherwise manage
image lists in an MFC-based Windows program.</P>
<P>Image lists often are used to provide item images for the <TT>CListCtrl</TT> class
that is covered in Hour 18, and the <TT>CTreeCtrl</TT> class that is covered in Hour
19. However, you can also use an image list as a collection of bitmaps, which you
will do in this chapter. Using image lists in this way helps show off the different
things you can do with image lists before they are used with the common controls.</P>
<P>As an example of using image lists, create an SDI project named ImageList. This
project uses an image list to display a series of bitmaps in the program's client
area.
<H3><FONT COLOR="#000077"><B>Creating an Image List</B></FONT></H3>
<P>The first step in creating an image list is to create a series of bitmaps, each
of which is the same size. Although the images can be any size, the sample code in
this section assumes the bitmaps are 32 pixels on each side. The bitmaps used in
the example are shown in Figure 17.2.</P>
<P><A NAME="02"></A><A HREF="02.htm"><B>Figure 17.2.</B></A> <I><BR>
The bitmaps used in the ImageList example are all the same size.</I></P>
<P>Create the three bitmaps, and name them as shown in Table 17.1.
<H4><FONT COLOR="#000077">Table 17.1. Bitmaps used in the ImageList project.</FONT></H4>
<P>
<TABLE BORDER="1">
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP"><B>ID</B></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><B>Description</B></TD>
</TR>
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP"><TT>IDB_CROSS</TT></TD>
<TD ALIGN="LEFT" VALIGN="TOP">Cross mark</TD>
</TR>
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP"><TT>IDB_CHECK</TT></TD>
<TD ALIGN="LEFT" VALIGN="TOP">Check mark</TD>
</TR>
<TR ALIGN="LEFT" rowspan="1">
<TD ALIGN="LEFT" VALIGN="TOP"><TT>IDB_BANG</TT></TD>
<TD ALIGN="LEFT" VALIGN="TOP">Exclamation point</TD>
</TR>
</TABLE>
</P>
<P>Storing a bitmap image in an image list consists of three steps:
<DL>
<DD>1. Load the bitmap.<BR>
<BR>
2. Create a new image index in the image list that contains a copy of the bitmap.<BR>
<BR>
3. Delete the bitmap object.
</DL>
<P>The bitmap object is deleted because the image list makes a copy of the bitmap
and stores the image internally. As a rule of thumb, any time a Windows GDI object
is loaded, it should be deleted to prevent memory leaks. The preceding steps are
handled by <TT>AddBitmapToImageList</TT>, a new function added to the <TT>CImageListView</TT>
class. Add the function provided in Listing 17.1 to the <TT>ImageListView.cpp</TT>
source file.
<H4><FONT COLOR="#000077">TYPE: Listing 17.1. The CImageListView::AddBitmapToImageList
function.</FONT></H4>
<PRE><FONT COLOR="#0066FF"><TT>BOOL CImageListView::AddBitmapToImageList( UINT nResourceID )</TT>
<TT>{</TT>
<TT> BOOL bReturn;</TT>
<TT> CBitmap bmp;</TT>
<TT> bReturn = bmp.LoadBitmap( nResourceID );</TT>
<TT> if( bReturn != FALSE )</TT>
<TT> {</TT>
<TT> int nReturn = m_imageList.Add( &bmp, RGB(255,255,255) );</TT>
<TT> bmp.DeleteObject();</TT>
<TT> }</TT>
<TT> return bReturn;</TT>
</FONT></PRE>
<P><TT>}</TT> The <TT>AddBitmapToImageList</TT> function is used because three bitmap
resources are added to the image list. Adding the bitmaps using a new member function
reduces the amount of code you must write and helps reduce the chance of errors,
because every bitmap is loaded using the same function.</P>
<P>The <TT>CImageList::Add</TT> member function is used to add an image to the image
list. The version of <TT>Add</TT> used in Listing 17.1 takes two parameters:
<UL>
<LI>The address of the <TT>CBitmap</TT> image to be copied into the image list<BR>
<BR>
<LI>A <TT>COLORREF</TT> value that represents the background color of the bitmap
</UL>
<BLOCKQUOTE>
<P>
<HR>
<FONT COLOR="#000077"><B>Time Saver:</B></FONT><B> </B>The background color is used
when drawing transparent images using masked bitmaps. If you aren't using a masked
image list, the <TT>COLORREF</TT> value is ignored.
<HR>
</BLOCKQUOTE>
<P>After adding the member function to the <TT>ImageListView.cpp</TT> file, add the
source code from Listing 17.2 to the <TT>CImageListView</TT> class, found in the
file <TT>ImageListView.h</TT>. Add the source code in the class implementation section,
which is marked by the <TT>// Implementation</TT> comment. After the comment, there
is a <TT>protected:</TT> label inserted by AppWizard for user- supplied variables
and functions.
<H4><FONT COLOR="#000077">TYPE: Listing 17.2. Source code to be added to the CImageListView
class.</FONT></H4>
<PRE><FONT COLOR="#0066FF"><TT>protected:</TT>
<TT> BOOL AddBitmapToImageList( UINT nResourceID );</TT>
</FONT></PRE>
<P><TT>CImageList m_imageList;</TT> The actual work of creating the image list is
done when the view is constructed. The image list can be built at any time; however,
it is costly to create an image list in terms of computing power. Creating the image
list in the constructor lets you build it once, rather than each time it is used.
Add the source code from Listing 17.3 to the constructor for <TT>CImageViewList</TT>.
<H4><FONT COLOR="#000077">TYPE: Listing 17.3. The CImageListView constructor.</FONT></H4>
<PRE><FONT COLOR="#0066FF"><TT>CImageListView::CImageListView()</TT>
<TT>{</TT>
<TT> m_imageList.Create( 32, 32, TRUE, 3, 1 );</TT>
<TT> AddBitmapToImageList( IDB_CROSS );</TT>
<TT> AddBitmapToImageList( IDB_CHECK );</TT>
<TT> AddBitmapToImageList( IDB_BANG );</TT>
</FONT></PRE>
<P><TT>}</TT> The image list is created using one of the <TT>CImageList::Create</TT>
functions. This version of <TT>Create</TT> is useful when an image list is used as
a bitmap collection; I use other versions of <TT>Create</TT> in the following chapters.
This version of <TT>Create</TT> has five parameters:
<UL>
<LI>The height of each bitmap; in this case, 32 pixels<BR>
<BR>
<LI>The width of each bitmap; in this case, 32 pixels<BR>
<BR>
<LI>Whether or not the image list is masked for transparency; in this case, <TT>TRUE</TT><BR>
<BR>
<LI>The number of bitmaps stored initially in the image list; in this case, three<BR>
<BR>
<LI>The "grow-by," or the number of bitmaps added when the image list is
expanded; in this case, one
</UL>
<P><FONT COLOR="#000077"><B>New Term:</B></FONT><B> </B>A <I>masked image list</I>
is an image list that contains two bitmaps for each image--the second bitmap is a
mask that is used when drawing transparent images. Parts of the image that are visible
are colored black in the mask, parts that are transparent are colored white in the
mask.
<H3><FONT COLOR="#000077"><B>Displaying an Image List Using the <TT>CImageList::Draw</TT>
Function</B></FONT></H3>
<P>Individual items stored in an image list can be drawn using the <TT>CImageList::Draw</TT>
member function, as shown in Listing 17.4.
<H4><FONT COLOR="#000077">TYPE: Listing 17.4. Using CImageList::Draw to display a
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -