數碼相框項目之顯示一張可放大、縮小、拖拽的圖片

之前我做過一個電子相框的項目，涉及到的重難點主要為：在LCD上放大、縮小、移動圖片。

首先我們得明白的一點是：無論是放大或縮小，實際上都是對原圖進行等比例的縮小，然后在LCD上面顯示，只不過縮小的程度不同罷了（關于如何取出原圖的數據，然后縮小為我們需要的大小，可以看我另外一篇博客：https://blog.csdn.net/qq_37659294/article/details/104382032）。

經過上一篇博客介紹的縮放算法之后，我們已經得到一張縮小后、和原圖等比例的圖片并存放在buffer中，但這只是得到一張圖片，還沒有顯示到LCD上，那么我們如何將這張圖片在LCD上動態地放大、縮小、移動呢？

首先，我們來看一下一個非常關鍵的函數，ShowZoomedPictureInLayout函數，這個函數是在LCD上顯示一張經過縮放、移動的圖片，因為圖片的大小可能比顯示區域要大，也有可能小，也有可能被移動到相框的邊緣，只能顯示圖片的一部分，所以我們必須確認要從圖片的哪里（iStartXofNewPic，iStartYofNewPic）開始取數據，在顯示區域的哪里（iStartXofOldPic，iStartYofOldPic）開始顯示，顯示多大（iWidthPictureInPlay，iHeightPictureInPlay）的區域。

ShowZoomedPictureInLayout函數的實現思路為：

①計算出iStartXofNewPic，iStartYofNewPic，判斷要從圖片的哪個位置開始取數據

②利用 g_iXofZoomedPicShowInCenter - iStartXofNewPic?= iDeltaX = 顯示區中心點X坐標(g_tManualPictureLayout.iTopLeftX + iPictureLayoutWidth / 2) - iStartXofOldPic（LCD上顯示圖片的起始坐標）等式算出iStartXofOldPic，iStartYofOldPic，判斷要從顯示區域的哪個位置開始顯示圖片

③計算出實際顯示的寬度iWidthPictureInPlay和高度iHeightPictureInPlay

④根據上面計算好的參數，把圖片數據刷到LCD的framebuffer中

