Shape（シェープ）

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

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

ウィジェット･グループ

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

TouchGFX DesignerのShape

プロパティ

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::getColorFrom24BitRGB(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::getColorFrom24BitRGB(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参照