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

SVG Image（SVG画像）

SVG Imageは、SVG画像ファイルの描画機能を持つウィジェットで、自由にスケーリングしたり、調整可能な回転中心点を中心として回転したりすることができます。

Note
  • SVG Imageウィジェットを使用するには、TouchGFX Generatorでベクタ･レンダリングを有効にする必要があります。
  • 複雑なSVG画像ファイルは、マイクロコントローラの負荷に大きく影響します。

    • シミュレータで実行されるSVG Image

    ウィジェット･グループ​

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

    TouchGFX DesignerのSVG Image

    プロパティ​

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

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

    WおよびHは、ウィジェットの幅と高さを指定します。 ウィジェットのサイズは、関連付けられた画像のサイズによって決まります。

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

    Visibleは、ウィジェットの可視性を指定します。 ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。
    SVGSVGは、関連付けられるSVG画像を指定します。 Projectタブでインポートした画像から選択するか、Stockタブで無料のTouchGFXの画像のセットから選択します。

    Lock Image to Centerは、画像の位置をウィジェットの中央にロックするかどうかを指定します。
    このオプションはTouchGFX Designerのみで適用されます。つまり、ランタイム時にSVG画像のサイズが変更された場合、このオプションは画像の中心位置に影響しなくなります。

    Fit Image To Sizeは、SVG Imageウィジェットのサイズに合うように画像をスケーリングします。
    このオプションはTouchGFX Designerのみで適用されます。つまり、ランタイム時にSVG画像のサイズが変更された場合、このオプションは画像のサイズに影響しなくなります。

    Image Position XおよびYは、画像の左上隅を指定します。

    Image Scale XおよびYは、Xおよび / またはY方向に画像をスケーリングするときに使用するスケーリング･ファクタを指定します。

    Rotation Center XおよびYは回転の中心を指定し、Rotation (deg)は画像の回転角を度数で指定します。
    MixinDraggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。

    ClickListenerは、ウィジェットがクリックされたときにコールバックを発行するかどうかを指定します。

    MoveAnimatorは、ウィジェットがXおよびY値への変更をアニメーション化できるかどうかを指定します。

    インタラクション​

    以下のセクションでは、SVG Imageによってサポートされるアクションとトリガについて説明します。

    アクション​

    ウィジェット固有のアクション説明
    Rotate SVG ImageRotation Centerを中心に、現在の向きまたは特定の角度を基準にSVG画像を回転させます。
    Scale SVG Image現在のサイズまたは特定のサイズを基準に、SVG画像をスケーリングします。
    Resize widgetウィジェットの幅と高さを変更します。
    標準のウィジェット･アクション説明
    Move widget時間の経過に伴ってウィジェットを新しい位置に移動します。
    Hide widgetウィジェットを非表示にします（可視性をfalseに設定します）。
    Show widget非表示のウィジェットを表示します（可視性をtrueに設定します）。

    トリガ​

    SVG Imageはトリガを発行しません。

    パフォーマンス​

    SVG Imageウィジェットのパフォーマンスは、使用するSVG画像ファイルの複雑さ（要素の数、パスの数、パスのサイズ、グラデーションの使用など）によって異なります。 このため、SVG Imageは、ほとんどのプラットフォーム上で要求の厳しいウィジェットであると見なされます。

    描画のパフォーマンスの詳細については、「一般的なUIコンポーネントのパフォーマンス」セクションを参照してください。

    例​

    生成済みコード​

    ビューの基底クラスの生成済みコードを見ると、TouchGFX DesignerによるSVG Imageの設定方法がわかります。

    Screen1ViewBase.cpp
    #include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
    #include <touchgfx/canvas_widget_renderer/CanvasWidgetRenderer.hpp>
    #include <touchgfx/Color.hpp>
    #include<images/SVGDatabase.hpp>

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

        svgImage.setSVG(SVG_ALTERNATE_THEME_IMAGES_LOGOS_TOUCHGFX_GRADIENT_EMBOSSED_SVG_ID);
        svgImage.setPosition(26, 25, 260, 180);
        svgImage.setScale(1.2f, 0.8f);
        svgImage.setImagePosition(40, 30);
        svgImage.setRotationCenter(130, 90);
        svgImage.setRotation(5);

        add(svgImage);
    }

    Screen1ViewBase::~Screen1ViewBase()
    {
        touchgfx::CanvasWidgetRenderer::resetBuffer();
    }

    void Screen1ViewBase::setupScreen()
    {
    }
    Tip
    ユーザ･コードでは、これらの関数や、SVGImageクラスで使用可能なその他の関数を使用できます。 ウィジェットの外観を変更する場合には、 svgImage.invalidate() を呼び出して、再描画を行う必要があります。

    ユーザ･コード​

    次のコード例は、handleTickEvent()で連続的に回転を調整することで、SVG画像を回転させる方法を示しています。

    mainView.cpp
    #include <gui/screen1_screen/Screen1View.hpp>

    Screen1View::Screen1View()
    {
    }

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

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

    void Screen1View::handleTickEvent()
    {
        svgImage.setRotation(svgImage.getRotation() + 2.0f);
        svgImage.invalidate();
    }

    TouchGFX Designerの例​

    SVG Imageをさらに探索するには、次のUIテンプレートを使用して、TouchGFX Designer内で新しいアプリケーションを作成してみてください。

    TouchGFX DesignerのSVG Image UIテンプレート

    API参照​

    Further reading
  • TouchGFX Generatorでのベクタ･レンダリングの設定
  • SVGグラフィックス
  • SVG ImageクラスのAPI参照