本文介绍了Windows环境下基本图形绘制方法，包括直线、矩形、椭圆等几何图形的绘制过程及贝塞尔曲线的使用技巧。
Windows可以画直线、椭圆线（椭圆圆周上的曲线）和贝塞尔曲线。
- LineTo 画直线。
- Polyline和PolylineTo 画一系列相连的直线。
- PolyPolyline 画多组相连的线。
- Arc 画椭圆线。
- PolyBezier和PolyBezierTo 画贝塞尔曲线。
- ArcTo和AngleArc 画椭圆线。
- PolyDraw 画一系列相连的线以及贝塞尔曲线。
- Rectangle 画矩形。
- Ellipse 画椭圆。
- RoundRect 画带圆角的矩形。
- Pie 画椭圆的一部分，使其看起来像一个扇形。
- Chord 画椭圆的一部分，以呈弓形。
一、画直线
画一条直线，必须呼叫两个函数。第一个函数指定了线的开始点，第二个函数指定了线的终点：
MoveToEx (hdc, xBeg, yBeg, NULL) ;
LineTo (hdc, xEnd, yEnd) ;
如果您需要目前位置，就可以通过以下呼叫获得：
GetCurrentPositionEx (hdc, &pt) ;其中，pt是POINT结构的。如果你要知道当前窗体的大小，可以通过以下呼叫获得：
GetClientRect (hwnd, &rect) ; 其中，rect是RECT结构的。
二、画矩形：
Rectangle (hdc, xLeft, yTop, xRight, yBottom) ;点(xLeft, yTop)是矩形的左上角，(xRight, yBottom)是矩形的右下角。用函数Rectangle画出的图形如下所示，矩形的边总是平行于显示器的水平和垂直边。
使用Rectangle函数画出的图形
考虑下面的函数呼叫：
Rectangle (hdc, 1, 1, 5, 4) ;可以将显示器想象成一个网格，其中，每个图素都在一个网格单元内。边界框画在网格上，然后在边界框内画矩形，下面说明了图形画出来时的样子：
将矩形和显示区域左上角分开的区域有l个图素宽。
三、画椭圆
Ellipse (hdc, xLeft, yTop, xRight, yBottom) ;
用Ellipse函数画出的图形如下所示（加上了虚线构成的边界框）。
|
用Ellipse函数画出的图形 |
四、画圆角矩形
函数使用与函数Rectangle及Ellipse函数相同的边界框，还包含另外两个参数：
RoundRect (hdc, xLeft, yTop, xRight, yBottom,
xCornerEllipse, yCornerEllipse) ;
用这个函数画出的图形如下所示。
|
用RoundRect函数画出的图形 |
Windows使用一个小椭圆来画圆角，这个椭圆的宽为xCornerEllipse，高为yCornerEllipse。可以想象这个小椭圆分为了四个部分，一个象限一个，每个刚好用在矩形的一个角上。xCornerEllipse和yCornerEllipse的值越大，角就越明显。如果xCornerEllipse等于xLeft与xRight的差，且yCornerEllipse等于yTop与yBottom的差，那么RoundRect函数将画出一个椭圆。
五、画椭圆
Arc、Chord和Pie函数都只要相同的参数：
Arc(hdc, xLeft, yTop, xRight, yBottom, xStart, yStart, xEnd, yEnd) ;
Chord (hdc, xLeft, yTop, xRight, yBottom, xStart, yStart, xEnd, yEnd) ;
Pie(hdc, xLeft, yTop, xRight, yBottom, xStart, yStart, xEnd, yEnd) ;
用Arc函数画出的线如图1所示；用Chord和Pie函数画出的线分别如图2和3所示。Windows用一条假想的线将(xStart, yStart)与椭圆的中心连接，从该线与边界框的交点开始，Windows按反时针方向，沿着椭圆画一条弧。Windows还用另一条假想的线将(xEnd，yEnd)与椭圆的中心连接，在该线与边界框的交点处，Windows停止画弧。
|
图1 Arc函数画出的线 |
|
图2 Chord函数画出的线 |
|
图3 Pie函数画出的线 |
对于Arc函数，这样就结束了。因为弧只是一条椭圆形的线而已，而不是一个填入区域。对于Chord函数，Windows连接弧线的端点。而对于Pie函数，Windows将弧的两个端点与椭圆的中心相连接。弦与扇形图的内部以目前画刷填入。
您可能不太明白在Arc、Chord和Pie函数中开始和结束位置的用法，为什么不简单地在椭圆的周在线指定开始和结束点呢？是的，您可以这么做，但是您将不得不算出这些点。Windows的方法在不要求这种精确性的条件下，却完成了相同的工作。
程序 LINEDEMO画一个矩形、一个椭圆、一个圆角矩形和两条线段，不过不是按这一顺序。程序表明了定义封闭区域的函数实际上对这些区域进行了填入，因为在椭圆后面的线被遮住了，结果如图LINEDEMO中所示。
程序 LINEDEMO
LINEDEMO.C
/*---------------------------------------------------------
LINEDEMO.C -- Line-Drawing Demonstration Program
(c) Charles Petzold, 1998
----------------------------------------------------------*/
#include <windows.h>
LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPARAM) ;
int WINAPI WinMain (HINSTANCE hInstance, HINSTANCE hPrevInstance,
PSTR szCmdLine, int iCmdShow)
{
static TCHAR szAppName[] = TEXT ("LineDemo") ;
HWND hwnd ;
MSG msg ;
WNDCLASS wndclass ;
wndclass.style = CS_HREDRAW | CS_VREDRAW ;
wndclass.lpfnWndProc= WndProc ;
wndclass.cbClsExtra = 0 ;
wndclass.cbWndExtra = 0 ;
wndclass.hInstance = hInstance ;
wndclass.hIcon = LoadIcon (NULL, IDI_APPLICATION) ;
wndclass.hCursor = LoadCursor (NULL, IDC_ARROW) ;
wndclass.hbrBackground= (HBRUSH) GetStockObject (WHITE_BRUSH) ;
wndclass.lpszMenuName= NULL ;
wndclass.lpszClassName= szAppName ;
if (!RegisterClass (&wndclass))
{
MessageBox (NULL, TEXT ("Program requires Windows NT!"),
szAppName, MB_ICONERROR) ;
return 0 ;
}
hwnd = CreateWindow (szAppName, TEXT ("Line Demonstration"),
WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, CW_USEDEFAULT,
CW_USEDEFAULT, CW_USEDEFAULT,
NULL, NULL, hInstance, NULL) ;
ShowWindow (hwnd, iCmdShow) ;
UpdateWindow (hwnd) ;
while (GetMessage (&msg, NULL, 0, 0))
{
TranslateMessage (&msg) ;
DispatchMessage (&msg) ;
}
return msg.wParam ;
}
LRESULT CALLBACK WndProc (HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
{
static int cxClient, cyClient ;
HDC hdc ;
PAINTSTRUCT ps ;
switch (message)
{
case WM_SIZE:
cxClient = LOWORD (lParam) ;
cyClient = HIWORD (lParam) ;
return 0 ;
case WM_PAINT:
hdc = BeginPaint (hwnd, &ps) ;
Rectangle (hdc, cxClient / 8, cyClient / 8,
7 * cxClient / 8, 7 * cyClient / 8) ;
MoveToEx (hdc, 0, 0, NULL) ;
LineTo (hdc, cxClient, cyClient) ;
MoveToEx (hdc, 0, cyClient, NULL) ;
LineTo (hdc, cxClient, 0) ;
Ellipse (hdc, cxClient / 8, cyClient / 8,
7 * cxClient / 8, 7 * cyClient / 8) ;
RoundRect (hdc, cxClient / 4, cyClient / 4,
3 * cxClient / 4, 3 * cyClient / 4,
cxClient / 4, cyClient / 4) ;
EndPaint (hwnd, &ps) ;
return 0 ;
case WM_DESTROY:
PostQuitMessage (0) ;
return 0 ;
}
return DefWindowProc (hwnd, message, wParam, lParam) ;
}
|
图 LINEDEMO显示 |
六、贝塞尔曲线
「曲尺」这个词从前指的是一片木头、橡皮或者金属，用来在纸上画曲线。比如说，如果您有一些不同图点，您想要在它们之间画一条曲线（内插或者外插），您首先将这些点描在绘图纸上，然后，将曲尺定在这些点上，并用铅笔沿着曲尺绕着这些点弯曲的方向画曲线。
当然，时至今日，曲尺已经数学公式化了。有很多种不同的曲尺公式，它们各有千秋。贝塞尔曲线是计算机程序设计中用得最广的曲尺公式之一，它是直到最近才加到操作系统层次的图形支持中的。在六十年代Renault汽车公司进行了由手工设计车体（要用到粘土）到计算机辅助设计的转变。他们需要一些数学工具，而Pierm Bezier找到了一套公式，最后显示出这套公式应付这样的工作非常有用。
此后，二维的贝塞尔曲线成了计算机图学中最有用的曲线（在直线和椭圆之后）。在PostScript中，所有曲线都用贝塞尔曲线表示－椭圆线用贝塞尔曲线来逼近。贝塞尔曲线也用于定义PostScript字体的字符轮廓（TrueType使用一种更简单更快速的曲尺公式）。
一条二维的贝塞尔曲线由四个点定义－两个端点和两个控制点。曲线的端点在两个端点上，控制点就好像「磁石」一样把曲线从两个端点间的直线处拉走。这一点可以由底下的BEZIER互动交谈程序做出最好的展示。
程序 BEZIER
BEZIER.C
/*-----------------------------------------------------------------------
BEZIER.C -- Bezier Splines Demo
(c) Charles Petzold, 1998
------------------------------------------------------------------------*/
#include <windows.h>
LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPARAM) ;
int WINAPI WinMain (HINSTANCE hInstance, HINSTANCE hPrevInstance,
PSTR szCmdLine, int iCmdShow)
{
static TCHAR szAppName[] = TEXT ("Bezier") ;
HWND hwnd ;
MSG msg ;
WNDCLASS wndclass ;
wndclass.style = CS_HREDRAW | CS_VREDRAW ;
wndclass.lpfnWndProc= WndProc ;
wndclass.cbClsExtra = 0 ;
wndclass.cbWndExtra = 0 ;
wndclass.hInstance = hInstance ;
wndclass.hIcon = LoadIcon (NULL, IDI_APPLICATION) ;
wndclass.hCursor = LoadCursor (NULL, IDC_ARROW) ;
wndclass.hbrBackground= (HBRUSH) GetStockObject (WHITE_BRUSH) ;
wndclass.lpszMenuName= NULL ;
wndclass.lpszClassName= szAppName ;
if (!RegisterClass (&wndclass))
{
MessageBox (NULL, TEXT ("Program requires Windows NT!"),
szAppName, MB_ICONERROR) ;
return 0 ;
}
hwnd = CreateWindow (szAppName, TEXT ("Bezier Splines"),
WS_OVERLAPPEDWINDOW,
CW_USEDEFAULT, CW_USEDEFAULT,
CW_USEDEFAULT, CW_USEDEFAULT,
NULL, NULL, hInstance, NULL) ;
ShowWindow (hwnd, iCmdShow) ;
UpdateWindow (hwnd) ;
while (GetMessage (&msg, NULL, 0, 0))
{
TranslateMessage (&msg) ;
DispatchMessage (&msg) ;
}
return msg.wParam ;
}
void DrawBezier (HDC hdc, POINT apt[])
{
PolyBezier (hdc, apt, 4) ;
MoveToEx (hdc, apt[0].x, apt[0].y, NULL) ;
LineTo (hdc, apt[1].x, apt[1].y) ;
MoveToEx (hdc, apt[2].x, apt[2].y, NULL) ;
LineTo (hdc, apt[3].x, apt[3].y) ;
}
LRESULT CALLBACK WndProc (HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
{
static POINT apt[4] ;
HDC hdc ;
int cxClient, cyClient ;
PAINTSTRUCT ps ;
switch (message)
{
case WM_SIZE:
cxClient = LOWORD (lParam) ;
cyClient = HIWORD (lParam) ;
apt[0].x = cxClient / 4 ;
apt[0].y = cyClient / 2 ;
apt[1].x = cxClient / 2 ;
apt[1].y = cyClient / 4 ;
apt[2].x = cxClient / 2 ;
apt[2].y = 3 * cyClient / 4 ;
apt[3].x = 3 * cxClient / 4 ;
apt[3].y = cyClient / 2 ;
return 0 ;
case WM_LBUTTONDOWN:
case WM_RBUTTONDOWN:
case WM_MOUSEMOVE:
if (wParam & MK_LBUTTON || wParam & MK_RBUTTON)
{
hdc = GetDC (hwnd) ;
SelectObject (hdc, GetStockObject (WHITE_PEN)) ;
DrawBezier (hdc, apt) ;
if (wParam & MK_LBUTTON)
{
apt[1].x = LOWORD (lParam) ;
apt[1].y = HIWORD (lParam) ;
}
if (wParam & MK_RBUTTON)
{
apt[2].x = LOWORD (lParam) ;
apt[2].y = HIWORD (lParam) ;
}
SelectObject (hdc, GetStockObject (BLACK_PEN)) ;
DrawBezier (hdc, apt) ;
ReleaseDC (hwnd, hdc) ;
}
return 0 ;
case WM_PAINT:
InvalidateRect (hwnd, NULL, TRUE) ;
hdc = BeginPaint (hwnd, &ps) ;
DrawBezier (hdc, apt) ;
EndPaint (hwnd, &ps) ;
return 0 ;
case WM_DESTROY:
PostQuitMessage (0) ;
return 0 ;
}
return DefWindowProc (hwnd, message, wParam, lParam) ;
}
这个程序来实验性地操纵贝塞尔曲线。在这个程序中，两个顶点设定在显示区域的上下居中、左右位于1/4和3/4处的位置；两个控制点可以改变，按住鼠标左键或右键并拖动鼠标可以分别改动两个控制点之一。这是一个典型的例子。
除了贝塞尔曲线本身，程序还从第一个控制点向左边的第一个端点（也叫做开始点）画一条直线，并从第二个控制点向右边的端点画一条直线。
由于下面几个特点，贝塞尔曲线在计算机辅助设计中非常有用。首先，经过少量练习，就可以把曲线调整到与想要的形状非常接近。
|
图 BEZIER程序的显示 |
其次，贝塞尔曲线非常好控制。对于有的曲尺种类来说，曲线不经过任何一个定义该曲线的点。贝塞尔曲线总是由其两个端点开始和结束的（这是在推导贝塞尔公式时所做的假设之一）。另外，有些形式的曲尺公式有奇异点，在这些点处曲线趋向无穷远，这在计算机辅助设计中通常是很不合适的。事实上，贝塞尔曲线总是受限于一个四边形（叫做「凸包」），这个四边形由端点和控制点连接而成。
第三个特点涉及端点和控制点之间的关系。曲线总是与第一个控制点到起点的直线相切，并保持同一方向；同时，也与第二个控制点到终点的直线相切，并保持同一方向。这是用于推导贝塞尔公式时所做的另外两个假设。
第四，贝塞尔曲线通常比较具有美感。我知道这是一个主观评价的问题，不过，并非只有我才这样想。
在32位的Windows版本之前，您必须利用Polyline来自己建立贝塞尔曲线，并且还需要知道下面的贝塞尔曲线的参数方程。起点是( x0,y0)，终点是( x3,y3)，两个控制点是(x1,y1)和(x2,y2)，随着t的值从0到1的变化，就可以画出曲线：
x(t) = (1 - t)3 x0 + 3t (1 - t)2 x1 + 3t2 (1 - t) x2 + t3 x3
y(t) = (1 - t)3 y0 + 3t (1 - t)2 y1 + 3t2 (1 - t) y2 + t3 y3
在Windows 98中，您不需要知道这些公式。要画一条或多条连接的贝塞尔曲线，只需呼叫：
PolyBezier (hdc, apt, iCount) ;
或
PolyBezierTo (hdc, apt, iCount) ;
两种情况下，apt都是POINT结构的数组。对PolyBezier，前四个点（按照顺序）给出贝塞尔曲线的起点、第一个控制点、第二个控制点和终点。此后的每一条贝塞尔曲线只需给出三个点，因为后一条贝塞尔曲线的起点就是前一条贝塞尔曲线的终点，如此类推。iCount参数等于1加上您所绘制的这些首尾相接曲线条数的三倍。
PolyBezierTo函数使用目前点作为第一个起点，第一条以及后续的贝塞尔曲线都只需要给出三个点。当函数传回时，目前点设定为最后一个终点。
一点提示：在画一系列相连的贝塞尔曲线时，只有当第一条贝塞尔曲线的第二个控制点、第一条贝塞尔曲线的终点（也就是第二条曲线的起点）和第二条贝塞尔曲线的第一个控制点线性相关时，也就是说这三个点在同一条直线上时，曲线在连接点处才是光滑的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
