一、控件介绍

平铺图像是一个能够显示平铺位图的简单小部件。这意味着当“平铺图像”大于所提供的位图时，位图将水平和垂直重复。位图可以与背景进行alpha混合，并具有透明区域。

touchGFX控件学习二、Tiled Image控件_学习


控件属性：

touchGFX控件学习二、Tiled Image控件_学习_02

二、准备用到的素材

将素材另存为保存就行

touchGFX控件学习二、Tiled Image控件_控件_03


touchGFX控件学习二、Tiled Image控件_控件_04


touchGFX控件学习二、Tiled Image控件_控件_05

三、touchGFX Designer工程搭建

1、放置一个背景

touchGFX控件学习二、Tiled Image控件_ui_06

2、添加图片资源

touchGFX控件学习二、Tiled Image控件_学习_07

2、添加Tiled Image控件

touchGFX控件学习二、Tiled Image控件_位图_08


需要注意的是两个backgroundLayer要重叠到一起，三个控件都不需要过多设置

2、生成代码

touchGFX控件学习二、Tiled Image控件_控件_09

四、代码修改

让图片水平动起来

打开​​Screen1View.hpp​​​文件声明​​void handleTickEvent();​​函数

touchGFX控件学习二、Tiled Image控件_ui_10


打开Screen1View.cpp函数实现

touchGFX控件学习二、Tiled Image控件_控件_11

void Screen1View::handleTickEvent()
{
    static int timCnt=0;
    timCnt++;
    if(timCnt >=2)
    {
        timCnt = 0;
        ground.setOffset(ground.getXOffset() + 4, 0);
        ground.invalidate();

        backgroundLayer01.setOffset(backgroundLayer01.getXOffset() + 1, 0);
        backgroundLayer01.invalidate();

        backgroundLayer02.setOffset(backgroundLayer02.getXOffset() + 2, 0);
        backgroundLayer02.invalidate();
    }
}

这样图片就会水平移动

五、效果展示

touchGFX控件学习二、Tiled Image控件_学习_12