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

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 specifies if the image position should be locked to the center of the widget.
    This option only applies in TouchGFX Designer, i.e. if the SVG Image is resized during runtime, this option doesn't have any effect on the centered position of the image.

    Fit Image To Size will scale the image to fit the size of the SVG Image widget.
    This option only applies in TouchGFX Designer, i.e. if the SVG Image is resized during runtime, this option doesn't have any effect on the image size.

    Image Position X and Y specifies the top left corner of the image.

    Image Scale X and Y specifies the scaling factors used to scale the image in the X and/or Y direction.

    Rotation Center X and Y specifies the center of rotation and Rotation (deg) specifies the angle in degrees to rotate the image.
    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参照