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

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 애니메이션 아이템을 제공하는 더 실용적인 예제이다.