[MFC]SDI在图片背景上实现文本跟随鼠标移动

SDI是单文档接口应用程序的简称。本文要实现的是在视图区域显示一张图片，然后在图片表层显示文字，并且文字跟随鼠标移动。思考一下，可以判断这个问题一共分为以下几个部分：1、显示图片；2、找到鼠标的位置；3、插入文字；4、自动移动文字。以下分步骤说明。

1、首先是使用“打开”方式打开一张图片并显示，出于方便这里仅仅针对bmp格式的图片，具体是在CYourView类内部的OnDraw函数内添加如下代码：

    if(GetDocument()->GetPathName() != "")//载入图片
    {
        HBITMAP bitmap;
        bitmap = (HBITMAP)LoadImage(AfxGetInstanceHandle(),
            GetDocument()->GetPathName(), IMAGE_BITMAP, 0, 0,
            LR_LOADFROMFILE|LR_CREATEDIBSECTION);
        HBITMAP OldBitmap;
        CBitmap cbitmap;
        cbitmap.Attach(bitmap);
        cbitmap.GetBitmap(&m_bitmap);


        CDC MemDC;
        MemDC.CreateCompatibleDC(pDC);
        CRect rect;
        GetClientRect(&rect);
        OldBitmap = (HBITMAP)MemDC.SelectObject(bitmap);
        pDC->BitBlt(0, 0, m_bitmap.bmWidth, m_bitmap.bmHeight, &MemDC, 0, 0, SRCCOPY);
        MemDC.SelectObject(OldBitmap);
        MemDC.DeleteDC();
    }

其中m_bitmap是一个BITMAP对象。显示图片的方法是比较常见的，这里不再说明。

2、接下来需要知道有个消息处理函数OnMouseMove用来处理鼠标移动消息。所以首先要添加这个函数，这个可以在Class Wizard中找到。先添加这个函数。

OnMouseMove(UINT nFlags, CPoint point);

这个函数的第二个参数CPoint对象就是鼠标所在位置，可以使用如下方法找到对应坐标：

Xcoords = point.x;
Ycoords = point.y;

3、然后就要插入文字了，在SDI中特定位置插入文字其实很简单，使用CDC->DrawText方法就可以实现。这个函数可以实现在指定的矩形框内添加格式化文本，有点像word中的插入对话框。具体语法如下：

int DrawText(const CString& str, LPRECT lpRect, UINT nFormat);

第一个参数是要输出的CString对象，第二个参数是显示文本的矩形区域，最后一个参数是文本的格式，比如居左居中等，一个使用例子如下：

CClientDC cdc(this);
cdc.DrawText("text", CRect(left, top, reight, bottom), DT_LEFT);

 

4、插入文字实现之后，就要进行文字的移动了。首先我想到的是SDI中图形的移动。比如画一个矩形CDC->Rectangle方法，然后移动这个矩形框。有一个常用的图形移动方式是进行异或画图，即使用CDC->SetROP2(R2_XORPEN)这个方法画图。使用与原来画笔异或屏幕颜色再画一遍，可以实现清除已画图形的效果，因此图形的移动也就是如下过程：

（1）异或画图

（2）在原位置再次异或画图

（3）在新位置异或画图

（4）...

把画图与OnMouseMove结合就能容易实现图形跟随鼠标移动。但是同样的方法可以用于文本的移动吗？答案是否定的。因为DrawText与其他画图函数有本质的区别，因为其没有用到画笔，所以SetROP2这个方法整个对文本没有效果。不过，有了移动图形的方法，可以容易想到所谓移动（图形或者文本）的本质其实就是首先把原位置的内容清除，然后在新位置重新画（好像是废话）。

　　因此，移动文字的关键就在于如何把原位置的文字清除。（用DrawText插入一个空文本的方法实行不同的，因为不会影响已经插入的文本。）一个容易想到的方法是将原位置（DrawText对应的矩形）整个复制下来，然后在插入文字后重新绘制上去，就用覆盖的方式清除了文字。于是有了如下的方法。

