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 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. |
| 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範本