/**********************************************************************
?* 函數名稱： ShowZoomedPictureInLayout
?* 功能描述：在"manual頁面"中顯示經過縮放的圖片
?* 輸入參數： ptZoomedPicPixelDatas - 內含已經縮放的圖片的象素數據
?* ? ? ? ? ? ?ptVideoMem ? ? ? ? ? ?- 在這個VideoMem中顯示
?* 輸出參數：無
?* 返回值：無
?***********************************************************************/
static void ShowZoomedPictureInLayout(PT_PixelDatas ptZoomedPicPixelDatas, PT_VideoMem ptVideoMem)
{

? ? /* iStartXofNewPic和iStartYofNewPic這兩個變量意思不是新圖片在顯示區域(或者整個屏幕區域)的xy坐標
? ? ?* 而是從縮放后的圖片坐標(iStartXofNewPic,iStartYofNewPic)開始，顯示這個圖片
? ? ?* 坐標(x,y)之前的一塊區域，即橫坐標小于x，縱坐標小于y的所有地方，都不顯示
? ? ?* 因為可能縮放后的圖片，不能完全顯示到屏幕上，只能顯示一部分
? ? ?* 算出從圖片什么地方開始顯示，并且加上一個長和寬，那么在屏上顯示的部分就可以描繪出來了
? ? ?*/
? ? int iStartXofNewPic, iStartYofNewPic;

?? ?/* iStartXofOldPic和iStartYofOldPic這兩個變量并說不是上一張圖片的顯示位置，而是新圖片在屏幕顯示的起始坐標
?? ? * 這六個變量連起來想就是：
?? ? * 從zoom后的圖片的(iStartXofNewPic,iStartYofNewPic)這個地方開始
?? ? * 取長寬為iWidthPictureInPlay, iHeightPictureInPlay這么大的一塊區域
?? ? * 顯示到顯存的(iStartXofOldPic,iStartYofOldPic)這個地方去
?? ? */
? ? int iStartXofOldPic, iStartYofOldPic;
? ? int iWidthPictureInPlay, iHeightPictureInPlay;

? ? int iPictureLayoutWidth, iPictureLayoutHeight;
? ? int iDeltaX, iDeltaY;//計算過程的中間變量

?? ?/* iPictureLayoutWidth? 顯示區域的寬
?? ? * iPictureLayoutHeight 顯示區域的高
?? ? */

? ? iPictureLayoutWidth ?= g_tManualPictureLayout.iBotRightX - g_tManualPictureLayout.iTopLeftX + 1;
? ? iPictureLayoutHeight = g_tManualPictureLayout.iBotRightY - g_tManualPictureLayout.iTopLeftY + 1;
? ??
? ? /* g_iXofZoomedPicShowInCenter 是圖片最左邊到顯示區中心的距離，g_iXofZoomedPicShowInCenter = 縮放后寬的一半 + 移動的偏移量 (左移時為正，右移時為負（移動太大有可能變成負數的）)
?? ? * 這個變量第一次賦值是在ShowPictureInManualPage（第一次顯示圖片（居中顯示），這時候圖片的大小比LCD的圖片顯示區域小）這個函數里，其值就是顯示圖片的寬的一半，也代表著最左邊到中心的距離
?? ? * 在不移動時，g_iXofZoomedPicShowInCenter值跟著放大和縮小相同的倍數
?? ? * 當移動的時候，在ManualPageRun函數里"移動圖片"的處理邏輯中，左移就增加，右移就減小，
?? ? * 同理 g_iYofZoomedPicShowInCenter 是圖片顯示位置最上面到顯示區域中心的距離
?? ? */
? ? iStartXofNewPic = g_iXofZoomedPicShowInCenter - iPictureLayoutWidth/2;//利用g_iXofZoomedPicShowInCenter算出iStartXofNewPic，便知道了要從圖片的哪個位置取出數據來顯示了，對應上面思路的第①步
? ? if (iStartXofNewPic < 0)//即g_iXofZoomedPicShowInCenter < iPictureLayoutWidth/2（顯示區寬的一半），說明圖片的最左邊在顯示區域內
? ? {
? ? ? ? iStartXofNewPic = 0;//如果圖片的最左邊在顯示區域內，那么就從圖片的最左邊開始取數據
? ? }

?? ?/* 這中間還有一種情況，就是
?? ? * 當 (iStartXofNewPic > 0) && (iStartXofNewPic < ptZoomedPicPixelDatas->iWidth) 時
?? ? * 表示圖片最左邊已經移出了顯示區域（最右邊還在顯示區域內），只能顯示一部分
?? ? * 此時 iStartXofNewPic = g_iXofZoomedPicShowInCenter - iPictureLayoutWidth/2;
?? ? * 表示就從圖片的這個地方開始顯示
?? ? */
? ? if (iStartXofNewPic > ptZoomedPicPixelDatas->iWidth)//即g_iXofZoomedPicShowInCenter >?ptZoomedPicPixelDatas->iWidth（圖寬） + iPictureLayoutWidth/2（顯示區寬的一半），說明圖片已經完全左移出去了
? ? {
? ? ? ? iStartXofNewPic = ptZoomedPicPixelDatas->iWidth;//整張圖片都已經被左移出顯示區域了，不用顯示了
? ? }

? ? ?/* iDeltaX 是實際所顯示圖片的起始位置?到顯示區域中心點的距離，由g_iXofZoomedPicShowInCenter減去iStartXofNewPic得到，只是一個用來計算iStartXofOldPic的中間變量
? ? ?* 因為可能會移動到或者放大到左邊不能從頭開始，就是 0<iStartXofNewPic<ptZoomedPicPixelDatas->iWidth的情況了
? ? ?* 這個式子算出的是，實際圖片開始顯示的最左邊到顯示區域中心點的距離
? ? ?* iDeltaX有可能是負數（當圖片移動到中心線右邊時，那么iDeltaX就是個負數了），但因為我們是利用數學等式來計算iStartXofOldPic，最后負負會得正
?? ? */
? ? iDeltaX = g_iXofZoomedPicShowInCenter - iStartXofNewPic;

? ? ?/* g_iXofZoomedPicShowInCenter - iStartXofNewPic
? ? ?* = iDeltaX
? ? ?* = 顯示區中心點X坐標(g_tManualPictureLayout.iTopLeftX + iPictureLayoutWidth / 2) - iStartXofOldPic（LCD上顯示圖片的起始坐標）
? ? ?* 根據上面的等式我們可算出?iStartXofOldPic
?? ? */
? ? iStartXofOldPic = (g_tManualPictureLayout.iTopLeftX + iPictureLayoutWidth / 2) - iDeltaX;

? ? ?/* 當 iStartXofNewPic = ptZoomedPicPixelDatas->iWidth 時，說明整張圖片已經從左邊劃出去了
?? ? * iDeltaX = g_iXofZoomedPicShowInCenter - ptZoomedPicPixelDatas->iWidth >= iPictureLayoutWidth / 2
?? ? * 所以iStartXofOldPic在這種情況下是可能小于g_tManualPictureLayout.iTopLeftX，所以需要判斷
?? ? */
? ? if (iStartXofOldPic < g_tManualPictureLayout.iTopLeftX)
? ? {
? ? ? ? iStartXofOldPic = g_tManualPictureLayout.iTopLeftX;
? ? }

? ? ?/* 向右邊劃出去了 */
? ? if (iStartXofOldPic > g_tManualPictureLayout.iBotRightX)
? ? {
? ? ? ? iStartXofOldPic = g_tManualPictureLayout.iBotRightX + 1;
? ? }
? ? ?

? ? ?/* ptZoomedPicPixelDatas->iWidth - iStartXofNewPic 是圖片除去了左邊可能不顯示的地方，剩下要顯示的部分
?? ? * g_tManualPictureLayout.iBotRightX - iStartXofOldPic + 1 是從顯示位置開始，到可以顯示圖片區域的結束，一共多寬
?? ? * 這兩個選一個小的，作為實際顯示的寬度
?? ? */
? ? if ((ptZoomedPicPixelDatas->iWidth - iStartXofNewPic) > (g_tManualPictureLayout.iBotRightX - iStartXofOldPic + 1))
? ? ? ? iWidthPictureInPlay = (g_tManualPictureLayout.iBotRightX - iStartXofOldPic + 1);
? ? else
? ? ? ? iWidthPictureInPlay = (ptZoomedPicPixelDatas->iWidth - iStartXofNewPic);
? ??

? ? ?/* 上面是關于X坐標的計算，下面開始Y方向的計算，原理一樣 */
? ? iStartYofNewPic = g_iYofZoomedPicShowInCenter - iPictureLayoutHeight/2;
? ? if (iStartYofNewPic < 0)
? ? {
? ? ? ? iStartYofNewPic = 0;
? ? }
? ? if (iStartYofNewPic > ptZoomedPicPixelDatas->iHeight)
? ? {
? ? ? ? iStartYofNewPic = ptZoomedPicPixelDatas->iHeight;
? ? }
? ? iDeltaY = g_iYofZoomedPicShowInCenter - iStartYofNewPic;
? ? iStartYofOldPic = (g_tManualPictureLayout.iTopLeftY + iPictureLayoutHeight / 2) - iDeltaY;

? ? if (iStartYofOldPic < g_tManualPictureLayout.iTopLeftY)
? ? {
? ? ? ? iStartYofOldPic = g_tManualPictureLayout.iTopLeftY;
? ? }
? ? if (iStartYofOldPic > g_tManualPictureLayout.iBotRightY)
? ? {
? ? ? ? iStartYofOldPic = g_tManualPictureLayout.iBotRightY + 1;
? ? }
? ??
? ? if ((ptZoomedPicPixelDatas->iHeight - iStartYofNewPic) > (g_tManualPictureLayout.iBotRightY - iStartYofOldPic + 1))
? ? {
? ? ? ? iHeightPictureInPlay = (g_tManualPictureLayout.iBotRightY - iStartYofOldPic + 1);
? ? }
? ? else
? ? {
? ? ? ? iHeightPictureInPlay = (ptZoomedPicPixelDatas->iHeight - iStartYofNewPic);
? ? }
? ?

? ? ?/* 把整個圖片顯示區填充為背景色 */? ??
? ? ClearVideoMemRegion(ptVideoMem, &g_tManualPictureLayout, COLOR_BACKGROUND);

? ? ?/* 傳入前面計算好的參數，顯示縮放、移動后的圖片
?? ? * iStartXofNewPic, iStartYofNewPic? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?：從圖片的哪個位置開始取數據
?? ? * iStartXofOldPic, iStartYofOldPic? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ：在LCD的哪個位置開始顯示圖片
?? ? * iWidthPictureInPlay, iHeightPictureInPlay ? ? ? ? ? ? ? ? ? ：正真顯示圖片的寬和高
?? ? * ptZoomedPicPixelDatas, &ptVideoMem->tPixelDatas：源和目的
?? ? */
? ? PicMergeRegion(iStartXofNewPic, iStartYofNewPic, iStartXofOldPic, iStartYofOldPic, iWidthPictureInPlay, iHeightPictureInPlay, ptZoomedPicPixelDatas, &ptVideoMem->tPixelDatas);
}

