주요 내용으로 건너뛰기

Shape

Shape는 사용자가 임의의 지점 수를 가지고 어떤 형상이든 그릴 수 있는 위젯으로, 확대와 회전 기능도 지원합니다.

시뮬레이터에서 실행 중인 Shape

위젯 그룹​

Shape는 TouchGFX Designer의 Shapes 위젯 그룹에 있습니다.

TouchGFX Designer의 Shape

속성​

TouchGFX Designer에서 Shape의 속성은 다음과 같습니다.

속성 그룹속성 설명
Name위젯 이름입니다. 이는 TouchGFX Designer와 코드에서 사용되는 고유 식별자입니다.
LocationX 와 Y는 상위 노드를 기준으로 위젯의 왼쪽 상단 모퉁이를 지정합니다.

W 와 H는 위젯의 가로 및 세로 길이를 지정합니다.

Lock은 현재의 X, Y, W, H 위치에서 위젯의 고정 여부를 지정합니다.
위젯을 현재 위치에 고정시키면 스크린을 통한 위젯 인터랙션도 비활성화됩니다.

Visible은 위젯의 표시 여부를 지정합니다. 위젯을 보이지 않게 하면 스크린을 통한 위젯 인터랙션도 비활성화됩니다.
Image & ColorImage 또는 Color는 Shape에 표시할 색상 또는 이미지를 지정합니다.
TransformAngle은 Shape가 원점을 중심으로 회전하는 각도를 지정합니다.

Scale X 와Scale Y는 Shape가 원점에서 각각 가로 방향과 세로 방향으로 확대되는 지점을 지정합니다.

Origin X 와Origin Y는 각 점들이 시작되는 위치를 지정합니다.
PointsPoints는 원하는 형상을 생성하는 점들을 지정합니다.
각 점마다 X 및 Y 좌표가 필요합니다.
AppearanceAlpha는 위젯의 투명도를 지정합니다.
위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.
MixinsDraggable은 런타임 시 위젯의 드래그 가능 여부를 지정합니다.

ClickListener는 클릭했을 때 위젯의 콜백 실행 여부를 지정합니다.

FadeAnimator는 위젯의 알파 값 변경에 대한 애니메이션 처리 여부를 지정합니다.

MoveAnimator는 값 변경에 대한 애니메이션 처리 여부를 지정합니다. X 및 Y 값 변경에 대한 애니메이션 처리 여부를 지정합니다.

인터랙션​

Shape에서 지원되는 액션과 트리거는 다음 섹션에서 설명합니다.

액션​

위젯별 액션설명
Scale Shape형상을 고정된 크기로 또는 현재 크기에 비례하여 확대합니다.
Rotate Shape형상을 고정된 각도 또는 현재 각도에 비례하여 회전시킵니다.
Resize widget위젯의 가로 및 세로 길이를 변경합니다.
표준 위젯 액션설명
Move widget시간이 지나면서 위젯을 새로운 위치로 이동시킵니다.
Fade widget시간이 지나면서 위젯의 알파 값을 변경합니다.
Hide widget위젯을 숨깁니다(visibility를 false로 설정).
Show widget숨긴 위젯이 보이도록 만듭니다(visibility를 true로 설정).

트리거​

Shape는 트리거를 실행하지 않습니다.

성능​

Shape는 CanvasWidget이며, 원하는 형상을 렌더링할 때 MCU의 영향을 많이 받습니다. 따라서 Shape는 대부분의 플랫폼에서 까다로운 위젯으로 알려져 있습니다.

CanvasWidget 그리기 성능에 대한 자세한 내용은 일반 UI 구성요소 성능 섹션을 참조하십시오.

예제​

생성 코드​

View 기본 클래스의 생성 코드를 보면 TouchGFX Designer에서 Shape가 어떻게 설정되는지 알 수 있습니다.

Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"
#include <touchgfx/Color.hpp>

Screen1ViewBase::Screen1ViewBase()
{
    touchgfx::CanvasWidgetRenderer::setupBuffer(canvasBuffer, CANVAS_BUFFER_SIZE);

    shape.setPosition(140, 36, 200, 200);
    shape.setOrigin(100.000f, 100.000f);
    shape.setScale(1.000f, 1.000f);
    shape.setAngle(0.000f);
    shapePainter.setColor(touchgfx::Color::getColorFrom24BitRGB(60, 180, 230));
    shape.setPainter(shapePainter);
    const touchgfx::AbstractShape::ShapePoint<float> shapePoints[4] = { { 0.000f, -100.000f }, { 100.000f, 0.000f }, { 0.000f, 100.000f }, { -100.000f, 0.000f } };
    shape.setShape(shapePoints);

    add(shape);
}

void Screen1ViewBase::setupScreen()
{

}
Tip
사용자 코드의 Shape 클래스에서 위의 함수와 나머지 함수들을 사용할 수 있습니다. 예를 들어 위젯의 모양을 바꾸고 싶다면 shape.invalidate() 함수를 호출하여 강제로 다시 그리기를 해야 합니다.

사용자 코드​

다음 코드는 랜덤 데이터로 채워진 형상을 설정하는 방법을 나타낸 것입니다.

Screen1View.hpp
#ifndef SCREEN1VIEW_HPP
#define SCREEN1VIEW_HPP

#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include <touchgfx/widgets/canvas/Shape.hpp>
#include <touchgfx/widgets/canvas/PainterRGB888.hpp>

class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();

    /*
     * Member Declarations
     */
    touchgfx::Shape<100> shape;
    touchgfx::PainterRGB888 shapePainter;
protected:
    void fillData(int maxLength);
};

#endif // SCREEN1VIEW_HPP
Screen1View.cpp
#include <gui/screen1_screen/Screen1View.hpp>
#include <touchgfx/Color.hpp>

Screen1View::Screen1View()
{
}

void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();
    shape.setPosition(0, 0, 480, 272);
    shape.setOrigin(0.000f, 272.000f);
    shapePainter.setColor(touchgfx::Color::getColorFrom24BitRGB(0, 171, 223));
    shape.setPainter(shapePainter);
    fillData(100);
    add(shape);
}

void Screen1View::tearDownScreen()
{
    Screen1ViewBase::tearDownScreen();
}

void Screen1View::fillData(int maxLength)
{
    float highestX = 0.000f;
    for (int i = 0; i < maxLength - 1; ++i)
    {
        float y = static_cast <float> (rand()) / (static_cast <float> (RAND_MAX/272));
        float x = highestX + static_cast <float> (rand()) /( static_cast <float> (RAND_MAX/((highestX + 10.000f)-highestX)));
        highestX = x;
        shape.setCorner(i, CWRUtil::toQ5<float>(x), CWRUtil::toQ5<float>(-y));
    }
    shape.setCorner(maxLength - 1, CWRUtil::toQ5<float>(highestX), CWRUtil::toQ5<float>(0));
    shape.updateAbstractShapeCache();
}

API 참조​

Further reading
  • Shape 클래스에 대한 API 참조