SVG Image
SVG Image是一種小工具,能夠繪製SVG圖像檔案,可環繞可調整的旋轉中心自由縮放及旋轉。
Note
小工具組
SVG Image位於TouchGFX Designer中的Images小工具組中。
屬性
以下是TouchGFX Designer中SVG Image的屬性。
屬性組 | 屬性說明 |
---|---|
Name | 小工具的名稱。 Name是TouchGFX Designer和程式碼中使用的唯一識別碼。 |
Location | X和Y指定小工具左上角相對於父項的位置。 W和H指定小工具的寬度和高度。 小工具的大小是由關聯的圖像大小決定的。 Lock (鎖定)指定小工具是否應鎖定為其當前的X、Y、W和H。 如果鎖定小工具,還會禁止透過螢幕與小工具進行互動。 Visible (可見)指定小工具的可見性。 使小工具不可見還將停用與小工具之間透過螢幕進行的互動。. |
SVG | SVG指定關聯的SVG圖像。 從「Project」(專案)索引標籤的匯入圖像中選擇,或從「Stock」(庫存)索引標籤的免費TouchGFX圖像集選擇。 Lock Image to Center (鎖定圖像至中央)會指定圖像位置是否應鎖定至小工具中央。 此選項僅適用於TouchGFX Designer,亦即如果SVG圖像是在執行階段期間調整大小,此選項對圖像的中央位置不會有任何影響。 Fit Image To Size (調整圖像配合大小)會縮放圖像以配合SVG Image小工具的尺寸。 此選項僅適用於TouchGFX Designer,亦即如果SVG Image是在執行階段期間調整大小,此選項對圖像大小不會有任何影響。 Image Position (圖像位置) X及Y指定圖像的左上角。 Image Scale (圖像縮放) X及Y指定縮放係數,用於在X及/或Y方向縮放圖像。 Rotation Center (旋轉中心) X及Y指定旋轉中心,而Rotation (deg)(旋轉度數)指定旋轉圖像的角度度數。 |
Mixin | Draggable (可拖動)指定小工具在執行階段是否可拖動。 ClickListener指定點擊時小工具是否會發出回呼。 MoveAnimator指定小工具是否可透過動畫變更X及Y值。 |
交互
以下章節介紹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範本建立新應用程式: