跳轉到主要內容

SVG Image

SVG Image是一種小工具,能夠繪製SVG圖像檔案,可環繞可調整的旋轉中心自由縮放及旋轉。

Note
  • 向量渲染功能必須在TouchGFX Generator中啟用,才能使用SVG Image小工具。
  • 複雜SVG圖像檔案會對MCU負載造成重大影響。
  • 在模擬器中執行的SVG圖像

    小工具組

    SVG Image位於TouchGFX Designer中的Images小工具組中。

    TouchGFX Designer中的SVG Image

    屬性

    以下是TouchGFX Designer中SVG Image的屬性。

    屬性組屬性說明
    Name小工具的名稱Name是TouchGFX Designer和程式碼中使用的唯一識別碼
    LocationXY指定小工具左上角相對於父項的位置。

    WH指定小工具的寬度和高度。 小工具的大小是由關聯的圖像大小決定的。

    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是在執行階段期間調整大小,此選項對圖像大小不會有任何影響。

    Image Position (圖像位置) XY指定圖像的左上角。

    Image Scale (圖像縮放) XY指定縮放係數,用於在X及/或Y方向縮放圖像。

    Rotation Center (旋轉中心) XY指定旋轉中心,而Rotation (deg)(旋轉度數)指定旋轉圖像的角度度數。
    MixinDraggable (可拖動)指定小工具在執行階段是否可拖動。

    ClickListener指定點擊時小工具是否會發出回呼。

    MoveAnimator指定小工具是否可透過動畫變更XY值。

    交互

    以下章節介紹SVG Image支援的動作和觸發條件。

    動作

    小工具特有的動作說明
    旋轉SVG Image環繞SVG Image的旋轉中心讓SVG Image旋轉;旋轉可相對於目前方向或旋轉至特定角度。
    縮放SVG Image縮放SVG Image,可相對於目前大小縮放,或縮放為特定大小。
    調整小工具大小調整小工具的寬度和高度。
    標準小工具動作說明
    移動小工具隨時間的推移將小工具移動到新位置。
    隱藏小工具隱藏小工具(將可見性設定為false)。
    顯示小工具使隱藏的小工具可見(將可見性設定為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 Image:

    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,請嘗試在TouchGFX Designer中使用以下UI範本建立新應用程式:

    TouchGFX Designer中的SVG Image UI範本

    API參考