跳轉到主要內容

形狀

形狀(Shape)允許用戶用任意數量的點繪製任何形狀，同時也支援縮放和旋轉。

在模擬器中運行的形狀

小部件組​

形狀位於TouchGFX Designer中的“Shapes”小部件組中。

TouchGFX Designer中的形狀

屬性​

TouchGFX Designer中形狀的屬性。

屬性組屬性說明
Name小部件的名稱。 Name是TouchGFX Designer和程式碼中使用的唯一識別碼。
LocationX 和Y 指定小部件左上角相對于其父的位置。

W 和 H 指定小部件的寬度和高度。

鎖定指定小部件是否應鎖定為其當前的X、Y、W和H。
如果鎖定小部件，還會禁止通過螢幕與小部件進行交互。

可見 指定小部件的可見性。 使小部件不可見還將禁用與小部件之間通過螢幕進行的交互。
Image & Color圖像或顏色指定要在形狀中顯示的顏色或圖像。
Transform角度指定形狀如何圍繞其原點旋轉。

X軸縮放和Y軸縮放指定形狀從原點的水平和垂直縮放。

X軸原點和Y軸原點指定點的起始位置。
Points點指定創建所需形狀的點。
每個點都需要一個X和Y座標。
AppearanceAlpha 指定小部件的透明度。
小部件Alpha值的範圍是0到255。 0為完全透明，255為實心。
Mixin可拖動 指定在運行時小部件是否可拖動。

ClickListener 指定小部件被點擊時是否會呼叫callback函數。

FadeAnimator 指定小部件是否可繪製其 Alpha 值變化的動畫。

MoveAnimator 指定小部件是否可繪製 X 和 Y 值變化的動畫。

交互​

下面的部分介紹了形狀支援的操作和觸發條件。

操作​

小部件特有的操作說明
Scale Shape將形狀縮放為固定大小或相對於其當前大小進行縮放
Rotate Shape將形狀旋轉到固定角度或相對於其當前角度進行旋轉
Resize widget調整小部件的寬度和高度。
標準小部件操作說明
Move widget隨時間的推移將小部件移動到新位置。
Fade widget隨時間的推移改變小部件的Alpha值。
Hide widget隱藏小部件（將可見性設置為false）。
Show widget使隱藏的小部件可見（將可見性設置為true）。

觸發條件​

形狀不會產生任何觸發條件。

性能​

形狀是一個CanvasWidget，高度依賴於MCU渲染所需的形狀。 因此，在大部分平臺上，會將形狀視為性能要求高的小部件。

更多關於CanvasWidget繪製性能的資訊，請閱讀通用UI元件性能部分。

範例​

生成程式碼​

在生成的視圖基類的程式碼中，可以查看TouchGFX Designer是如何創建形狀的。

Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"
#include <touchgfx/Color.hpp>

Screen1ViewBase::Screen1ViewBase()
{
    touchgfx::CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);

    shape.setPosition(140, 36, 200, 200);
    shape.setOrigin(100.000f, 100.000f);
    shape.setScale(1.000f, 1.000f);
    shape.setAngle(0.000f);
    shapePainter.setColor(touchgfx::Color::getColorFromRGB(60, 180, 230));
    shape.setPainter(shapePainter);
    const touchgfx::AbstractShape::ShapePoint<float> shapePoints[4] = { { 0.000f, -100.000f }, { 100.000f, 0.000f }, { 0.000f, 100.000f }, { -100.000f, 0.000f } };
    shape.setShape(shapePoints);

    add(shape);
}

void Screen1ViewBase::setupScreen()
{

}
Tip
您可以在用戶程式碼中使用Shape類中的這些函數和其他可用函數。 如果更改了小部件的外觀，請必須呼叫 shape.invalidate() 以強制重繪。

用戶程式碼​

下面的程式碼展示如何設置一個填充了一些亂數的形狀：

Screen1View.hpp
#ifndef SCREEN1VIEW_HPP
#define SCREEN1VIEW_HPP

#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include <touchgfx/widgets/canvas/Shape.hpp>
#include <touchgfx/widgets/canvas/PainterRGB888.hpp>

class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();

    /*
     * Member Declarations
     */
    touchgfx::Shape<100> shape;
    touchgfx::PainterRGB888 shapePainter;
protected:
    void fillData(int maxLength);
};

#endif // SCREEN1VIEW_HPP
Screen1View.cpp
#include <gui/screen1_screen/Screen1View.hpp>
#include <touchgfx/Color.hpp>

Screen1View::Screen1View()
{
}

void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();
    shape.setPosition(0, 0, 480, 272);
    shape.setOrigin(0.000f, 272.000f);
    shapePainter.setColor(touchgfx::Color::getColorFromRGB(0, 171, 223));
    shape.setPainter(shapePainter);
    fillData(100);
    add(shape);
}

void Screen1View::tearDownScreen()
{
    Screen1ViewBase::tearDownScreen();
}

void Screen1View::fillData(int maxLength)
{
    float highestX = 0.000f;
    for (int i = 0; i < maxLength - 1; ++i)
    {
        float y = static_cast <float> (rand()) / (static_cast <float> (RAND_MAX/272));
        float x = highestX + static_cast <float> (rand()) /( static_cast <float> (RAND_MAX/((highestX + 10.000f)-highestX)));
        highestX = x;
        shape.setCorner(i, CWRUtil::toQ5<float>(x), CWRUtil::toQ5<float>(-y));
    }
    shape.setCorner(maxLength - 1, CWRUtil::toQ5<float>(highestX), CWRUtil::toQ5<float>(0));
    shape.updateAbstractShapeCache();
}

API參考​

Further reading
  • Shape類別的API參考