首先添加一个截图函数，叫做ScreenShot。

CBitmap* CYourView::ScreenShot(CDC* pDC, CBitmap *memBitmap, int Xcoords, int Ycoords, int Width, int Height)
{
    CDC memDC;
    memDC.CreateCompatibleDC(pDC);
    
    memBitmap->CreateCompatibleBitmap(pDC, Width, Height);
    memDC.SelectObject(memBitmap);
    memDC.BitBlt(0, 0, Width, Height, pDC, Xcoords, Ycoords, SRCCOPY);  
    memDC.DeleteDC();

    return memBitmap;

}

这个函数的处理过程很简单，将指定位置和大小的矩形内部的图片内容保存起来。

具体的实现文本跟随鼠标移动的代码在OnMouseMove函数中：

void CYourView::OnMouseMove(UINT nFlags, CPoint point)
{
    // TODO: 在此添加消息处理程序代码和/或调用默认值
    CClientDC cdc(this);
    Xcoords = point.x;
    Ycoords = point.y;
if(m_loaded_flag) 
    {
        if(m_first_show_flag == false)
        {
        
            OldX = Xcoords+10;
            OldY = Ycoords-10;
            memBitmap.DeleteObject();
            memBmp = ScreenShot(&cdc, &memBitmap, OldX, OldY, 100, 50);

            cdc.SetBkMode(TRANSPARENT);
            cdc.DrawText("text",CRect(OldX,OldY, OldX+100, OldY+50),DT_LEFT);
            m_first_show_flag = true;
        }
        else
        {
            cdc.SetBkMode(TRANSPARENT);//去除原来位置的文字
            BITMAP bm;
            memBmp->GetObject (sizeof(BITMAP),&bm);
            CDC MemDC;
            MemDC.CreateCompatibleDC(&cdc);
            CBitmap *pOldBitmap=MemDC.SelectObject(memBmp); 
            cdc.BitBlt(OldX,OldY,bm.bmWidth ,bm.bmHeight,&MemDC,0,0,SRCCOPY);    
            MemDC.SelectObject (pOldBitmap);
            MemDC.DeleteDC();
            
            //新坐标作为下次使用的前一次坐标
            OldX = Xcoords+10;
            OldY = Ycoords-10;
            memBitmap.DeleteObject();
            memBmp = ScreenShot(&cdc, &memBitmap, OldX, OldY, 100, 50);
            cdc.DrawText("text",CRect(OldX, OldY, OldX+100, OldY+50),DT_LEFT);//在新位置添加文字
            
        }

    }

    CScrollView::OnMouseMove(nFlags, point);
}

由于第一次鼠标放上去的状态跟后面的移动状态有点区别，说以代码中分开处理，因此还需要在OnDraw函数中if(GetDocument()->GetPathName() != "")语句内添加如下内容：

        m_loaded_flag = true;
　　　　 if(m_first_show_flag == true)
        {
            Invalidate();
            m_first_show_flag = false;
        }

当载入图片后才显示跟随鼠标的文字。并且当移动图片时刷新以清除文字。

总的来说整个过程是比较简单的，曾经看到过一个采用OnTimer实现的文字跟随鼠标移动的例子，其实就是不断地刷新屏幕来显示不同的文字，当有背景图时会出现严重的闪烁，需要采用其他方法来避免闪烁，但是使用我的方法就没有这个问题。一小部分的重绘在视觉上是没有影响的。

另外要注意使用到CDC对象的回收，如果使用CDC *pDC = this->DetDC()这样的方法创建一个设备上下文则需要在不用的时候使用pDC->DeleteDC()删除DC，不然就会导致严重的内存泄露。但是使用CClientDC cdc(this)创建的CDC对象系统能够自动回收，所以以上代码中采用的是这种方法。