Win32 OpenGL编程系列 2D例子 -- 七巧板图形绘制

wapysun

浏览: 21499533 次
性别:
来自: 杭州

最近访客更多访客>>

devcang

hunankeda110

辽东小小

apex53

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-06 ( 77)
2012-05 ( 587)
2012-04 ( 177)
更多存档...

讨论新闻组及文件

OpenGL系列文章都已经写到3D部分了，但是感觉2D的例子还是少了点，特意弄个外篇，引入一些稍微复杂的例子，这些例子不适合作为概念介绍时写入此系列文章，只好独立成篇，自己完成一个就发布一个吧。

此次完成的是一个七巧板图形的绘制，绘制时参考了网上的七巧板程序的颜色（此处），因为我仅仅是为了加深对OpenGL的学习，没有添加具体的真实游戏代码，仅仅只有OpenGL图形绘制的演示。

另外，因为作为学习OpenGL例子之用，自然要使用OpenGL来绘制啦，虽然这么简单的图形根本用不着OpenGL，别说我用大炮打苍蝇，用牛刀杀鸡-_-!因为是学习OpenGL嘛，所以在2D坐标系中还是使用了OpenGL的坐标系，并且，为了追求显示的完美（主要是旋转的），我选取了所有图形的重心作为每个图形的坐标系的原点，这样旋转时的中心就是每个图形的中心，这样比使用rgnbox获取边框然后取中心旋转效果要好，具体的旋转效果需要自己添加代码去尝试了，Rotate和RotateTo的实现已经有了。添加到绘制部分即可。

下面简单介绍一下所有源代码。

所有的七巧板图形全部继承自CGLShape，此类实现如下

// 此类实现移动，旋转，

class
 CGLShape

{
public
:

    CGLShape(void
)

    {

        mfPosX = 0.0;

        mfPosY = 0.0;

        memset(mfvColor, 0, sizeof
(mfvColor));

        mfDegree = 0.0;

        mfSize = 1.0;

    }
virtual
 ~CGLShape(void
) { }

void
 SetSize(GLfloat afSize) { mfSize = afSize; }

void
 SetColor(GLfloat afRed, GLfloat afGreen, GLfloat afBlue, GLfloat afAlpha = 1.0)

    {

        mfvColor[0] = afRed;

        mfvColor[1] = afGreen;

        mfvColor[2] = afBlue;

        mfvColor[3] = afAlpha;

    }

// 相对偏移(外部坐标系长度)

void
 Move(int
 aiPosX, int
 aiPosY) 

    {

        mfPosX += 2.0f * aiPosX/(float
)WIDTH;

        mfPosY += -(2.0f * aiPosY/(float
)HEIGHT);

    }

// 移动到的位置(Windows坐标系点)

void
 MoveTo(int
 aiPosX, int
 aiPosY)

    {

        mfPosX = (2.0f * aiPosX - (float
)WIDTH) / (float
)WIDTH;

        mfPosY = -(2.0f * aiPosY - (float
)HEIGHT) / (float
)HEIGHT;

    }

// 旋转,以逆时针为正方向

void
 Rotate(GLfloat aiDegree) { mfDegree += aiDegree; }

// 旋转到

void
 RotateTo(GLfloat aiDegree) { mfDegree = aiDegree; }

// OpenGL坐标系

void
 SetPos(GLfloat afPosX, GLfloat afPosY) { mfPosX = afPosX; mfPosY = afPosY; }
void
 GetPos(GLfloat& afPosX, GLfloat& afPosY) { afPosX = mfPosX; afPosY = mfPosY; }

void
 Draw()

    {

        glLoadIdentity();

        glColor4fv(mfvColor);


        glPushMatrix();

        glTranslatef(mfPosX, mfPosY, 0.0);

        glRotatef(mfDegree, 0.0, 0.0, 1.0);


        DrawImp();


        glPopMatrix();

    }

protected
:
// 重绘时需要调用的函数,由各子类实现

virtual
 void
 DrawImp() = 0;

// 位置信息,没有用POINT是为了将来方便移植


    GLfloat mfPosX;

    GLfloat mfPosY;

// 颜色


    GLfloat mfvColor[4];

// 旋转度数


    GLfloat mfDegree;

// 大小


    GLfloat mfSize;

};

大小，颜色，旋转角度都以成员变量的方式保存在CGLShape中，并且在Draw函数中已经实际的完成了使用，具体的DrawImp交由子类实现，完成具体图形的绘制。（此处使用template模式）具体的各个实现按照七巧板的要求如下：

三角形：


class
 CGLTriangle : public
 CGLShape

