【 逢7发帖赢大礼】1、利用CubeMX生成正点原子H7R7开发板的STM32CubeIDE工程

【 逢7发帖赢大礼】2、利用CubeMX添加TouchGFX功能：CubeMX配置

【 逢7发帖赢大礼】3、利用CubeMX添加TouchGFX功能：工程修改和编译烧录

【 逢7发帖赢大礼】4、CubeMX工程复用以及TouchGFX应用

之前的帖子介绍如何为正点原子H7R7开发板适配TouchGFX，TouchGFX中提供多种多样的GUI控件，实现多种显示效果。下面介绍如何实现图片滚动的效果

1、添加素材和添加控件

实现图片的滚动效果，这里通过实现云彩流动的效果进行说明。在TouchGFX工程的Asset\image文件夹中放入以下图片

在TouchGFX中添加背景图以及Tiled Image控件。Tiled Image控件的图片选择添加到工程中的素材图片。

完成上述操作，生成TouchGFX代码。

2、修改TouchGFX代码，实现云彩流动效果

在Screen1View.hpp中添加Screen1View类的声明，通过重写虚函数handleTickEvent添加图像数据周期性的处理流程。

class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void handleTickEvent();
protected:
    int tickcnt;
};

在Screen1View.cpp定义以下函数，即可实现云彩流动的显示效果。

Screen1View::Screen1View() :
    tickcnt(0)
{

}

void Screen1View::handleTickEvent()
{
    tickcnt++;
    // Animate tiled sky image
    if(!(tickcnt % 2))
    {
        sky_loop_bg.setXOffset((sky_loop_bg.getXOffset() + 1) % HAL::DISPLAY_WIDTH);
        sky_loop_bg.invalidate();
    }
}

3、总结

TouchGFX中提供的多种控件，在对应界面的继承类中添加自定义的代码即可实现不同的显示效果。