Shape(シェープ)
Shapeによってユーザは、任意の数のポイントを使用して任意の形状を描画できます。スケーリングや回転もサポートされています。
ウィジェット・グループ
Shapeは、TouchGFX DesignerのShapesウィジェット・グループ内にあります。
プロパティ
TouchGFX DesignerのShapeのプロパティは以下のとおりです。
プロパティ・グループ | プロパティの説明 |
---|---|
Name | ウィジェットの名前。 Nameは、TouchGFX Designerおよびコードで使用される一意の識別子です。 |
Location | XおよびYは、親を基準としてウィジェットの左上隅の位置を指定します。 WおよびHは、ウィジェットの幅と高さを指定します。 Lockは、ウィジェットを現在のX、Y、W、Hでロックするかどうかを指定します。 ウィジェットをロックすると、スクリーンを通したウィジェットとのインタラクションも無効になります。 Visibleは、ウィジェットの可視性を指定します。 ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。 |
Image & Color | ImageまたはColorは、Shapeに表示される色または画像を指定します。 |
Transform | Angleは、Originポイントを中心としてShapeの回転を指定します。 Scale XおよびScale Yは、Originポイントから水平 / 垂直方向にシェープのスケールを指定します。 Origin XおよびOrigin Yは、Pointsの原点とする位置を指定します。 |
Points | Pointsは、目的のシェープを作成するポイントを指定します。 ポイントごとに個別にXY座標を指定する必要があります。 |
Appearance | Alphaは、ウィジェットの透明度を指定します。 ウィジェットのアルファ値の範囲は、0~255です。 0は完全に透明で、255は塗りつぶされた状態です。 |
Mixins | Draggableは、ウィジェットが実行時にドラッグ可能かどうかを指定します。 ClickListenerは、ウィジェットがクリックされたときにコールバックを発行するかどうかを指定します。 FadeAnimatorは、ウィジェットがAlpha値への変更をアニメーション化できるかどうかを指定します。 MoveAnimatorは、ウィジェットがXおよびY値への変更をアニメーション化できるかどうかを指定します。 |
インタラクション
以下のセクションでは、Shapeによってサポートされるアクションとトリガについて説明します。
アクション
ウィジェット固有のアクション | 説明 |
---|---|
Scale Shape | 固定サイズに、または現在のサイズを基準としてShapeをスケーリングします。 |
Rotate Shape | 固定の角度に、または現在の角度を基準とする角度にShapeを回転させます。 |
Resize widget | ウィジェットの幅と高さを変更します。 |
標準のウィジェット・アクション | 説明 |
---|---|
Move widget | 時間の経過に伴ってウィジェットを新しい位置に移動します。 |
Fade widget | 時間の経過に伴ってウィジェットのアルファ値を変更します。 |
Hide widget | ウィジェットを非表示にします(可視性をfalseに設定します)。 |
Show widget | 非表示のウィジェットを表示します(可視性をtrueに設定します)。 |
トリガ
Shapeはトリガを発行しません。
パフォーマンス
ShapeはCanvasWidgetなので、目的のシェープをレンダリングするためにマイクロコントローラに大きく依存します。 このため、Shapeは、ほとんどのプラットフォーム上で要求の厳しいウィジェットであると見なされます。
CanvasWidgetの描画パフォーマンスの詳細については、「一般的なUIコンポーネントのパフォーマンス」セクションを参照してください。
例
生成済みコード
ビューの基底クラスの生成済みコードを見ると、TouchGFX DesignerによるShapeの設定方法がわかります。
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();
}