七巧板 Chi7ren V0.1

Chi7ren
Version 0.1

    著名哲学家伯利克里：”一个有思想，但是不能表达的人，如同自己没有思想。“

前言 ：
    前阵子看《COM技术内幕》，知道提供的最后一个程序是“七巧板”程序，当时看前几章的时候也很期待，那个Tangram程序会是怎么样的？看了介绍好像还有GDI版和OpenGL版，可以选择。甚是期待，但也是一直没去编译提供的源代码，只是按每一章的代码，去一章一章的去实现，想按“顺序”很自然的到最后一章，可以揭开它的“神秘面纱”。
     有一天，我觉得我应该看看到底是个怎么样的“七巧板”了，以为很酷很帅的。就开始去编译源代码，结果遇到了点小麻烦，还好网上搜了下，还是把一个个错误给解决了。直到编译通过，生成EXE了。打开一看，啊，太失望了。不管是GDI,还是OpenGL都是那么“难看”。但是想想，《COM技术内幕》当然是讲COM为主啦，至于最后的Tnagram也只是对所有COM知识的一次汇总，但是具体代码没去研究，觉得还是很神奇。毕竟看了《COM技术内幕》还是有很大的收获，不过忘了做点笔记，想想看书还是得做点笔记好，以后可以翻阅，有据可查。
     一直也想写个小游戏，可一直不知道该写什么，又想把看《Windows程序设计》的过程中能写点东西，加深对Windows SDK编程的理解，特别是消息机制的理解。还有就是家里可爱的小外甥，小外甥女，如果做的好的话，能给他们玩“舅舅做的游戏”，也是很酷的一件事。又觉得自己一直在看书，想问题，却很少动手写点东西，实践动手编程的能力实在有待提高。基于以上几点，“Chi7ren”(“七小孩”自己取的代号)就开始了...

    有的时候，想是一回事，做又是一回事，写代码又是另一回事！

开发：

 图形结构：
    先把“七小孩”给画出来吧。我把坐标都定死了，我的设想应该是按客户区的大小是可以伸缩的，这也是一个验证的过程，不管怎么样先把图呈现出来先。画图是比较容易的，建立颜色画刷(CreateSolidBrush),选进设备描述表(SelectObject),画多边形(Polygon),一切都那么容易...   

     既然是“七巧板”，当然要七种颜色，我想到了彩虹的七颜色，所以在网上搜了他们的“资料”：
       赤色 【RGB】255, 0, 0     【CMYK】 0, 100, 100, 0
     橙色 【RGB】255, 165, 0 【CMYK】0, 35, 100, 0
     黄色 【RGB】255, 255, 0 【CMYK】0, 0, 100, 0
     绿色 【RGB】0, 255, 0     【CMYK】100, 0, 100, 0
     青色 【RGB】0, 127, 255 【CMYK】100, 50, 0, 0
     蓝色 【RGB】0, 0, 255     【CMYK】100, 100, 0, 0
     紫色 【RGB】139, 0, 255 【CMYK】45, 100, 0, 0
    （说明：这里的显示颜色和具体的RGB并不配对，只是为了好看！！）
     "小孩"的结构：
     struct TangPolygon
    {
        POINT polyPoint[4];    //多边形点，因为最多四边形，为简单就设为“四个点”
        COLORREF rgb;        //图形颜色
        size_t polyType;        //图形类型，即 3：三角形；4：四边形
        float angle;        //保存“世界坐标”角度，绘图时用
    };
 图形移动：
    要实现图形的移动，首先得判断此时该移动哪个图形？通过鼠标左键单击，选择“激活”一个图形，然后鼠标拖动这个图形。然而问题是如何判断哪个图形被激活呢？难道还用判断鼠标坐标在哪个图形的“包围盒”内？？这就麻烦了...后来想想,诶，我不是有每个图形的颜色吗？为什么不通过GetPixel得到当前鼠标位置的颜色，再和“七小孩”逐个比较不就知道哪个被激活了吗？这就大大简化了编码难度，也相当实用。
 图形旋转：
    这一点是我一开始就知道的可能难点所在！开始的时候，在想能有OpenGL里的坐标变换就好了，想当然的以为Win32 API应该没有这提供类似函数吧。然后试着通过改变顶点的坐标来实现图形的旋转，发现这实在有难度，大量的计算还不一定准确，难道没办法了吗？？后来就去网上搜Win32 API有没有坐标变换的现成函数，啊哈、、还是被我找到了，说《Windows图形编程》里有提到这方面的内容，正好有电子书，也就去翻了下，还是找到了解决方法，以为之前学过OpengGL三维编程，理解这种坐标变换还是不难。关键还是这个函数ModifyWorldTransform，实现了左边转换。具体过程类似图1所示：

图1：坐标变换

SHOW：

当你有个锤子的时候，什么东西看起来都像是钉子。   
                                                                                           -摘自《世界因你不同》

P.S.：
    程序就像版本号一样(Version0.1)，只是个简单的雏形，对于程序的改进可能会继续，我想后续版本的改进可能会出于以下几个方向：

