thorvg.example 리포지토리에 있는 예제들을 참고해서 직접 예제를 만들고 빌드해보았다.

https://github.com/inmare/thorvg.example/blob/project/basic-programming/src/BasicProgramming.cpp

빌드 과정

BasicProgramming.cpp이라는 이름의 파일을 새로 추가해 주었다. 이때 기존의 meson 파일에는 해당 파일이 반영이 되지 않았기 때문에 해당 파일의 이름을 추가해주었다.

# src/meson.build
source_file = [
    'Accessor.cpp',
    'Animation.cpp',
    'BasicProgramming.cpp',
# ...

구현 내용

bool clickdown(tvg::Canvas* canvas, int32_t x, int32_t y) override
{
    if (btn->intersects(x, y, 1, 1, true))
    {
        // 클릭한 지점에 버튼이 겹칠 경우 요소들의 visible 속성을 변환
        if (isPlaying)
        {
            isPlaying = false;
            playIcon->visible(true);
            pauseIcon->visible(false);
        }
        // ...
        // 명시적으로 업데이트 후 true를 반환해야 canvas가 draw 실행 가능
        canvas->update();
        return true;
    }
    return false;
}

bool update(tvg::Canvas* canvas, uint32_t elapsed) override
{
    uint32_t delta = elapsed - prevElapsed;
    prevElapsed = elapsed;

    if (!isPlaying) return false;

    // elapsed를 통한 현재 진행도를 계산 후 플레이어의 상태를 나타내는 progress에 반영
    progress += delta / durationMs;
    if (progress > 1.0f) progress = .0f;

    playerBar->reset();
    float barW = 300.0f * progress;
    float barH = 10.0f;
    float barX = (400.0f - 300.0f / 2.0f);
    float barY = 550.0f - barH/2;
    playerBar->appendRect(barX, barY, barW, barH, 5, 5);
    canvas->update();

    return true;
}

결과물

아래와 같은 간단한 플레이어 형태의 ui를 만들고, 가운데 재생 버튼을 클릭하면 버튼 모양이 바뀌고, 재생바가 올라가는 모션이 반복되도록 하였다.