ch17.htm

VC使用大全。里面集合了VC使用的各种使用技巧。非常有用。

<P>Instead of hard-coding the start value to 3, call <font color="#008000">Roll()</font> to determine a random value. Change the call to <font color="#008000">PX_Short()</font> so that it reads as follows:</P>

<pre><font color="#008000">PX_Short( pPX, &quot;Number&quot;, m_number, Roll());</font></pre>

<P>Build and test the control again in the test container. As you click the control, the displayed number should change with each click. Play around with it a little: Do you ever see a number less than 1 or more than 6? Any surprises at all?</P>

<H3><B>A Better User Interface</B></H3>

<P>Now that the basic functionality of the die-roll control is in place, it's time to neaten it a little. It needs an icon, and it needs to display dots instead of a single digit.</P>

<P><B>A Bitmap Icon</B></P>

<P>Because some die-roll control users might want to add this control to the Control Palette in Visual Basic or Visual C++, you should have an icon to represent it. Actually, AppWizard has already created one, but it is simply an MFC logo that doesn't 
represent your control in particular. You can create a more specialized one with Developer Studio. Click the ResourceView tab of the Project Workspace window, click the + next to Bitmap, and double-click <font color="#008000">IDB_DIEROLL</font>. You can 
now edit the bitmap one pixel at a time. Figure 17.10 shows an icon appropriate for a die. From now on, when you load the die-roll control into the test container, you will see your icon on the toolbar.</P>

<A HREF="Sfigs10.gif" tppabs="http://www.mcp.com/814147200/0-7897/0-7897-1145-1/figs/ch17/Sfigs10.gif"><b>Fig. 17.10</b></A>

<P><I>The ResourceView of Visual C++ allows you to build your own icon to be added </I><I>to the Control Palette in Visual Basic.</I></P>

<P><B>Displaying Dots</B></P>

<P>The next step in building this die-roll control is to make the control look like a die. A nice, three-dimensional effect with parts of some of the other sides showing is beyond the reach of an illustrative chapter like this one, but you can at least 
display a dot pattern.</P>

<P>The first step is to set up a <font color="#008000">switch</font> statement in <font color="#008000">OnDraw()</font>. Comment out the three drawing lines and then add the switch statement so that <font color="#008000">OnDraw()</font> looks like listing 
17.10.</P>

<P><I>Listing 17.10&#151;DierollCtl.cpp&#151;CDierollCtrl::OnDraw()</I></P>

<pre><font color="#008000">void CDierollCtrl::OnDraw(</font></pre>

<pre><font color="#008000">               CDC* pdc, const CRect&amp; rcBounds, const CRect&amp; rcInvalid)</font></pre>

<pre><font color="#008000">{</font></pre>

<pre><font color="#008000">     pdc-&gt;FillRect(rcBounds,</font></pre>

<pre><font color="#008000">         CBrush::FromHandle((HBRUSH)GetStockObject(WHITE_BRUSH)));</font></pre>

<pre><font color="#008000">//   CString val; //character representation of the short value</font></pre>

<pre><font color="#008000">//   val.Format(&quot;%i&quot;,m_number);</font></pre>

<pre><font color="#008000">//   pdc-&gt;ExtTextOut( 0, 0, ETO_OPAQUE, rcBounds, val, NULL );</font></pre>

<pre><font color="#008000">     switch(m_number)</font></pre>

<pre><font color="#008000">     {</font></pre>

<pre><font color="#008000">     case 1:</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">     case 2:</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">     case 3:</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">     case 4:</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">     case 5:</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">     case 6:</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">     }</font></pre>

<pre><font color="#008000">}</font></pre>

<P>Now all that remains is adding code to the <font color="#008000">case 1:</font> block that draws one dot, to the <font color="#008000">case 2:</font> block that draws two dots, and so on. If you happen to have a real die available to you, take a close 
look at it. The width of each dot is about one quarter of the width of the whole die's face. Dots near the edge are about one-sixteenth of the die's width from the edge. All the other rolls except 6 are contained within the layout for 5, anyway; for 
example, the single dot for 1 is in the same place as the central dot for 5.</P>

<P>The second parameter of <font color="#008000">OnDraw()</font>, <font color="#008000">rcBounds</font>, is a <font color="#008000">CRect</font> that describes the rectangle occupied by the control. It has member variables and functions that return the 
upper-left coordinates, width, and height of the control. The default code that AppWizard generated called <font color="#008000">CDC::Ellipse()</font>to draw an ellipse within that rectangle. Your code will call <font color="#008000">Ellipse()</font> too, 
passing a small rectangle within the larger rectangle of the control. Your code will be easier to read&#151;and will execute slightly faster&#151;if you work in units that are one-sixteenth of the total width or height. Each dot will be four units wide or 
high. Add the following code before the switch statement:</P>

<pre><font color="#008000">int Xunit = rcBounds.Width()/16;</font></pre>

<pre><font color="#008000">     int Yunit = rcBounds.Height()/16;</font></pre>

<pre><font color="#008000">     int Top = rcBounds.top;</font></pre>