{
public
:

    CGLTriangle() { }
virtual
 ~CGLTriangle() { }

// 重绘时需要调用的函数,由各子类实现

virtual
 void
 DrawImp()

    {
static
 GLfloat fvTop[3] = { 0.0, (1.0/3.0), 0.0};
static
 GLfloat fvLeftBottom[3] = { -0.5, -(1.0/6.0), 0.0};
static
 GLfloat fvRightBottom[3] = { 0.5, -(1.0/6.0), 0.0};


        GLfloat fvSizeTop[3] = {fvTop[0], fvTop[1] * mfSize, fvTop[2]};

        GLfloat fvSizeLeftBottom[3] = {fvLeftBottom[0] * mfSize, fvLeftBottom[1] * mfSize, fvLeftBottom[2]};

        GLfloat fvSizeRightBottom[3] = {fvRightBottom[0] * mfSize, fvRightBottom[1] * mfSize, fvRightBottom[2]};


        glBegin(GL_TRIANGLES);

        glVertex3fv(fvSizeTop);

        glVertex3fv(fvSizeLeftBottom);

        glVertex3fv(fvSizeRightBottom);

        glEnd();


    }

};

实际上DrawImp仅仅关心绘制一个三角形而已，这里因为其他图形只有一个，所以不关心大小，而三角形在七巧板中有多个，所以将大小的计算放在三角形中，独立计算大小，事实上更通用的办法是在CShape的Draw函数中用glScale实现。三角形的3个顶点的坐标相对来说还比较容易计算。

矩形：

class
 CGLRectangle: public
 CGLShape

{
public
:

    CGLRectangle() { }
virtual
 ~CGLRectangle() { }

// 重绘时需要调用的函数,由各子类实现

virtual
 void
 DrawImp()

    {
static
 GLfloat fLength = sqrt(2.0)/4.0;
static
 GLfloat fLengthHalf = fLength/2.0;
static
 GLfloat fvLeftTop[3] = { -fLengthHalf, fLengthHalf, 0.0};
static
 GLfloat fvRightTop[3] = { fLengthHalf, fLengthHalf, 0.0};
static
 GLfloat fvLeftBottom[3] = { -fLengthHalf, -fLengthHalf, 0.0};
static
 GLfloat fvRightBottom[3] = { fLengthHalf, -fLengthHalf, 0.0};

// TODO:因为七角板此例中方形只有一个不需要考虑大小，暂时不计算大小


        glColor4fv(mfvColor);

        glPushMatrix();


        glBegin(GL_QUADS);

        glVertex3fv(fvLeftTop);

        glVertex3fv(fvRightTop);

        glVertex3fv(fvRightBottom);

        glVertex3fv(fvLeftBottom);

        glEnd();


        glPopMatrix();

    }

};

很简单，不多说了，DrawImp实现一个矩形的绘制而已。四个顶点的坐标时最容易计算的。

平行四边形：

class
 CGLParallelogram: public
 CGLShape

{
public
:

    CGLParallelogram() { }
virtual
 ~CGLParallelogram() { }

// 重绘时需要调用的函数,由各子类实现

virtual
 void
 DrawImp()

    {
static
 GLfloat fRightBottomX = 0.375;
static
 GLfloat fHeight = 0.25;
static
 GLfloat fvLeftTop[3] = { -fRightBottomX, fHeight/2.0, 0.0};
static
 GLfloat fvRightTop[3] = { 0.5-fRightBottomX, fHeight/2, 0.0};
static
 GLfloat fvLeftBottom[3] = { fRightBottomX-0.5, -fHeight/2.0, 0.0};
static
 GLfloat fvRightBottom[3] = { fRightBottomX, -fHeight/2.0, 0.0};

// TODO:因为七角板此例中四边形只有一个不需要考虑大小，暂时不计算大小


        glColor4fv(mfvColor);

        glPushMatrix();


        glRotatef(mfDegree, 0.0, 0.0, 1.0);

        glBegin(GL_QUADS);

        glVertex3fv(fvLeftTop);

        glVertex3fv(fvRightTop);

        glVertex3fv(fvRightBottom);

        glVertex3fv(fvLeftBottom);

        glEnd();


        glPopMatrix();

    }

};

绘制是同样简单，但是在以平行四边形的重心为原点的坐标系中，计算平时四边形的4个顶点的坐标需要一定的计算量，上述那几个数值可不是随便掰出来的啊。

将上述图形组合在一起



CGLTriangle gTriBTop;    // 上方的大三角形


CGLTriangle gTriBRight;    // 右边的大三角形


CGLTriangle gTriSLeft;    // 左上方的小上角形


CGLTriangle gTriSMid;    // 中间的小三角形


