跳轉到主要內容

形狀

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

在模擬器中運行的形狀

小部件組

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

TouchGFX Designer中的形狀

屬性

TouchGFX Designer中形狀的屬性。

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

WH 指定小部件的寬度和高度。

鎖定指定小部件是否應鎖定為其當前的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 指定小部件是否可繪製 XY 值變化的動畫。

交互

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

操作

小部件特有的操作說明
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