<pre><font color="#008000">     int Left = rcBounds.left;</font></pre>

<P>Before drawing a shape by calling <font color="#008000">Ellipse()</font>, you need to select a tool with which to draw. Because your circles should be filled in, they should be drawn with a brush. This code creates a brush and tells the device context 
<font color="#008000">pdc</font> to use it, while saving a pointer to the old brush so that it can be restored later:</P>

<pre><font color="#008000">     CBrush Black;</font></pre>

<pre><font color="#008000">     Black.CreateSolidBrush(RGB(0x00,0x00,0x00)); //solid black brush</font></pre>

<pre><font color="#008000">     CBrush* savebrush = pdc-&gt;SelectObject(&amp;Black);</font></pre>

<P>After the switch statement, add this line to restore the old brush:</P>

<pre><font color="#008000">     pdc-&gt;SelectObject(savebrush);</font></pre>

<P>Now you're ready to add lines to those <font color="#008000">case</font> blocks to draw some dots. For example, rolls of 2, 3, 4, 5, or 6 all need a dot in the upper-left corner. This dot will be in a rectangular box that starts one unit to the right 
and down from the upper-left corner and extends five units right and down. The call to <font color="#008000">Ellipse</font> looks like this:</P>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+Xunit, Top+Yunit,</font></pre>

<pre><font color="#008000">                            Left+5*Xunit, Top + 5*Yunit);</font></pre>

<P>The coordinates for the other dots are determined similarly. The switch statement ends up as show in in Listing 17.11.</P>

<P><I>Listing 17.11&#151;DierollCtl.cpp&#151;CDierollCtrl::OnDraw()</I></P>

<pre><font color="#008000">switch(m_number)</font></pre>

<pre><font color="#008000">     {</font></pre>

<pre><font color="#008000">     case 1:</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+6*Xunit, Top+6*Yunit,</font></pre>

<pre><font color="#008000">                        Left+10*Xunit, Top + 10*Yunit); //center</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">     case 2:</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+Xunit, Top+Yunit,</font></pre>

<pre><font color="#008000">                        Left+5*Xunit, Top + 5*Yunit);   //upper left</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+11*Xunit, Top+11*Yunit,</font></pre>

<pre><font color="#008000">                        Left+15*Xunit, Top + 15*Yunit); //lower right</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">     case 3:</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+Xunit, Top+Yunit,</font></pre>

<pre><font color="#008000">                        Left+5*Xunit, Top + 5*Yunit);   //upper left</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+6*Xunit, Top+6*Yunit,</font></pre>

<pre><font color="#008000">                        Left+10*Xunit, Top + 10*Yunit); //center</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+11*Xunit, Top+11*Yunit,</font></pre>

<pre><font color="#008000">                        Left+15*Xunit, Top + 15*Yunit); //lower right</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">     case 4:</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+Xunit, Top+Yunit,</font></pre>

<pre><font color="#008000">                        Left+5*Xunit, Top + 5*Yunit);   //upper left</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+11*Xunit, Top+Yunit,</font></pre>

<pre><font color="#008000">                        Left+15*Xunit, Top + 5*Yunit);  //upper right</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+Xunit, Top+11*Yunit,</font></pre>

<pre><font color="#008000">                        Left+5*Xunit, Top + 15*Yunit);  //lower left</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+11*Xunit, Top+11*Yunit,</font></pre>

<pre><font color="#008000">                        Left+15*Xunit, Top + 15*Yunit); //lower right</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">     case 5:</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+Xunit, Top+Yunit,</font></pre>

<pre><font color="#008000">                        Left+5*Xunit, Top + 5*Yunit);   //upper left</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+11*Xunit, Top+Yunit,</font></pre>

<pre><font color="#008000">                        Left+15*Xunit, Top + 5*Yunit);  //upper right</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+6*Xunit, Top+6*Yunit,</font></pre>

<pre><font color="#008000">                        Left+10*Xunit, Top + 10*Yunit); //center</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+Xunit, Top+11*Yunit,</font></pre>

<pre><font color="#008000">                        Left+5*Xunit, Top + 15*Yunit);  //lower left</font></pre>

<pre><font color="#008000">          pdc-&gt;Ellipse(Left+11*Xunit, Top+11*Yunit,</font></pre>

<pre><font color="#008000">                        Left+15*Xunit, Top + 15*Yunit); //lower right</font></pre>

<pre><font color="#008000">          break;</font></pre>

<pre><font color="#008000">       case 6:</font></pre>

<pre><font color="#008000">               pdc-&gt;Ellipse(Left+Xunit, Top+Yunit,</font></pre>

<pre><font color="#008000">                Left+5*Xunit, Top + 5*Yunit);   //upper left</font></pre>

<pre><font color="#008000">               pdc-&gt;Ellipse(Left+11*Xunit, Top+Yunit,</font></pre>

<pre><font color="#008000">                Left+15*Xunit, Top + 5*Yunit);  //upper right</font></pre>

<pre><font color="#008000">               pdc-&gt;Ellipse(Left+Xunit, Top+6*Yunit,</font></pre>