一.前言

? ? ?圖片播放器每個人都有用到，鑒于此，打算再造輪子，寫一個自己的圖片播放器，順便 鞏固所學的知識。

二.整體結構規劃
? ? ?把播放器劃分為三個界面。
? ? ?1> 主界面,也就是打開播放器看到的第一個界面主界面比較簡潔，放置了一個退出按鈕和一個打開圖片按鈕
? ? ?2> 圖片預覽界面，這個界面用于在用戶打開圖片后預覽縮略圖
? ? ?3> 圖片播放界面，也就是所謂的幻燈片播放圖片外加一點特效。

三.交互方式設計
? ? ?主要有三個界面相互跳轉，當主界面打開圖片后需要轉到圖片預覽界面。當用于在預覽界面按下return 按鈕需要返回主界面。這里主要有兩種方式可以實現交互。
? ? ?1. 利用QT信號與槽機制，當主界面轉到預覽界面的時候new一個預覽界面并綁定一個信號當預覽界面發出指定消息的時候主界面重新show而預覽界面hide關于QT信號與槽的實現沒有深入研究過，總體個人感覺用信號與槽來交互比較突兀雖然感覺很明了。但是這也導致信號與槽函數分布比較散亂，這里不采用該方式來交互。

? ? ?2. 利用QT事件機制,事件機制是QT主要通信交互方式，不論是繪制事件還是鼠標鍵盤事件，QT允許用戶繼承并從新實現這些事件處理函數從而完成用于想達到的繪制效果。另外，QT除了系統自帶的這些事件外還允許用于自定義事件。
? ? ? ? ?Constant ? ? ? ? ? ? ?Value ? Description
? ? ? ? QEvent::User ? ? ? 1000 ? ?User-defined event.
? ? ? ? QEvent::MaxUser 65535 Last user event ID.
以上指定了自定義事件ID的范圍從1000-65535。
用于事件處理的一系列接口：
bool IBrowserEngine::event(QEvent *pstEvent);
事件分發函數，用于只需要從新實現一下這個接口即可。
QApplication::sendEvent((m_pUpperWindow), pEvent);
事件發送函數，等到事件被處理才返回。
QApplication::postEvent((m_pUpperWindow), pEvent);
事件發送函數，把事件投放到事件隊列里面，直接返回。

? ? 以上接口與WINDOWS消息機制十分類似只不過現在叫做事件循環而已。利用事件機制可以把自定義事件與系統事件的分發整個在一起，代碼比較緊湊。這里采用事件機制用于交互。
四.GUI設計問題點
? ? ?1.不規則按鈕的實現
? ? ?按鈕必定是矩形的，我們不可能造一個圓形的按鈕出來，圖片也是一樣，平常我們見到的多數不規則圖片，大多數不過是PNG類型的圖片經過加工處理罷了。播放器界面有三個不規則按鈕，一個播放按鈕，兩個切換按鈕，這里有兩種方式可以實現不規則按鈕。
? ? 1）使用png圖片, 在圖片處理過程中，我們可以把png圖片上不需要的點扣除，扣除的部分也就是透明的部分，得到一個不規則的圖片。在圖片顯示過程，透明的部分就是一個遮罩，把其下面部分的顏色顯露出來而自身隱藏。
QT里面以上步驟表示如下：
QPixmap pix;
pix.load("./images/linux.png", ...);
setMask(pix.mask());
說明：
? ? ?void QWidget::setMask ( const QBitmap & bitmap )
只有在bitmap中像素數據是1的地方才會顯示出widget的相應像素來. Bitmap就是像素數據只有兩個值: 0和1 (1 bit-depth, monochrome).
pix.mask()用于獲取png圖片的掩碼，setMask執行覆蓋隱藏的操作。注意：只有Png圖片可以這樣操作，其他格式圖片沒有效果。
? ? 2）利用設置掩碼圖片的方式，利用兩張圖片疊加的方式，把相同顏色部分隱藏，顯示不同的部分，這就是掩碼的作用。
// 掩碼
m_btnMask128.load("./pic/mask128.bmp");
//設置圖標
ui->m_BtnAutoPlayer->setIcon(m_StartPix);
ui->m_BtnAutoPlayer->setIconSize(QSize(BTNSTART_WIDE, BTNSTART_HIGH));
//設置掩碼
ui->m_BtnAutoPlayer->setMask(QBitmap(m_btnMask128));
說明：
? ? ?這里我們用了一張外圍是白色里面是非白色的背景圖片，對于位圖只有0和1兩個像素。只有在像素為1的地方才會顯示widget的像素。從而達到了我們要的效果。

? ? 2.按鈕凹凸效果的呈現
? ? 要實現按鈕的凹凸效果比較簡單，通常按鈕會有三種狀態，正常/按下/飄過。我們只需要在不同的狀態下切換圖片即可，如果想要把效果來的明顯一點可以利用一個定時器把切換圖片這個過程拉長一點。具體根據個人喜好。
? ? 3.實現圖片切換的動畫效果
? ? 在圖片切換過程中，如果切換太快用于根本沒有感覺，體驗效果不是很好，因此加入一個動畫效果。這里實現的動畫效果比較簡單，主要利于了void QPainter::drawPixmap(const QRectF & target, const QPixmap & pixmap, const QRectF & source)這個接口，解釋一下，這個接口用于把pixmap的source區域繪制到target指定的區域。target指定的是屏幕的某個區域，而source指定的是圖片的某個區域。

動畫效果實現原理：利用一個定時器延緩圖片切換的過程，每次定時器timeout增加要顯示圖片的target區域和source區域，而減小被替換圖片的targert區域和source區域。隨著坐標以及顯示區域的緩慢變化達到了動畫的效果。

需要代碼的同學可以到我的資源下載。

____________The End。

總結

以上是生活随笔為你收集整理的QT APP实战-图片播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。