Nana開發：映像混合

混合映像是用於建立強大且迷人的使用者介面的重要方法之一。這是一篇嚮導，用於展示如何使用Nana庫來混合映像並顯示混合的結果。

在開始這個嚮導之前，我們需要準備兩張用於混合的圖片。

image01

image02

這兩張圖片是PNG格式的，在使用之前，我們需要開啟Nana庫對PNG的支援。

現在，我們來編碼：

#include <nana/gui/wvl.hpp>#include <nana/gui/drawing.hpp>#include <nana/gui/timer.hpp>class tsform: public nana::gui::form{public://因為我們準備的圖片大小是 450*300,//這個視窗建立的大小與圖片保持一致.tsform():nana::gui::form(nana::gui::API::make_center(450, 300)), fade_rate_(0.1), delta_(0.1){//開啟影像檔.image1_.open(STR(“image01.png”));image2_.open(STR(“image02.png”));timer_.make_tick(nana::make_fun(*this, &tsform::_m_blend));timer_.interval(10);}private:void _m_blend(){fade_rate_ += delta_;if(fade_rate_ > 1){fade_rate_ = 1;delta_ = -0.01;}else if(fade_rate_ < 0){fade_rate_ = 0;delta_ = 0.01;}            //在混合之前，需要將映像拷貝到graphics對象中nana::paint::graphics graph1(450, 300);image1_.paste(graph1, 0, 0);nana::paint::graphics graph2(450, 300);image2_.paste(graph2, 0, 0);//執行混合，結果儲存在graph2對象中.graph1.blend(graph2, 0, 0, fade_rate_);//顯示結果，將graph2中的內容繪製到視窗上.nana::gui::drawing drawing(*this);drawing.clear();drawing.bitblt(0, 0, 450, 300, graph2, 0, 0);drawing.update();}private:double    fade_rate_;double    delta_;nana::gui::timer    timer_;nana::paint::image image1_, image2_;};int main(){tsform fm;fm.show();nana::gui::exec();}

運行程式，看它的實際運行效果。

初始映像

混合的映像

最終的映像

程式重複地執行映像混合。