1. 将Win32 API封装，这样有利于后续开发，也有利于对“面向对象思想”的加深理解；
2. 将《Windows程序设计》中每章的内容都融入在程序中，这样有利于对Win32编程的进一步掌握和理解；
3. 使用3D图形库如OpenGL进行开发，用户可选择；
4. 结合招聘各种能力，锻炼各种能力；
5. ...   
   

    希望：多指点，多提意见，感激不尽！

致谢：

• 感谢我的室友，Zhu，感谢他一直的鼓励，也感谢他提的一些宝贵意见。
• 还有最近看的几本书对我的影响《把时间当做朋友-运用心智获得解放》，特别是其中提到《奇特的一生》中的事件-时间日记；以及李开复自传《世界因你不同》，让我不停的寻找发自内心的声音，里面的很多方法如“新闻头条”，“墓志铭”，“从心选择”，也让我受益匪浅。  
  

成功并没有绝对的意义，成功，就是做最好的自己，并把最好的你呈现出来。 

源代码：

/ ////////////////////////////////////////////////////////////////////////// //Author:    shenzi //Date:       2009.12.15 //Version:    0.1 /////////////////////////////////////////////////////////////////////////// #include #include #include #include "resource.h" //右键点击“七巧板”，旋转的角度，5度 const float acc = static_cast(5.0/180.0*3.1415926); //“七巧板”图形的多边形结构 struct TangPolygon {     POINT polyPoint[4];    //多边形点，因为最多四边形，为简单就设为“四个点”     COLORREF rgb;          //图形颜色     size_t polyType;       //图形类型，即 3：三角形；4：四边形     float angle;           //保存“世界坐标”角度，绘图时用 }; //预设的“七巧板” TangPolygon g_Tangram[7] = {     {{0, 0, 0, 320, 160, 160, 0, 0},RGB(255, 0, 0)/*赤色*/ ,3, 0},         {{0, 0, 160, 160, 320, 0, 0, 0},RGB(255, 165, 0)/*橙色*/ ,3, 0},     {{0, 320, 160, 320, 80, 240, 0, 0},RGB(255, 255, 0)/*黄色*/ ,3, 0},     {{160, 160, 240, 240, 240, 80, 0, 0},RGB(0, 255, 0)/*绿色*/ ,3, 0},     {{160, 320, 320, 320, 320, 160, 0, 0},RGB(0, 127, 255)/*青色*/ ,3, 0},         {{80, 240, 160, 320, 240, 240, 160, 160},RGB(0, 0, 255)/*蓝色*/ ,4, 0},     {{240, 80, 240, 240, 320, 160, 320, 0},RGB(139, 0, 255)/*紫色*/ ,4, 0}                          };