PicMergeRegion函數定義如下：

/*********************************************************************** 函數名稱： PicMergeRegion* 功能描述： 把新圖片的某部分, 合并入老圖片的指定區域* 輸入參數： iStartXofNewPic, iStartYofNewPic : 從新圖片的(iStartXofNewPic, iStartYofNewPic)座標處開始讀出數據用于合并*            iStartXofOldPic, iStartYofOldPic : 合并到老圖片的(iStartXofOldPic, iStartYofOldPic)座標去*            iWidth, iHeight                  : 合并區域的大小*            ptNewPic                         : 新圖片*            ptOldPic                         : 老圖片* 輸出參數： 無* 返 回 值： 0 - 成功, 其他值 - 失敗***********************************************************************/
int PicMergeRegion(int iStartXofNewPic, int iStartYofNewPic, int iStartXofOldPic, int iStartYofOldPic, int iWidth, int iHeight, PT_PixelDatas ptNewPic, PT_PixelDatas ptOldPic)
{int i;unsigned char *pucSrc;unsigned char *pucDst;int iLineBytesCpy = iWidth * ptNewPic->iBpp / 8;if ((iStartXofNewPic < 0 || iStartXofNewPic >= ptNewPic->iWidth) || \(iStartYofNewPic < 0 || iStartYofNewPic >= ptNewPic->iHeight) || \(iStartXofOldPic < 0 || iStartXofOldPic >= ptOldPic->iWidth) || \(iStartYofOldPic < 0 || iStartYofOldPic >= ptOldPic->iHeight)){return -1;}pucSrc = ptNewPic->aucPixelDatas + iStartYofNewPic * ptNewPic->iLineBytes + iStartXofNewPic * ptNewPic->iBpp / 8;pucDst = ptOldPic->aucPixelDatas + iStartYofOldPic * ptOldPic->iLineBytes + iStartXofOldPic * ptOldPic->iBpp / 8;for (i = 0; i < iHeight; i++){memcpy(pucDst, pucSrc, iLineBytesCpy);pucSrc += ptNewPic->iLineBytes;pucDst += ptOldPic->iLineBytes;}return 0;
}

