ch17.htm

Visual C++ 的学习资料 Visual C++ 的学习资料

bitmap from an image list.</FONT></H4>
<PRE><FONT COLOR="#0066FF"><TT>void CImageListView::OnDraw(CDC* pDC)</TT>
<TT>{</TT>
<TT>    CPoint ptImage( 0, 0 );</TT>
<TT>    for( int nImage = 0; nImage &lt; 3; nImage++ )</TT>
<TT>    {</TT>
<TT>        m_imageList.Draw( pDC, nImage, ptImage, ILD_NORMAL );</TT>
<TT>        ptImage.x += 50;</TT>
<TT>    }</TT>
</FONT></PRE>
<P><TT>}</TT> The <TT>Draw</TT> member function has four parameters:

<UL>
	<LI>The device context that represents the drawing surface<BR>
	<BR>
	
	<LI>The image list index of the image to be drawn<BR>
	<BR>
	
	<LI>The location of the image, represented by a <TT>CPoint</TT> object<BR>
	<BR>
	
	<LI>The type of drawing operation to be performed
</UL>

<P>Compile and run the ImageList project. Figure 17.3 shows the current version of
the ImageList application running.</P>
<P><A NAME="03"></A><A HREF="03.htm"><B>Figure 17.3.</B> </A><I><BR>
Using <TT>ILD_NORMAL</TT> to display the contents of the image list.</I></P>
<P>There are eight different types of drawing operations:

<UL>
	<LI><TT>ILD_NORMAL</TT> draws the image directly onto the drawing surface. If the
	image is masked, the image will be drawn transparently if the background color for
	the image list is the default value of <TT>CLR_NONE</TT>.<BR>
	<BR>
	
	<LI><TT>ILD_TRANSPARENT</TT> draws the image transparently. If the image is not masked,
	the image is drawn normally.<BR>
	<BR>
	
	<LI><TT>ILD_MASK</TT> draws the image mask. If the image list doesn't have a mask,
	the image is drawn normally.<BR>
	<BR>
	
	<LI><TT>ILD_BLEND25</TT> draws the image and blends it 25 percent with the system
	highlight color. If the image list doesn't have a mask, the image is drawn normally.<BR>
	<BR>
	
	<LI><TT>ILD_FOCUS</TT> is identical to <TT>ILD_BLEND25</TT>.<BR>
	<BR>
	
	<LI><TT>ILD_BLEND50</TT> draws the image and blends it 50 percent with the system
	highlight color. If the image list doesn't have a mask, the image is drawn normally.<BR>
	<BR>
	
	<LI><TT>ILD_BLEND</TT> is identical to <TT>ILD_BLEND50</TT>.<BR>
	<BR>
	
	<LI><TT>ILD_SELECTED</TT> is identical to <TT>ILD_BLEND50</TT>.
</UL>

<P>Figure 17.4 shows the image list items drawn using the <TT>ILD_MASK</TT> style.
This allows you to see the image mask generated by the image list.</P>
<P><A NAME="04"></A><A HREF="04.htm"><B>Figure 17.4.</B></A> <I><BR>
Image list items mask drawn using <TT>ILD_MASK</TT>.</I></P>
<P>The individual image bitmaps stored in an image list can also be extracted as
icons using the <TT>ExtractIcon</TT> member function:</P>
<PRE><FONT COLOR="#0066FF"><TT>HICON hicon = m_imageList.ExtractIcon( nImage );</TT>
</FONT></PRE>
<P>The only parameter needed for <TT>ExtractIcon</TT> is the image index. You can
then use the icon extracted just like any icon handle. Icons were discussed in Hour
14, &quot;Icons and Cursors.&quot;
<H3><FONT COLOR="#000077"><B>Displaying a Transparent Image</B></FONT></H3>
<P>There are two methods you can use to display an image transparently:

<UL>
	<LI>Define a background color for the images stored in the image list.<BR>
	<BR>
	
	<LI>Use the <TT>ILD_TRANSPARENT</TT> flag for the draw operation.
