SVG Image
SVG Image는 조정 가능한 회전 중심을 중심으로 자유롭게 확대/축소하거나 회전하면서 SVG Image 파일을 그릴 수 있는 위젯입니다.
Note
시뮬레이터에서 실행 중인 SVG Image
위젯 그룹
SVG Image는 TouchGFX Designer의 Images 위젯 그룹에 있습니다.
TouchGFX Designer의 SVG Image
속성
TouchGFX Designer에서 SVG Image의 속성은 다음과 같습니다.
| 속성 그룹 | 속성 설명 |
|---|---|
| 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 Image가 런타임에서 크기가 조정되는 경우, 이 옵션은 이미지의 중앙 위치에 영향을 미치지 않습니다. 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)은 이미지 회전 각도를 도(˚) 단위로 지정합니다. |
| Mixins | Draggable은 런타임 시 위젯을 드래그할 수 있는지 여부를 지정합니다. ClickListener는 위젯이 클릭 시 콜백을 방출하는지 여부를 지정합니다. MoveAnimator는 위젯이 X 및 Y 값에 대한 변경 사항을 애니메이션화 할 수 있는지 여부를 지정합니다. |
Interactions
SVG Image에서 지원되는 액션과 트리거는 다음 섹션에서 설명합니다.
액션
| 위젯별 액션 | 표현 |
|---|---|
| Rotate SVG Image | 현재 방향 또는 특정 각도를 기준으로 SVG Image를Rotation Center 주위로 회전합니다. |
| Scale SVG Image | 현재 크기 또는 특정 크기를 기준으로 SVG Image의 크기를 조정합니다. |
| Resize widget | 위젯의 가로 및 세로 길이를 변경합니다. |
| 표준 위젯 액션 | 표현 |
|---|---|
| Move widget | 시간이 지나면서 위젯을 새로운 위치로 이동시킵니다. |
| Hide widget | 위젯을 숨깁니다(visibility를 false로 설정). |
| Show widget | 숨긴 위젯이 보이도록 만듭니다(visibility를 true로 설정). |
Triggers
SVG Image는 어떤 트리거도 방출하지 않습니다.
Performance
SVG Image 위젯의 성능은 사용되는 SVG 이미지 파일의 복잡성(예: 요소 수, 경로 수, 경로 크기, 그래디언트 사용 등)에 따라 달라집니다. 따라서 SVG Image는 대부분의 플랫폼에서 까다로운 위젯으로 알려져 있습니다.
드로잉 성능에 대한 자세한 내용은 일반 UI 구성요소 성능 섹션을 참조하십시오.
Examples
생성 코드
View 기본 클래스를 위해 생성된 코드에서 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 Example
SVG Image에 대해 자세히 알아보려면 다음 UI 템플릿을 사용해 TouchGFX Designer 내에 새로운 애플리케이션을 생성하십시오.
TouchGFX Designer의 SVG Image UI 템플릿