下面是放大的完整處理過程：

static int g_iXofZoomedPicShowInCenter;  
static int g_iYofZoomedPicShowInCenter;
/* 放大/縮小系數 */
#define ZOOM_RATIO (0.9)
case 2: /* 放大按鈕 */
{/* 獲得放大后的數據 */iZoomedWidth  = (float)g_tZoomedPicPixelDatas.iWidth / ZOOM_RATIO;iZoomedHeight = (float)g_tZoomedPicPixelDatas.iHeight / ZOOM_RATIO;ptZoomedPicPixelDatas = GetZoomedPicPixelDatas(&g_tOriginPicPixelDatas, iZoomedWidth, iZoomedHeight);/* 重新計算中心點 */g_iXofZoomedPicShowInCenter = (float)g_iXofZoomedPicShowInCenter / ZOOM_RATIO;g_iYofZoomedPicShowInCenter = (float)g_iYofZoomedPicShowInCenter / ZOOM_RATIO;/* 顯示新數據 */ShowZoomedPictureInLayout(ptZoomedPicPixelDatas, ptDevVideoMem);break;
}

縮小：

/* 放大/縮小系數 */
#define ZOOM_RATIO (0.9)
case 1: /* 縮小按鈕 */
{/* 獲得縮小后的數據 */iZoomedWidth  = (float)g_tZoomedPicPixelDatas.iWidth * ZOOM_RATIO;iZoomedHeight = (float)g_tZoomedPicPixelDatas.iHeight * ZOOM_RATIO;ptZoomedPicPixelDatas = GetZoomedPicPixelDatas(&g_tOriginPicPixelDatas, iZoomedWidth, iZoomedHeight);/* 重新計算中心點 */g_iXofZoomedPicShowInCenter = (float)g_iXofZoomedPicShowInCenter * ZOOM_RATIO;g_iYofZoomedPicShowInCenter = (float)g_iYofZoomedPicShowInCenter * ZOOM_RATIO;/* 顯示新數據 */ShowZoomedPictureInLayout(ptZoomedPicPixelDatas, ptDevVideoMem);break;
}

拖拽：

/* 如果觸點滑動距離大于規定值, 則挪動圖片 */
if (DistanceBetweenTwoPoint(&tInputEvent, &tPreInputEvent) > SLIP_MIN_DISTANCE)
{                            /* 重新計算中心點 */g_iXofZoomedPicShowInCenter -= (tInputEvent.iX - tPreInputEvent.iX);g_iYofZoomedPicShowInCenter -= (tInputEvent.iY - tPreInputEvent.iY);/* 顯示新數據 */ShowZoomedPictureInLayout(ptZoomedPicPixelDatas, ptDevVideoMem);/* 記錄上次滑動點 */tPreInputEvent = tInputEvent;                            
}

實驗效果：

一開始顯示是居中顯示