</UL>

<H4><FONT COLOR="#000077">Using a Background Color</FONT></H4>
<P>A simple method for drawing a transparent image is to define the background color
that is used on the image background. The background color of the image list will
then be adjusted to match the surface background color, allowing the drawing surface
to &quot;shine through,&quot; giving the image a transparent effect. Replace the
<TT>CImageList::OnDraw</TT> function with the code provided in Listing 17.5, and
then recompile and run the ImageList program.
<H4><FONT COLOR="#000077">TYPE: Listing 17.5. Using the CImageList::Draw function
to display a bitmap transparently.</FONT></H4>
<PRE><FONT COLOR="#0066FF"><TT>void CImageListView::OnDraw(CDC* pDC)</TT>
<TT>{</TT>
<TT>    m_imageList.SetBkColor( RGB(0,255,0) );</TT>
<TT>    CPoint ptImage( 0, 0 );</TT>
<TT>    for( int nImage = 0; nImage &lt; 3; nImage++ )</TT>
<TT>    {</TT>
<TT>        m_imageList.Draw( pDC, nImage, ptImage, ILD_NORMAL);</TT>
<TT>        ptImage.x += 50;</TT>
<TT>    }</TT>
</FONT></PRE>
<P><TT>}</TT> If you compile and run the ImageList project, the background of the
images will be set to green. By changing the <TT>RGB</TT> <TT>COLORREF</TT> value
passed to the <TT>CImageList::SetBkColor</TT> function, you can match any background
color.
<H4><FONT COLOR="#000077">Using the ILD_TRANSPARENT Flag</FONT></H4>
<P>Another transparent drawing method is to use the <TT>ILD_TRANSPARENT</TT> flag
when <TT>CImageList::Draw</TT> is called. This tells the image list to combine the
image mask with the bitmap, if a mask exists. If the image list is not masked, the
image is drawn as if <TT>ILD_NORMAL</TT> was used.
<H3><FONT COLOR="#000077"><B>Displaying an Overlapped Image</B></FONT></H3>
<P>An overlapped image is two images from the same bitmap, with one image superimposed
on the other. Before using an image as an overlay, it must be defined as an overlay
image. You can define up to four bitmaps per image list as overlays using the <TT>CImageList::SetOverlayImage</TT>
function:</P>
<PRE><FONT COLOR="#0066FF"><TT>m_imageList.SetOverlayImage( 0, 1 );</TT>
</FONT></PRE>
<P>The <TT>SetOverlayImage</TT> function takes two parameters: the image index used
as the overlay, and the overlay index used to identify the overlay.


<BLOCKQUOTE>
	<P>
<HR>
<B> </B><FONT COLOR="#000077"><B>Just a Minute:</B></FONT><B> </B>Just to make things
	more interesting, unlike almost every other index used in Windows, the overlay index
	starts at one instead of zero. 
<HR>


</BLOCKQUOTE>

<P>To use an overlaid image, the <TT>CImageList::Draw</TT> function is used as in
previous examples, except that the <TT>ILD_OVERLAYMASK</TT> flag is used. The <TT>INDEXTOOVERLAYMASK</TT>
macro is combined with the <TT>ILD_OVERLAYMASK</TT> flag to specify the overlay image
index to be combined with the base image. Listing 17.6 is a new version of <TT>OnDraw</TT>
that displays an overlaid image using an image list.
<H4><FONT COLOR="#000077">TYPE: Listing 17.6. Using the CImageList::Draw function
to display an overlapped image.</FONT></H4>
<PRE><FONT COLOR="#0066FF"><TT>void CImageListView::OnDraw(CDC* pDC)</TT>
<TT>{</TT>
<TT>    m_imageList.SetBkColor( CLR_NONE );</TT>
<TT>    CPoint ptOverlay( 50, 80 );</TT>
<TT>    m_imageList.SetOverlayImage( 0, 1 );</TT>
<TT>    m_imageList.Draw( pDC,</TT>
<TT>                      2,</TT>
<TT>                      ptOverlay,</TT>
<TT> INDEXTOOVERLAYMASK(1) );</TT>
<TT>}</TT></FONT></PRE>
<H2><FONT COLOR="#000077"><B>Summary</B></FONT></H2>
<P>In this chapter, you learned about image lists, a convenient way to display images
in a Windows program. You used image lists to draw a series of bitmaps that were
opaque, transparent, or overlaid with a second image.
<H2><FONT COLOR="#000077"><B>Q&amp;A</B></FONT></H2>

