メイン・コンテンツまでスキップ

Shape(シェープ)

Shapeによってユーザは、任意の数のポイントを使用して任意の形状を描画できます。スケーリングや回転もサポートされています。

シミュレータで実行されるShape

ウィジェット・グループ

Shapeは、TouchGFX DesignerのShapesウィジェット・グループ内にあります。

TouchGFX DesignerのShape

プロパティ

TouchGFX DesignerのShapeのプロパティは以下のとおりです。

プロパティ・グループプロパティの説明
Nameウィジェットの名前。 Nameは、TouchGFX Designerおよびコードで使用される一意の識別子です。
LocationXおよびYは、親を基準としてウィジェットの左上隅の位置を指定します。

WおよびHは、ウィジェットの幅と高さを指定します。

Lockは、ウィジェットを現在のX、Y、W、Hでロックするかどうかを指定します。
ウィジェットをロックすると、スクリーンを通したウィジェットとのインタラクションも無効になります。

Visibleは、ウィジェットの可視性を指定します。 ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。
Image & ColorImageまたはColorは、Shapeに表示される色または画像を指定します。
TransformAngleは、Originポイントを中心としてShapeの回転を指定します。

Scale XおよびScale Yは、Originポイントから水平 / 垂直方向にシェープのスケールを指定します。

Origin XおよびOrigin Yは、Pointsの原点とする位置を指定します。
PointsPointsは、目的のシェープを作成するポイントを指定します。
ポイントごとに個別にXY座標を指定する必要があります。
AppearanceAlphaは、ウィジェットの透明度を指定します。
ウィジェットのアルファ値の範囲は、0~255です。 0は完全に透明で、255は塗りつぶされた状態です。
MixinsDraggableは、ウィジェットが実行時にドラッグ可能かどうかを指定します。

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

API参照