[과제] 2주차) Basic Programming 박성준

[J-unStiN]

개요

2주차 과제는 '나만의 Example을 만들어보는 것' 이라 관심있는 lottie 를 직접 만들어 실행해보는 예제를 작성하기로 한다.
branch: https://github.com/J-unStiN/thorvg.example/tree/example/week2-basic-programming

1주차에 docker 관련된 내용을 적었기에 2주차에는 생략

---

실행할 lottie JSON 파일 만들기

https://creator.lottiefiles.com/ 에 들어가서 원하는 lottie 를 만들어본다

lottie 만들어보기

보여줄 결과물 (아래는 사진)

저장하기

저장한 week02-example01.json 전체 코드 보기

{"nm":"Main Scene","ddd":0,"h":512,"w":512,"meta":{"g":"@lottiefiles/creator@1.102.3"},"layers":[{"ty":4,"nm":"Path 19","sr":1,"st":0,"op":150,"ip":123,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[414.79034963494183,482.08200573100254]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[414.79034963494183,482.08200573100254]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[93.30620923595387,40.48484667118527]],"o":[[-69.60292950702984,54.061892227495036],[0,0]],"v":[[410.265625,464.30859375],[407.9375,464.4921875]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0,0,0]}}],"ind":1},{"ty":4,"nm":"Path 18","sr":1,"st":0,"op":150,"ip":107,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[433.71422755771005,401.13671875]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[433.71422755771005,401.13671875]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-9.965655131188782,-31.822442528795932]],"o":[[0.5548351694500298,32.827019338531215],[0,0]],"v":[[430.4453125,352.06640625],[437.2265625,450.20703125]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0,0,0]}}],"ind":2},{"ty":4,"nm":"Path 17","sr":1,"st":0,"op":150,"ip":100,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[381.6726179502407,409.45015791902193]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[381.6726179502407,409.45015791902193]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[76.21904456891838,-4.747807249158939],[6.274362781843934,-39.45640263469613],[51.15513751922697,-29.38846101085079],[-73.64745071980212,-23.715305232526077]],"o":[[38.81928135432781,-0.2340477752065908],[-67.91651312479542,-22.064624524557928],[3.2534404358195275,19.435003769304842],[-67.62569315830166,34.64058187644025],[0,0]],"v":[[350.53515625,364.4765625],[373.37109375,367.84375],[358.31640625,451.48828125],[408.01953125,441.6328125],[412.75390625,400.6328125]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0,0,0]}}],"ind":3},{"ty":4,"nm":"Path 16","sr":1,"st":0,"op":150,"ip":95,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[307.6165294675717,407.517578125]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[307.6165294675717,407.517578125]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-4.121052426858455,-32.59751062578181]],"o":[[-0.3985252974609921,32.89769448253071],[0,0]],"v":[[305.94921875,358.3125],[309.4765625,456.72265625]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0,0,0]}}],"ind":4},{"ty":4,"nm":"Path 15","sr":1,"st":0,"op":150,"ip":90,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[273.5360335347169,417.6671815328177]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[273.5360335347169,417.6671815328177]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-46.839910071155174,15.445923336862563],[36.63273308299739,4.909385144558655]],"o":[[-4.705798788773507,21.047011843625285],[51.49829547091747,-4.4352885493299254],[0,0]],"v":[[261.46875,382.2578125],[271.41796875,451.41796875],[261.5625,381.53125]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0,0,0]}}],"ind":5},{"ty":4,"nm":"Path 14","sr":1,"st":0,"op":150,"ip":85,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[184.16831945034215,418.513671875]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[184.16831945034215,418.513671875]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-12.12093123139914,-36.479763392489815],[-77.22646185876312,-18.824755418033703]],"o":[[-3.0406945341181313,45.648298028322074],[-13.362986281988782,-58.70895048609134],[0,0]],"v":[[151.6015625,344.94921875],[164.37109375,492.078125],[217.73828125,411.140625]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0,0,0]}}],"ind":6},{"ty":4,"nm":"Path 13","sr":1,"st":0,"op":150,"ip":82,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[117.11675669846585,463.10396251115344]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[117.11675669846585,463.10396251115344]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[32.3778302101087,9.7799137581261],[-16.2426010706792,0.9150270187148521]],"o":[[-3.355328691981015,18.306124225264455],[-42.035017969487264,5.27443001092837],[0,0]],"v":[[112.06640625,442.23046875],[96.3359375,482.2265625],[150.015625,473.2265625]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0,0,0]}}],"ind":7},{"ty":4,"nm":"Path 12","sr":1,"st":0,"op":150,"ip":76,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[112.10781145395447,413.804577467666]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[112.10781145395447,413.804577467666]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[83.11998239084292,34.55038897581545]],"o":[[-20.58683617130913,93.3520379867989],[0,0]],"v":[[96.11328125,392.06640625],[98.5546875,387.03515625]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0,0,0]}}],"ind":8},{"ty":4,"nm":"Path 11","sr":1,"st":0,"op":150,"ip":71,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[96.267578125,373.2082538131193]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[96.267578125,373.2082538131193]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-34.51977912582454,3.976636920568808]],"o":[[34.69621302108466,0.10514448402062726],[0,0]],"v":[[44.25390625,374.8515625],[148.28125,371.4921875]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0,0,0]}}],"ind":9},{"ty":4,"nm":"Path 10","sr":1,"st":0,"op":150,"ip":66,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[103.8515625,352.8723643909781]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[103.8515625,352.8723643909781]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-21.98462260003896,2.7450793483527036]],"o":[[22.149953829985918,0.19225348099234907],[0,0]],"v":[[70.7109375,353.9765625],[136.9921875,351.6640625]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0,0,0]}}],"ind":10},{"ty":4,"nm":"Path 9","sr":1,"st":0,"op":150,"ip":49,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[426.8444727943862,287.9229722210598]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[426.8444727943862,287.9229722210598]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[62.87272230221345,-8.75973440531746],[6.307612077927388,-23.615267943227366]],"o":[[16.087320049190907,3.033801601681887],[-38.521154727825206,-8.70937112975875],[0,0]],"v":[[382.79296875,258.6640625],[452.453125,255.6171875],[433.2734375,322.984375]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0.4549,0.2784,0.8431]}}],"ind":11},{"ty":4,"nm":"Path 8","sr":1,"st":0,"op":150,"ip":43,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[380.6609233154807,255.12370869314427]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[380.6609233154807,255.12370869314427]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-105.89806506674051,49.35503837544701]],"o":[[-103.36867725069573,-1.9489838498178074],[0,0]],"v":[[411.3671875,204.1015625],[422.7421875,296.80078125]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0.4549,0.2784,0.8431]}}],"ind":12},{"ty":4,"nm":"Path 7","sr":1,"st":0,"op":150,"ip":35,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[269.888671875,261.326171875]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[269.888671875,261.326171875]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-21.01195808329325,-31.166418901870486],[-13.242327604711818,33.348157870621975]],"o":[[10.216652517669218,35.939538871928335],[13.870272185498095,-32.31222905347374],[0,0]],"v":[[219.3828125,211.0234375],[272.4921875,311.62890625],[320.39453125,215.16796875]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0.4549,0.2784,0.8431]}}],"ind":13},{"ty":4,"nm":"Path 6","sr":1,"st":0,"op":150,"ip":28,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[324.09580195659237,137.994140625]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[324.09580195659237,137.994140625]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0.7593630776604527,-14.40636972359502],[-44.58093514478497,15.288344091735013]],"o":[[-3.1465746498444673,26.193284969105775],[-15.590288650607533,-42.14848343214223],[0,0]],"v":[[299.80078125,100.87890625],[310.33984375,187.08203125],[348.83984375,88.90625]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0.1333,0.5686,0.8353]}}],"ind":14},{"ty":4,"nm":"Path 5","sr":1,"st":0,"op":150,"ip":22,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[260.7978522957493,143.9098136889678]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[260.7978522957493,143.9098136889678]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-46.20462552764769,4.8030399365758285],[47.61424014710349,-1.4104058248278193]],"o":[[-17.835726497408444,18.718846722400258],[55.772038654752464,11.912765782740564],[0,0]],"v":[[249.26953125,108.359375],[255.76953125,179.58984375],[253.11328125,107.39453125]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0.3294,0.6863,0.9059]}}],"ind":15},{"ty":4,"nm":"Path 4","sr":1,"st":0,"op":150,"ip":16,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[172.62992913672824,139.39900879577624]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[172.62992913672824,139.39900879577624]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[16.16949269364764,-59.47670928933297]],"o":[[60.62914665724722,-12.565184418415626],[0,0]],"v":[[132.7421875,110.328125],[208.3515625,172.53515625]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0.8,0.6157,0.098]}}],"ind":16},{"ty":4,"nm":"Path 3","sr":1,"st":0,"op":150,"ip":10,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[138.9299836549659,110.66015625]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[138.9299836549659,110.66015625]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-1.4387886362902407,-42.54793498432579]],"o":[[-1.4362864088135439,42.65086910114715],[0,0]],"v":[[137.33203125,46.8046875],[140.8515625,174.515625]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0.8,0.6157,0.098]}}],"ind":17},{"ty":4,"nm":"Path 2","sr":1,"st":0,"op":150,"ip":5,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[72.9285902583851,103.8203125]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[72.9285902583851,103.8203125]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-2.522749353126798,-24.71540652791235]],"o":[[0.6512872823645068,24.81015858667743],[0,0]],"v":[[72.359375,66.5859375],[73.59765625,141.0546875]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0.8275,0.7216,0.4235]}}],"ind":18},{"ty":4,"nm":"Path 1","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[76.916015625,64.12264023424731]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[76.916015625,64.12264023424731]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-41.23261049168924,-1.0730331604833694]],"o":[[41.288921074705556,-0.1019330075575482],[0,0]],"v":[[14.92578125,64.25],[138.90625,64.39453125]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":10},"c":{"a":0,"k":[0.8275,0.7216,0.4235]}}],"ind":19}],"v":"5.7.0","fr":30,"op":150,"ip":0,"assets":[]}

