한국어
Qt
 

C++ Class QML의 사용자 정의 Image

makersweb 2023.09.17 19:43 조회 수 : 510

Qt는 선과 다각형을 쉽게 그리기 위한 방법중 하나로 QPainter API를 제공한다. 프리미티브 도형 뿐만 아니라 QImage 형식도 가능하다.

실제 필요한 것은 이 QImage를 QML에 전달하는 방법이었다(QML을 UI 계층으로 사용하고 있기 때문에).

이미지 데이터를 QML에 전달하는 방법에는 여러 가지가 있다. 내가 사용하기 시작한 첫 번째 접근 방식은 QQuickPaintedItem에서 파생된 사용자 지정 QML 아이템을 만드는 것이다.

class ImageItem : public QQuickPaintedItem
{
    Q_OBJECT
public:
    explicit ImageItem(QQuickItem *parent = nullptr);
    Q_INVOKABLE void setImage(const QImage &image);
    void paint(QPainter *painter) override;

private:
    QImage m_image;
};

이 아이템은 다음과 같이 이 아이템이 필요한 QML에서 사용된다.

ImageItem {
    id: liveImageItem2
    anchors.right: parent.right
    anchors.top: parent.top

    width: middleRectangle.viewportWidth
    height: middleRectangle.viewportheight

    visible: !settings.fullscreenEnabled

    Text {
        text: "Left"
        anchors.left: parent.left
        anchors.top: parent.top
    }
}

따라서 새로운 프레임을 요청할 때마다 ImageItem이 새 이미지로 업데이트되고 다음 paint() 호출에서 차례로 그려진다.

void ImageItem::paint(QPainter *painter)
{
    painter->drawImage(0,0, m_image);
}

void ImageItem::setImage(const QImage &image)
{
    m_image = image;
    update();
}

데스크탑에서는 그런대로 잘됐지만 모바일에서 만족할 만한 성능이 나오지 않았다. QPainter 를 사용하는 이미지는 그리기에 GPU를 사용하는 대신 소프트웨어 래스터라이저가 사용된다. QQuickPaintedItem 내부의 QPainter 호출도 마찬가지다. paint() 호출도 소프트웨어 래스터라이저가 사용한다. 여기서 하는 일은 GPU에서 수행되지 않는다.

이접근법은 고해상도 이미지나 초당 60번 프레임으로 사용자 정의 아이템을 렌더링해야하지 않는 한 분명 괜찮다.

다음은 rlottie 라이브러리를 사용하여 QML에 Lottie 애니메이션 아이템을 제공하는 더 실용적인 예제이다.

번호 제목 글쓴이 날짜 조회 수
공지 Qt프로그래밍(QtQuick) Beginner를 위한 글 읽는 순서 운영자 2019.01.05 85807
178 Qt Creator 에서 GitHub Copilot 사용하기 file makersweb 2024.04.13 102
177 QtQuick 애플리케이션에 Rive 애니메이션 통합 makersweb 2024.03.31 257
176 클라우드용 Qt file makersweb 2024.01.16 616
175 QRhi 에 대해서 file makersweb 2023.12.29 489
174 Android 애플리케이션 서명 구성 file makersweb 2023.12.17 455
» QML의 사용자 정의 Image makersweb 2023.09.17 510
172 Base64로 인코딩된 파일을 복원 makersweb 2023.08.06 408
171 QML에서 D-Bus 통신 file makersweb 2023.03.15 627
170 Qt 하이브리드 애플리케이션(Hybrid App) 개발 file makersweb 2023.02.08 841
169 Widgets(C++) 기반의 기본 스타일을 Dark 테마 및 Material 디자인 스타일로 바꾸기 file makersweb 2023.01.28 1111
168 OpacityMask 예제 file makersweb 2023.01.26 544
167 QProcess 예제 (프로그램 재시작) file makersweb 2023.01.25 856
166 하드디스크 드라이브 여유 공간 계산 file makersweb 2023.01.15 470
165 Qt Property(속성) 시스템 makersweb 2023.01.08 1709
164 VTK 를 사용해서 강력한 시각화(3D, Plotting, Chart)Qt 응용프로그램 개발하기 file makersweb 2022.10.16 1570
163 QProcess 보안 권고 리뷰 file makersweb 2022.09.18 580
162 QMake 프로젝트를 CMake 프로젝트로 변환 with qmake2cmake makersweb 2022.09.17 993
161 Qt Safe Renderer 개요 file makersweb 2022.09.08 525
160 clazy 로 13개의 시그널, 슬롯 오류 해결 makersweb 2022.08.23 563
159 Qt 스마트 포인터 (QSharedPointer, QScopedPointer, QPointer) makersweb 2022.08.18 1120