TouchGFX 使用TextureMapper类实现指针旋转（仪表）功能

软件环境：STM32CubeMX5.3  、TouchGFX 4.10.0 Designer、uVision5.28.0.0

硬件环境：正点原子阿波罗STM32F767开发板、4.3寸LCD接口屏（480×272）

       通过让图片旋转，我们可以用TouchGFX模拟机械表的指针旋转，油表指针旋转，风扇转动等待各种炫酷的功能：

下面开始讲解怎么实现模拟风扇转动。

1. 使用TouchGFX Designer在风扇叶片图片(image00.png), 会自动生成图片资源。

 

2.  图片的旋转使用TextureMapper控件实现，该控件只能使用代码进行添加，首先我们在屏幕的Screen2View.hpp添加如下代码

3.  修改Screen2View.cpp的setupScreen函数，设置textureMapperImage2D属性。

这里需要注意textureMapperImage2D上下左右比图片要多出40个像素，这样可以避免在图片旋转时图片显示不全

void Screen2View::setupScreen()
{
    Screen2ViewBase::setupScreen();
    // Extra space for the image to rotate in
    int borderWidth = 40;
    int borderHeight = 40;
    
    // Setup the texture mapper image that does 2D rotation
    textureMapperImage2D.setBitmap(Bitmap(BITMAP_IMAGE00_ID));
    
    int imageWidth = textureMapperImage2D.getBitmap().getWidth();//获图片的宽度
    int imageHeight = textureMapperImage2D.getBitmap().getHeight();//获取图片的高度
    
    textureMapperImage2D.setXY(100, 0);
    textureMapperImage2D.setWidth(imageWidth + borderWidth * 2);
    textureMapperImage2D.setHeight(imageHeight + borderHeight * 2);
    textureMapperImage2D.setBitmapPosition(borderWidth, borderHeight);
    textureMapperImage2D.setOrigo(textureMapperImage2D.getBitmapPositionX() + 97, textureMapperImage2D.getBitmapPositionY() + 108);

    add(textureMapperImage2D);
}

4.在构造函数中将zAngle2D赋值0.0f，deltaZangle2D赋值0.059

Screen2View::Screen2View():    
    zAngle2D(0.0f),
    deltaZangle2D(0.059f)
{
    
}

5. 重写handleTickEvent函数，在函数中不断调整旋转角度

void Screen2View::handleTickEvent()
{
    zAngle2D += deltaZangle2D;
    
    // Update the images with the new angles
    // The image is automatically invalidated (the optimal minimal area).
    // If any of the set..() methods (e.g. setOrigo, setCamera, setRenderingAlgorithm...) are used
    // remember to manually invalidate the image afterwards (textureMapperImage2D.invalidate()).
    textureMapperImage2D.updateAngles(0.0F, 0.0F, zAngle2D);
}

完工，还是挺简单的，另外还可以实现图片在三维空间进行旋转。