---

지금부터 코드 작업

JSON 파일 저장

• thorvg.example/res/lottie/example/
  해당 경로에 json 파일 저장 (example 디렉터리 생성)

---

실행할 예제 코드 작성 (Example01.cpp)

#include "Example.h"

struct UserExample : tvgexam::Example
{
    std::unique_ptr<tvg::Animation> animation;

    bool update(tvg::Canvas* canvas, uint32_t elapsed) override
    {
        if (!animation) return false;

        auto progress = tvgexam::progress(elapsed, animation->duration());
        animation->frame(animation->totalFrame() * progress);

        canvas->update();
        return true;
    }


    bool content(tvg::Canvas *canvas, uint32_t w, uint32_t h) override
    {
        auto shape = tvg::Shape::gen();
        shape->appendRect(0, 0, w, h);
        shape->fill(50, 50, 50);
        canvas->add(shape);

        animation.reset(tvg::Animation::gen());
        auto picture = animation->picture();

        const char* path = EXAMPLE_DIR"/lottie/example/week02-example01.json";

        if (!tvgexam::verify(picture->load(path))) {
            return false;
        }

        float fw, fh;
        picture->size(&fw, &fh);
        float scale = std::min(w / fw, h / fh) * 0.8f;
        picture->scale(scale);
        picture->translate((w - fw * scale) / 2.0f, (h - fh * scale) / 2.0f);

        canvas->add(picture);

        return true;
    }
};

int main(int argc, char **argv) {
    return tvgexam::main(new UserExample, argc, argv, false, 1280, 1280, 4, true);
}

---

빌드 시스템(Meson)에 파일 등록하기

해당 작업을 안하니 빌드할 때 Example01 이 안보여 추가하게 됨.
원래 알파벳순서를 지켜야하지만, 예제로 사용하는것으로 최상단에 작성.

이후 빌드 실행하고 Example01 실행
./src/thorvg.example Example01

---

실행결과 (애니메이션)

도커내부 실행화면

vnc 실행 GUI 화면

직접만든 lottie 파일이 잘 동작하는 것을 볼 수 있습니다.

아쉬운점은 vnc 으로 볼 수 있는 화면이 짤리는데, 해당 부분을 고칠 수 있는 방법이 있는 지 찾아보겠습니다.

[Nor-s]

화이팅입니다!