CGLTriangle gTriMLeft;    // 左下方的中三角形


CGLRectangle gRectangle; // 唯一的正方形


CGLParallelogram gParal;    // 唯一的平行四边形

//OpenGL初始化开始

void
 SceneInit(int
 w,int
 h)

{

    GLenum err = glewInit();
if
(err != GLEW_OK)

    {

        MessageBox(NULL, _T("Error"
), _T("Glew init failed."
), MB_OK);

        exit(-1);

    }


    gTriBTop.SetColor(1.0, 0.0, 0.0);    // 上方的大三角形,红色,


    gTriBTop.SetPos(0.0, 1.0/3.0);    

    gTriBTop.RotateTo(180.0);


    gTriBRight.SetColor(0.0, 0.0, 1.0);    // 右边的大三角形,蓝色


    gTriBRight.SetPos(1.0/3.0, 0.0);

    gTriBRight.RotateTo(90.0);


    gTriSLeft.SetColor(1.0, 1.0, 0.0);    // 左上方的小上角形,黄色


    gTriSLeft.SetSize(0.5);        // 小三角形只有大的一半大


    gTriSLeft.SetPos(-(5.0/12.0), 0.25);

    gTriSLeft.RotateTo(-90.0);


    gRectangle.SetColor(1.0, 175.0/255.0, 175.0/255.0); // 唯一的正方形,不知道什么颜色


    gRectangle.SetPos(-0.25, 0.0);

    gRectangle.RotateTo(45.0);


    gTriSMid.SetColor(0.0, 1.0, 0.0);    // 中间的小三角形,绿色


    gTriSMid.SetSize(0.5);        // 小三角形只有大的一半大


    gTriSMid.SetPos(0.0, -1.0/6.0);


    gTriMLeft.SetColor(0.0, 1.0, 1.0);    // 左下方的中三角形


    gTriMLeft.SetSize( sqrt(2.0) / 2.0 );    // 以底边计算，2分之根号2倍


    gTriMLeft.SetPos(-0.5 + 1.0/6.0, -0.5 + 1.0/6.0 );

    gTriMLeft.RotateTo(135.0);


    gParal.SetColor(1.0, 0.0, 1.0);    // 唯一的平行四边形,紫色


    gParal.SetPos(0.125,  -0.375);


}

void
 ReShape(unsigned
 auWidth, unsigned
 auHeight)

{

    glViewport(0, 0, auWidth, auHeight);

}

//这里进行所有的绘图工作

void
 SceneShow(GLvoid)        

{

    glClear(GL_COLOR_BUFFER_BIT);    // 清空颜色缓冲区



    gTriBTop.Draw();

    gTriBRight.Draw();

    gTriSLeft.Draw();

    gRectangle.Draw();

    gTriSMid.Draw();

    gTriMLeft.Draw();

    gParal.Draw();


    glFlush();

}

上述代码中程序逻辑非常简单，无非就是设定好每个图形的大小，位置，旋转角度（三角形需要）等，每个图形的绘制都是以其重心为原点，所以计算的实际是七巧板每个图形的重心的位置，有一定的计算量，上述每个数值都是精确计算出来的，所以最后的图形才能完美，实际上也可以通过移动所有图形到一起，然后记录下每个值的方式来完成，但是此方式可能没有完整的数学描述精确，效果也就没有那么完美了。显示的截图如下：

最后演示一下每个图形的旋转效果：

只需要将代码改成如下形式即可：

//这里进行所有的绘图工作

void
 SceneShow(GLvoid)        

{

    glClear(GL_COLOR_BUFFER_BIT);    // 清空颜色缓冲区



    gTriBTop.Draw();

    gTriBRight.Draw();

    gTriSLeft.Draw();

    gRectangle.Draw();

    gTriSMid.Draw();

    gTriMLeft.Draw();

    gParal.Draw();



    gTriBTop.Rotate(1.0);

    gTriBRight.Rotate(1.0);

    gTriSLeft.Rotate(1.0);

    gRectangle.Rotate(1.0);

    gTriSMid.Rotate(1.0);

    gTriMLeft.Rotate(1.0);

    gParal.Rotate(1.0);


    glFlush();

}

见视频：

此文演示的完整代码在博客代码的JTTangram目录。有兴趣的可以将整个七巧板游戏完成然后再告诉我。最后，开始实际的完成稍微复杂点的图形的绘制时就会发现，就会发现技术的学习都是比较简单的，但是，实际的使用全靠数学撑着，此例算是比较简单了，但是平面几何，三角函数等东西不懂一点根本无法计算各个图形的位置-_-!数学还是得学好啊。。。。。。。。。。。