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);
}

完工，還是挺簡單的，另外還可以實現圖片在三維空間進行旋轉。