/ ////////////////////////////////////////////////////////////////////////// //Author:    shenzi //Date:        2009.12.15 //Version:    0.1 /////////////////////////////////////////////////////////////////////////// #include "Tangram.h" //窗口过程函数 LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM); //辅助函数，得到图形的中心坐标 POINT  GetCenter(POINT *pPoint, size_t size); //主函数 int WINAPI _tWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance,                     PTSTR szCmdLine, int iCmdShow) {     static TCHAR szAppName[] = TEXT("Tangram");     HWND hwnd;     MSG msg;     WNDCLASS wndclass;     wndclass.cbClsExtra        = 0;     wndclass.cbWndExtra        = 0;     wndclass.hbrBackground    = (HBRUSH)GetStockObject(WHITE_BRUSH);     wndclass.hCursor        = LoadCursor(NULL, IDC_ARROW);     //画了个“七巧板”ICON     wndclass.hIcon            = LoadIcon(hInstance, MAKEINTRESOURCE(IDI_TANGRAM));     wndclass.hInstance        = hInstance;     wndclass.lpfnWndProc    = WndProc;     wndclass.lpszClassName    = szAppName;     wndclass.lpszMenuName    = NULL;     wndclass.style            = CS_HREDRAW | CS_VREDRAW ;     if (!::RegisterClass(&wndclass))     {         MessageBox(NULL, TEXT("Erroe:..."), TEXT("Error"), MB_ICONERROR);         return 0;     }          hwnd = ::CreateWindow(szAppName,                         //取了个名字“七小孩”，版本就是0.1了,以后可能慢慢完善。                         TEXT("Chi7ren! Version 0.1"),                         WS_OVERLAPPEDWINDOW | WS_VSCROLL,                         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, hdcMem ;         HBITMAP  hBmp;     HBRUSH hbrush;         static int priX, priY;     int moveLenthX, moveLenthY;     //指定当前可移动的“小孩”。     static int movePolygon;             PAINTSTRUCT ps;     COLORREF color;     POINT center;     unsigned int i;     //“世界坐标”旋转用到的两个XFORM结构     static XFORM Tansform = {1, 0, 0, 1, 0, 0};     static XFORM Tanslate = {1, 0, 0, 1, 0, 0};     switch (message)     {         //窗口大小改变时，得到新的客户区大小；     case WM_SIZE:         cxClient = LOWORD(lParam);         cyClient = HIWORD(lParam);             return 0;         //鼠标左键，确定当前可移动的图形     case WM_LBUTTONDOWN:             priX = LOWORD(lParam);         priY = HIWORD(lParam);         hdc = ::GetDC(hwnd);         color = ::GetPixel(hdc, priX, priY);         for (i = 0; i < 7; i++)         {             if (color == g_Tangram[i].rgb)             {                 movePolygon = i;                             break;             }         }         ::ReleaseDC(hwnd, hdc);         return 0;         //鼠标右键，实现图形的旋转功能，"SHIFT"改变旋转方向；     case WM_RBUTTONDOWN:                 priX = LOWORD(lParam);         priY = HIWORD(lParam);                  hdc = ::GetDC(hwnd);         color = ::GetPixel(hdc, priX, priY);         for (i = 0; i < 7; i++)         {             if (color == g_Tangram[i].rgb)             {                 movePolygon = i;                 if (wParam & MK_SHIFT)                 {                     g_Tangram[i].angle += acc;                 }                 else                 {                     g_Tangram[i].angle -= acc;                 }                 break;             }         }         ::ReleaseDC(hwnd, hdc);         ::InvalidateRect(hwnd, NULL, FALSE);         return 0;         //鼠标移动并且左键按下，得到移动距离，并重绘     case WM_MOUSEMOVE:         if (wParam & MK_LBUTTON)         {             moveLenthX = LOWORD(lParam) - priX;             moveLenthY = HIWORD(lParam) - priY;             priX = LOWORD(lParam);             priY = HIWORD(lParam);             for (i = 0; i < g_Tangram[movePolygon].polyType; i++)             {                 g_Tangram[movePolygon].polyPoint[i].x += moveLenthX;                 g_Tangram[movePolygon].polyPoint[i].y += moveLenthY;             }                 }         ::InvalidateRect(hwnd, NULL, FALSE);         return 0;         //状态改变时，绘图     case WM_PAINT:         hdc = ::BeginPaint(hwnd, &ps);           //兼容DC,并选进相应的位图，解决“屏幕闪烁”问题；在兼容DC上画图，         //画完后再BitBlt到客户区，实现双缓存。         hdcMem = ::CreateCompatibleDC(hdc);         hBmp = ::CreateCompatibleBitmap(hdc, cxClient, cyClient);         ::SelectObject(hdcMem, hBmp);         //为选进位图设定背景：白色         ::PatBlt(hdcMem, 0, 0, cxClient, cyClient, WHITENESS);         //设定设备描述表高级图形模式，允许全局转换，即实现图形世界坐标转换；         ::SetGraphicsMode(hdcMem, GM_ADVANCED);         //绘制“七巧板”         for (i = 0; i < 7; i++)         {             //得到当前处理图形的中心点             center = GetCenter(g_Tangram[i].polyPoint, g_Tangram[i].polyType);             //全局转换：             //1.重置当前全局转换             ::ModifyWorldTransform(hdcMem, NULL, MWT_IDENTITY);                          //2.先把世界坐标移到“中心”点             Tansform.eDx = static_cast(-center.x);             Tansform.eDy = static_cast(-center.y);             ::ModifyWorldTransform(hdcMem, &Tansform, MWT_RIGHTMULTIPLY);             //3.再做旋转             Tanslate.eM11 = cos(g_Tangram[i].angle);             Tanslate.eM12 = -sin(g_Tangram[i].angle);             Tanslate.eM21 = sin(g_Tangram[i].angle);             Tanslate.eM22 = cos(g_Tangram[i].angle);             ::ModifyWorldTransform(hdcMem, &Tanslate, MWT_RIGHTMULTIPLY);             //4.最后移回原处             Tansform.eDx = static_cast(center.x);             Tansform.eDy = static_cast(center.y);             ::ModifyWorldTransform(hdcMem, &Tansform, MWT_RIGHTMULTIPLY);             //选定图形颜色，绘制该图形             hbrush = ::CreateSolidBrush(g_Tangram[i].rgb);             ::SelectObject(hdcMem, hbrush);                      ::Polygon(hdcMem, g_Tangram[i].polyPoint, g_Tangram[i].polyType);             ::DeleteObject(hbrush);                 }         //****重置全局转换，不知道为什么需要加这条语句，不加这条语句最后个图形的         //旋转就会处问题。         ::ModifyWorldTransform(hdcMem, NULL, MWT_IDENTITY);         //把结果“贴到”客户区         ::BitBlt(hdc, 0, 0, cxClient, cyClient, hdcMem, 0, 0, SRCCOPY);         //删除创建的对象         ::DeleteObject(hBmp);         ::DeleteDC(hdcMem);         ::EndPaint(hwnd, &ps);         return 0;     case WM_DESTROY:         ::PostQuitMessage(0);         return 0;     }     return ::DefWindowProc(hwnd, message, wParam, lParam); } POINT  GetCenter(POINT *pPoint, size_t size) {     unsigned int i = 0;     POINT center = {0, 0};     for (i = 0; i < size; i++)     {         center.x += pPoint[i].x;         center.y += pPoint[i].y;     }     center.x /= size;     center.y /= size;     return center; }