<DL>
	<DD><B>Q I have a bitmap that has a white background color, and also uses white in
	the bitmap. How can I draw the background transparently and still draw the white
	parts of the bitmap?</B><BR>
	<BR>
	<B>A</B> Use the bitmap image mask instead of the color mask. One version of the
	<TT>CImageList::Add</TT> member function allows you to add two bitmaps to the image
	list:
</DL>



<BLOCKQUOTE>
	<PRE><FONT COLOR="#0066FF"><TT>nReturn = m_imageList.Add( &amp;bmpImage, &amp;bmpMask );</TT></FONT></PRE>

</BLOCKQUOTE>

<PRE><FONT COLOR="#0066FF"><TT></TT></FONT></PRE>

<DL>
	<DD>The second bitmap is a mask bitmap. The parts of the image bitmap that correspond
	to black pixels on the mask bitmap will be drawn. The parts of the image bitmap that
	correspond to white pixels will be transparent in the final image.<BR>
	<BR>
	<B>Q How can I store an icon image in an image list?</B><BR>
	<BR>
	<B>A</B> A version of the <TT>CImageList::Add</TT> member function accepts an icon
	handle:
</DL>



<BLOCKQUOTE>
	<PRE><FONT COLOR="#0066FF"><TT>nReturn = m_imageList.Add( hIcon );</TT></FONT></PRE>

</BLOCKQUOTE>

<PRE><FONT COLOR="#0066FF"><TT></TT></FONT></PRE>
<H2><FONT COLOR="#000077"><B>Workshop</B></FONT></H2>
<P>The Workshop is designed to help you anticipate possible questions, review what
you've learned, and begin thinking ahead to putting your knowledge into practice.
The answers to the quiz are in Appendix B, &quot;Quiz Answers.&quot;
<H3><FONT COLOR="#000077"><B>Quiz</B></FONT></H3>

<DL>
	<DD>1. What are the two basic types of image lists?<BR>
	<BR>
	2. Why would you want to have a &quot;grow-by&quot; parameter greater than one when
	creating an image list?<BR>
	<BR>
	3. What is a transparent image?<BR>
	<BR>
	4. The color mask is passed as a parameter when adding a bitmap image to the image
	list. What is the color mask used for?<BR>
	<BR>
	5. What drawing style is used to draw the mask for a transparent image?<BR>
	<BR>
	6. What are the drawing styles that begin with <TT>ILD_BLEND</TT> used for?<BR>
	<BR>
	7. After a bitmap has been added to the image list, are you required to destroy the
	bitmap object or will the image list destroy it for you?<BR>
	<BR>
	8. What is an overlapped image?
</DL>

<H3><FONT COLOR="#000077"><B>Exercises</B></FONT></H3>

<DL>
	<DD>1. Use an overlay image to combine two images.<BR>
	<BR>
	2. Experiment by using the <TT>Draw</TT> function with the <TT>ILD_BLENDxx</TT> values
	to see how the system highlight color is combined with different types of images.<FONT
	COLOR="#000077"></FONT>
</DL>

<CENTER>
<P>
<HR>
<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> <BR>
<BR>
<BR>
<IMG SRC="../button/corp.gif" WIDTH="284" HEIGHT="45" ALIGN="BOTTOM" ALT="Macmillan Computer Publishing USA"
BORDER="0"></P>

<P>&copy; <A HREF="../copy.htm">Copyright</A>, Macmillan Computer Publishing. All
rights reserved.
</CENTER>


</BODY>

</HTML>