SVG Image
SVG Image是一種小工具，能夠繪製SVG圖像檔案，可環繞可調整的旋轉中心自由縮放及旋轉。
Note
在模擬器中執行的SVG圖像
小工具組
SVG Image位於TouchGFX Designer中的Images小工具組中。
TouchGFX Designer中的SVG Image
屬性
以下是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範本建立新應用程式：
TouchGFX Designer中的SVG Image UI範本