Nana development: Image Mixing

Hybrid images are one of the most important ways to create powerful and fascinating user interfaces. This is a wizard that shows how to use the nana library to mix images and Display mixed results.

Before starting this wizard, we need to prepare two images for mixing.

Image01

Image02

These two images are in PNG format. before using them, we need to enable Nana library support for PNG.

Now let's encode:

# Include <Nana/GUI/wvl. HPP> # include <Nana/GUI/drawing. HPP> # include <Nana/GUI/Timer. HPP> class tsform: Public NANA: Gui: FORM {public: // the size of the image we prepared is 450*300, // The size of the window is the same as that of the image. tsform (): Nana: Gui: Form (NANA: Gui: API: make_center (450,300), fade_rate _ (0.1), delta _ (0.1) {// open the image file .image%.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;} // before mixing, copy the image to the graphics object. Nana: paint: Graphics graph1 (450,300); image1 _. paste (graph1, 0, 0); Nana: paint: Graphics graph2 (450,300); image2 _. paste (graph2, 0, 0); // execute a mixture and save the result to the graph2 object. graph1.blend (graph2, 0, 0, fade_rate _); // display the result and draw the content in graph2 to the window. 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 _; Nana: paint: Image image1 _, image2 _;}; int main () {tsform FM; FM. show (); Nana: Gui: exec ();}

Run the program to check its actual running effect.

Initial Image

Mixed Images

Final Image

The program repeatedly performs image mixing.