数码相框项目之显示一张可放大、缩小、拖拽的图片
之前我做過一個電子相框的項目，涉及到的重難點主要為：在LCD上放大、縮小、移動圖片。
首先我們得明白的一點是：無論是放大或縮小，實際上都是對原圖進行等比例的縮小，然后在LCD上面顯示，只不過縮小的程度不同罷了（關(guān)于如何取出原圖的數(shù)據(jù)，然后縮小為我們需要的大小，可以看我另外一篇博客：https://blog.csdn.net/qq_37659294/article/details/104382032）。
經(jīng)過上一篇博客介紹的縮放算法之后，我們已經(jīng)得到一張縮小后、和原圖等比例的圖片并存放在buffer中，但這只是得到一張圖片，還沒有顯示到LCD上，那么我們?nèi)绾螌⑦@張圖片在LCD上動態(tài)地放大、縮小、移動呢？
?
首先，我們來看一下一個非常關(guān)鍵的函數(shù)，ShowZoomedPictureInLayout函數(shù)，這個函數(shù)是在LCD上顯示一張經(jīng)過縮放、移動的圖片，因為圖片的大小可能比顯示區(qū)域要大，也有可能小，也有可能被移動到相框的邊緣，只能顯示圖片的一部分，所以我們必須確認要從圖片的哪里（iStartXofNewPic，iStartYofNewPic）開始取數(shù)據(jù)，在顯示區(qū)域的哪里（iStartXofOldPic，iStartYofOldPic）開始顯示，顯示多大（iWidthPictureInPlay，iHeightPictureInPlay）的區(qū)域。
ShowZoomedPictureInLayout函數(shù)的實現(xiàn)思路為：
①計算出iStartXofNewPic，iStartYofNewPic，判斷要從圖片的哪個位置開始取數(shù)據(jù)
②利用 g_iXofZoomedPicShowInCenter - iStartXofNewPic?= iDeltaX = 顯示區(qū)中心點X坐標(g_tManualPictureLayout.iTopLeftX + iPictureLayoutWidth / 2) - iStartXofOldPic（LCD上顯示圖片的起始坐標）等式算出iStartXofOldPic，iStartYofOldPic，判斷要從顯示區(qū)域的哪個位置開始顯示圖片
③計算出實際顯示的寬度iWidthPictureInPlay和高度iHeightPictureInPlay
④根據(jù)上面計算好的參數(shù)，把圖片數(shù)據(jù)刷到LCD的framebuffer中
/**********************************************************************
?* 函數(shù)名稱： ShowZoomedPictureInLayout
?* 功能描述： 在"manual頁面"中顯示經(jīng)過縮放的圖片
?* 輸入?yún)?shù)： ptZoomedPicPixelDatas - 內(nèi)含已經(jīng)縮放的圖片的象素數(shù)據(jù)
?* ? ? ? ? ? ?ptVideoMem ? ? ? ? ? ?- 在這個VideoMem中顯示
?* 輸出參數(shù)： 無
?* 返 回 值： 無
?***********************************************************************/
static void ShowZoomedPictureInLayout(PT_PixelDatas ptZoomedPicPixelDatas, PT_VideoMem ptVideoMem)
{
? ? /* iStartXofNewPic和iStartYofNewPic這兩個變量意思不是新圖片在顯示區(qū)域(或者整個屏幕區(qū)域)的xy坐標
? ? ?* 而是從縮放后的圖片坐標(iStartXofNewPic,iStartYofNewPic)開始，顯示這個圖片
? ? ?* 坐標(x,y)之前的一塊區(qū)域，即橫坐標小于x，縱坐標小于y的所有地方，都不顯示
? ? ?* 因為可能縮放后的圖片，不能完全顯示到屏幕上，只能顯示一部分
? ? ?* 算出從圖片什么地方開始顯示，并且加上一個長和寬，那么在屏上顯示的部分就可以描繪出來了
? ? ?*/
? ? int iStartXofNewPic, iStartYofNewPic;
?? ?/* iStartXofOldPic和iStartYofOldPic這兩個變量并說不是上一張圖片的顯示位置，而是新圖片在屏幕顯示的起始坐標
?? ? * 這六個變量連起來想就是：
?? ? * 從zoom后的圖片的(iStartXofNewPic,iStartYofNewPic)這個地方開始
?? ? * 取長寬為iWidthPictureInPlay, iHeightPictureInPlay這么大的一塊區(qū)域
?? ? * 顯示到顯存的(iStartXofOldPic,iStartYofOldPic)這個地方去
?? ? */
? ? int iStartXofOldPic, iStartYofOldPic;
? ? int iWidthPictureInPlay, iHeightPictureInPlay;
? ? int iPictureLayoutWidth, iPictureLayoutHeight;
? ? int iDeltaX, iDeltaY;//計算過程的中間變量
?
?? ?/* iPictureLayoutWidth? 顯示區(qū)域的寬
?? ? * iPictureLayoutHeight 顯示區(qū)域的高
?? ? */
? ? iPictureLayoutWidth ?= g_tManualPictureLayout.iBotRightX - g_tManualPictureLayout.iTopLeftX + 1;
? ? iPictureLayoutHeight = g_tManualPictureLayout.iBotRightY - g_tManualPictureLayout.iTopLeftY + 1;
? ??
? ? /* g_iXofZoomedPicShowInCenter 是 圖片最左邊 到 顯示區(qū)中心 的距離，g_iXofZoomedPicShowInCenter = 縮放后寬的一半 + 移動的偏移量 (左移時為正，右移時為負（移動太大有可能變成負數(shù)的）)
?? ? * 這個變量第一次賦值是在ShowPictureInManualPage（第一次顯示圖片（居中顯示），這時候圖片的大小比LCD的圖片顯示區(qū)域小）這個函數(shù)里，其值就是顯示圖片的寬的一半，也代表著最左邊到中心的距離
?? ? * 在不移動時，g_iXofZoomedPicShowInCenter值跟著放大和縮小相同的倍數(shù)
?? ? * 當移動的時候，在ManualPageRun函數(shù)里"移動圖片"的處理邏輯中，左移就增加，右移就減小，
?? ? * 同理 g_iYofZoomedPicShowInCenter 是圖片顯示位置最上面到顯示區(qū)域中心的距離
?? ? */
? ? iStartXofNewPic = g_iXofZoomedPicShowInCenter - iPictureLayoutWidth/2;//利用g_iXofZoomedPicShowInCenter算出iStartXofNewPic，便知道了要從圖片的哪個位置取出數(shù)據(jù)來顯示了，對應(yīng)上面思路的第①步
? ? if (iStartXofNewPic < 0)//即g_iXofZoomedPicShowInCenter < iPictureLayoutWidth/2（顯示區(qū)寬的一半），說明圖片的最左邊在顯示區(qū)域內(nèi)
? ? {
? ? ? ? iStartXofNewPic = 0;//如果圖片的最左邊在顯示區(qū)域內(nèi)，那么就從圖片的最左邊開始取數(shù)據(jù)
? ? }
?? ?/* 這中間還有一種情況，就是
?? ? * 當 (iStartXofNewPic > 0) && (iStartXofNewPic < ptZoomedPicPixelDatas->iWidth) 時
?? ? * 表示 圖片最左邊 已經(jīng)移出了顯示區(qū)域（最右邊還在顯示區(qū)域內(nèi)），只能顯示一部分
?? ? * 此時 iStartXofNewPic = g_iXofZoomedPicShowInCenter - iPictureLayoutWidth/2;
?? ? * 表示就從圖片的這個地方開始顯示
?? ? */
? ? if (iStartXofNewPic > ptZoomedPicPixelDatas->iWidth)//即g_iXofZoomedPicShowInCenter >?ptZoomedPicPixelDatas->iWidth（圖寬） + iPictureLayoutWidth/2（顯示區(qū)寬的一半），說明圖片已經(jīng)完全左移出去了
? ? {
? ? ? ? iStartXofNewPic = ptZoomedPicPixelDatas->iWidth;//整張圖片都已經(jīng)被左移出顯示區(qū)域了，不用顯示了
? ? }
? ? ?/* iDeltaX 是 實際所顯示圖片的起始位置?到 顯示區(qū)域中心點 的距離，由g_iXofZoomedPicShowInCenter減去iStartXofNewPic得到，只是一個用來計算iStartXofOldPic的中間變量
? ? ?* 因為可能會移動到或者放大到左邊不能從頭開始，就是 0<iStartXofNewPic<ptZoomedPicPixelDatas->iWidth的情況了
? ? ?* 這個式子算出的是，實際圖片開始顯示的最左邊 到 顯示區(qū)域中心點的距離
? ? ?* iDeltaX有可能是負數(shù)（當圖片移動到中心線右邊時，那么iDeltaX就是個負數(shù)了），但因為我們是利用數(shù)學等式來計算iStartXofOldPic，最后負負會得正
?? ? */
? ? iDeltaX = g_iXofZoomedPicShowInCenter - iStartXofNewPic;
? ? ?/* g_iXofZoomedPicShowInCenter - iStartXofNewPic
? ? ?* = iDeltaX
? ? ?* = 顯示區(qū)中心點X坐標(g_tManualPictureLayout.iTopLeftX + iPictureLayoutWidth / 2) - iStartXofOldPic（LCD上顯示圖片的起始坐標）
? ? ?* 根據(jù)上面的等式我們可算出?iStartXofOldPic
?? ? */
? ? iStartXofOldPic = (g_tManualPictureLayout.iTopLeftX + iPictureLayoutWidth / 2) - iDeltaX;
? ? ?/* 當 iStartXofNewPic = ptZoomedPicPixelDatas->iWidth 時，說明整張圖片已經(jīng)從左邊劃出去了
?? ? * 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 是從顯示位置開始，到可以顯示圖片區(qū)域的結(jié)束，一共多寬
?? ? * 這兩個選一個小的，作為實際顯示的寬度
?? ? */
? ? if ((ptZoomedPicPixelDatas->iWidth - iStartXofNewPic) > (g_tManualPictureLayout.iBotRightX - iStartXofOldPic + 1))
? ? ? ? iWidthPictureInPlay = (g_tManualPictureLayout.iBotRightX - iStartXofOldPic + 1);
? ? else
? ? ? ? iWidthPictureInPlay = (ptZoomedPicPixelDatas->iWidth - iStartXofNewPic);
? ??
? ? ?/* 上面是關(guān)于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);
? ? }
? ?
? ? ?/* 把整個圖片顯示區(qū)填充為背景色 */? ??
? ? ClearVideoMemRegion(ptVideoMem, &g_tManualPictureLayout, COLOR_BACKGROUND);
? ? ?/* 傳入前面計算好的參數(shù)，顯示縮放、移動后的圖片
?? ? * iStartXofNewPic, iStartYofNewPic? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?：從圖片的哪個位置開始取數(shù)據(jù)
?? ? * iStartXofOldPic, iStartYofOldPic? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ：在LCD的哪個位置開始顯示圖片
?? ? * iWidthPictureInPlay, iHeightPictureInPlay ? ? ? ? ? ? ? ? ? ：正真顯示圖片的寬和高
?? ? * ptZoomedPicPixelDatas, &ptVideoMem->tPixelDatas：源和目的
?? ? */
? ? PicMergeRegion(iStartXofNewPic, iStartYofNewPic, iStartXofOldPic, iStartYofOldPic, iWidthPictureInPlay, iHeightPictureInPlay, ptZoomedPicPixelDatas, &ptVideoMem->tPixelDatas);
}
?
PicMergeRegion函數(shù)定義如下：
/*********************************************************************** 函數(shù)名稱： PicMergeRegion* 功能描述： 把新圖片的某部分, 合并入老圖片的指定區(qū)域* 輸入?yún)?shù)： iStartXofNewPic, iStartYofNewPic : 從新圖片的(iStartXofNewPic, iStartYofNewPic)座標處開始讀出數(shù)據(jù)用于合并* iStartXofOldPic, iStartYofOldPic : 合并到老圖片的(iStartXofOldPic, iStartYofOldPic)座標去* iWidth, iHeight : 合并區(qū)域的大小* ptNewPic : 新圖片* ptOldPic : 老圖片* 輸出參數(shù)： 無* 返 回 值： 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; /* 放大/縮小系數(shù) */ #define ZOOM_RATIO (0.9) case 2: /* 放大按鈕 */ {/* 獲得放大后的數(shù)據(jù) */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;/* 顯示新數(shù)據(jù) */ShowZoomedPictureInLayout(ptZoomedPicPixelDatas, ptDevVideoMem);break; }縮小：
/* 放大/縮小系數(shù) */ #define ZOOM_RATIO (0.9) case 1: /* 縮小按鈕 */ {/* 獲得縮小后的數(shù)據(jù) */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;/* 顯示新數(shù)據(jù) */ShowZoomedPictureInLayout(ptZoomedPicPixelDatas, ptDevVideoMem);break; }拖拽：
/* 如果觸點滑動距離大于規(guī)定值, 則挪動圖片 */ if (DistanceBetweenTwoPoint(&tInputEvent, &tPreInputEvent) > SLIP_MIN_DISTANCE) { /* 重新計算中心點 */g_iXofZoomedPicShowInCenter -= (tInputEvent.iX - tPreInputEvent.iX);g_iYofZoomedPicShowInCenter -= (tInputEvent.iY - tPreInputEvent.iY);/* 顯示新數(shù)據(jù) */ShowZoomedPictureInLayout(ptZoomedPicPixelDatas, ptDevVideoMem);/* 記錄上次滑動點 */tPreInputEvent = tInputEvent; }實驗效果：
一開始顯示是居中顯示
拖拽?
放大?
參考文章：https://blog.csdn.net/qq_22655017/article/details/97627382
?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的数码相框项目之显示一张可放大、缩小、拖拽的图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 华为荣耀X2能改系统吗
- 下一篇： TCP协议-如何保证传输可靠性