📄 bitmap.html
字号:
<html>
<head>
<title>Bitmap</title>
<meta name="description" content="Reliable software Win32 Tutorial">
<meta name="keywords" content="bitmap, bitblt, windows, cplusplus">
</head>
<body background="../images/grid.gif" bgcolor="white" text="black">
<script language="JAVASCRIPT">
<!--
if (navigator.onLine){
document.write("<!-- Spidersoft WebZIP Ad Banner Insert -->");
document.write("<TABLE width=100% border=0 cellpadding=0 cellspacing=0>");
document.write("<TR>");
document.write("<TD>");
document.write("<ILAYER id=ad1 visibility=hidden height=60></ILAYER>");
document.write("<NOLAYER>");
document.write("<IFRAME SRC='http://www.spidersoft.com/ads/bwz468_60.htm' width=100% height=60 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></IFRAME>");
document.write("</NOLAYER>");
document.write("</TD>");
document.write("</TR>");
document.write("</TABLE>");
document.write("<!-- End of Spidersoft WebZIP Ad Banner Insert-->");
}
//-->
</script>
<table cellpadding=10 width=100%>
<tr>
<td width=100 align="center" valign="middle">
<a href="../index.htm">
<img src="../images/rsbullet.gif" alt="RS" border=0 width=39 height=39>
<p>Home</a>
</td>
<td><font face="arial" color="#00a080">
<h1 align=center>Bitmaps</h1>
</font>
</td>
</tr>
</table>
<table width=100%><!-- main table -->
<tr>
<td width=10> <!-- Left margin --> </td>
<td> <!-- Middle column, there is also the right margin at the end -->
<table cellpadding=10 cellspacing=0 width=100%>
<tr>
<td bgcolor=white>
<hr>
In this tutorial we'll learn how to load bitmaps from resources and from files, how to pass them around and blit them to the screen. We'll also see how to create and use an empty bitmap as a canvas, draw a picture on in and then blit it to the screen. Finally, we'll combine these techniques to write a simple program that uses double-buffering and timer messages to show a simple animation involving sprites.
<hr>
First of all, in most cases Windows provides storage for bitmaps and takes care of the formatting of bits. The programmer gets access to the bitmap through a handle, whose type is <font color="#009966">HBITMAP</font>. (Remember to set the <b>STRICT</b> flag when compiling Windows programs, to make sure <font color="#009966">HBITMAP</font> is a distinct type, rather than just a pointer to void.)
<p>Since a bitmap is a resource (in the <a href="../resource/index.htm">Resource Management</a> sense), the first step is to encapsulate it in a "strong pointer" type of interface. Notice the <i>transfer semantics</i> of the constructor and the overloaded assignment operator, characteristic of a resource that can have only one owner at a time.
<p>We instruct Windows to release the resources allocated to the bitmap by calling <font color="#000099"><b>DeleteObject</b></font>.
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width=100%>
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>class <font color="#cc0066"><b>Bitmap</b></font>
{
public:
Bitmap ()
: _hBitmap (0)
{}
// Transfer semantics
Bitmap (Bitmap & bmp)
: _hBitmap (bmp.Release ())
{}
void operator = (Bitmap & bmp)
{
Free ();
_hBitmap = bmp.Release ();
}
HBITMAP Release ()
{
HBITMAP h = _hBitmap;
_hBitmap = 0;
return h;
}
~Bitmap ()
{
Free ();
}
// implicit conversion for use with Windows API
operator <font color="#009966">HBITMAP</font> () { return _hBitmap; }
protected:
Bitmap (HBITMAP hBitmap)
: _hBitmap (hBitmap)
{}
void Free ()
{
if (_hBitmap)
::<font color="#000099"><b>DeleteObject</b></font> (_hBitmap);
}
HBITMAP _hBitmap;
};</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>
<p>Now that the management issues are out of the way, we can concentrate on loading bitmaps. The simplest way to include a bitmap in your program is to add it to the resource file. In the resource editor of your development environment you can create new bitmaps or import them from external files. You can either give them names (strings) or numerical ids. When you want to access such a bitmap in your program you have to load it from the resources. Here are two methods that do just that. You have to give them a handle to the program instance.
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width=100%>
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>void <font color="#cc0066"><b>Bitmap::Load</b></font> (HINSTANCE hInst, char const * resName)
{
Free ();
_hBitmap = (HBITMAP) ::<font color="#000099"><b>LoadImage</b></font> (hInst,
resName,
IMAGE_BITMAP, 0, 0, LR_CREATEDIBSECTION);
if (_hBitmap == 0)
throw WinException ("Cannot load bitmap from resources", resName);
}
void <font color="#cc0066"><b>Bitmap::Load</b></font> (HINSTANCE hInst, int id)
{
Free ();
_hBitmap = (HBITMAP) ::<font color="#000099"><b>LoadImage</b></font> (hInst,
MAKEINTRESOURCE (id),
IMAGE_BITMAP, 0, 0, LR_CREATEDIBSECTION);
if (_hBitmap == 0)
throw WinException ("Cannot load bitmap from resources");
}</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<p>Loading a bitmap directly from a file is also very simple and can be done using the same API, <font color="#000099"><b>LoadImage</b></font>. Remember, it will only work if the file is a Windows (or OS/2) bitmap--such files usually have the extension <b>.bmp</b>. There is no simple way of loading other types of graphics files, .gif, .jpg, .png, etc. You have to know their binary layout and decode them explicitly (there are other web sites that have this information).
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width=100%>
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>void <font color="#cc0066"><b>Bitmap::Load</b></font> (char * path)
{
Free ();
_hBitmap = (HBITMAP) ::<font color="#000099"><b>LoadImage</b></font> (0, path,
IMAGE_BITMAP, 0, 0, <b>LR_LOADFROMFILE</b>);
if (_hBitmap == 0)
throw WinException ("Cannot load bitmap from file", path);
}</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<p>Once you got hold of a bitmap, you may want to enquire about its dimensions. Here's how you do it.
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width=100%>
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>void <font color="#cc0066"><b>Bitmap::GetSize</b></font> (int & width, int & height)
{
<font color="#009966">BITMAP</font> bm;
::<font color="#000099"><b>GetObject</b></font> (_hBitmap, sizeof (bm), & bm);
width = bm.bmWidth;
height = bm.bmHeight;
}</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>
Finally, you might want to create an empty bitmap and fill it with your own drawings programmatically. You have to specify the dimensions of the bitmap and you have to provide a device context (Canvas) for which the bitmap is targeted. Windows will create a different type of bitmap when your target is a monochrome monitor or printer, and different when it's a graphics card set to True Color. Windows will create a bitmap that is <i>compatible</i> with the target device.
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width=100%>
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>Bitmap::Bitmap (Canvas & canvas, int dx, int dy)
: _hBitmap (0)
{
CreateCompatible (canvas, dx, dy);
}
void Bitmap::CreateCompatible (Canvas & canvas, int width, int height)
{
Free ();
_hBitmap = ::<font color="#000099"><b>CreateCompatibleBitmap</b></font> (canvas, width, height);
}</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>
<p>How do you display the bitmap on screen? You have to <i>blit</i> it. Blit stands for "block bit transfer" or something like that. When you blit a bitmap, you have to specify a lot of parameters, so we'll just encapsulate the blitting request in a separate object, the blitter. This is a very handy object that sets the obvious defaults for blitting, but at the same time lets you override each and any of them.
<p>A blitter transfers a rectangular area of the bitmap into a rectangular area of the screen. The meaning of various parameters is the following:
<ul>
<li>Source position: pixel coordinates of the upper left corner of the bitmap area, to be transfered. The default is the upper left corner of the bitmap.
<li>Destination position: pixel coordinates within the target window of the upper left corner of the transfered area. The default is upper left corner of the window.
<li>Area dimensions: the dimensions of the rectangular area to be transfered. The default is the dimensions of the bitmap.
<li>Transfer mode. The way bitmap pixels are combined with existing window piexels. The default, <font color="#009966">SRCCOPY</font>, copies the pixels over existing pixels. You may also specify more involved logical operations, like <font color="#009966">SRCAND</font> (Boolean AND), <font color="#009966">SRCPAINT</font> (Boolean OR), etc. (see your compiler's help on <font color="#000099"><b>BitBlt</b></font>).
</ul>
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width=100%>
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>class <font color="#cc0066"><b>Blitter</b></font>
{
public:
Blitter (Bitmap & bmp)
: _bmp (bmp), _mode (SRCCOPY),
_xDst (0), _yDst (0),
_xSrc (0), _ySrc (0)
{
bmp.GetSize (_width, _height);
}
void SetMode (DWORD mode)
{
_mode = mode;
}
void SetDest (int x, int y)
{
_xDst = x;
_yDst = y;
}
void SetSrc (int x, int y)
{
_xSrc = x;
_ySrc = y;
}
void SetArea (int width, int height)
{
_width = width;
_height = height;
}
// transfer bitmap to canvas
void BlitTo (Canvas & canvas);
private:
Bitmap & _bmp;
int _xDst, _yDst;
int _xSrc, _ySrc;
int _width, _height;
DWORD _mode;
};</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<p>The BlitTo method performs the transfer from the bitmap to the window (or printer) as described by its Canvas.
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width=100%>
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>void Blitter::BlitTo (Canvas & canvas)
{
// Create canvas in memory using target canvas as template
MemCanvas memCanvas (canvas);
// Convert bitmap to the format appropriate for this canvas
memCanvas.SelectObject (_bmp);
// Transfer bitmap from memory canvas to target canvas
::<font color="#000099"><b>BitBlt</b></font> (canvas, _xDst, _yDst, _width, _height,
memCanvas, _xSrc, _ySrc, _mode);
}</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<p>The API, <font color="#000099"><b>BitBlt</b></font>, transfers bits from one device to another. That's why we have to set up a fake source device. This "memory canvas" is based on the actual canvas--in this case we use target canvas as a template. So, for instance, if the target canvas describes a True Color device, our MemCanvas will also behave like a True Color device. In particular, when our bitmap is <i>selected</i> into it, it will be converted to True Color, even if initially it was a monochrome or a 256-color bitmap.
<hr>
<p>The simplest program that loads and displays a bitmap might look something like this: There is a View object that contains a bitmap (I assume that the file "picture.bmp" is located in the current directory). It blits it to screen in the Paint method.
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width=100%>
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>class <font color="#cc0066"><b>View</b></font>
{
public:
View ()
{
_background.Load ("picture.bmp");
}
void Paint (Canvas & canvas)
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -