React Native를 이용한 사이드 프로젝트 만들기 -11. skia renderer를 이용한 drawing canvas로 바꾸다.(with 오늘의 그림일기)

최근까지도 아이패드에서 pencil을 가지고 테스트해본적이 없었다...

 

핸드폰에서도 새로 도입한 svg drawing의 latency가 길어질수록 다이나믹하게 느려진다는것을 확인했다...

그럼 지금까지 시도해본 두가지 버전의 canvas 모두 엄청난 하자가 있다는 결론이 나왔다.

...

그렇다면 결론은 하나뿐...

skia로 간다

---

과정

1. react native skia 모듈을 프로젝트에 올린다.

 

이 오늘의 그림일기 앱은 좀 예전에 만든 앱이라 react native skia를 프로젝트에 올리는데 까지의 고난과 역경이 있었지만 짧게 이야기 하자면,

react native skia의 제약조건이 react-native 66>, react 18> 이었다. 올리면서 깨지고 난리도 아니었음

https://github.com/Shopify/react-native-skia

GitHub - Shopify/react-native-skia: High-performance React Native Graphics using Skia

---

2. Skia를 이용해서 그림을 그릴수있는 Canvas를 만든다.

내가 필요한 기능은

1. drawing

2. undo

3. redo

4. get base64 format

5. change color

6. change thickness

7. change opacity

8. change line type (line, dash, 지글거리는선)

9. reset

이었고 그냥 모듈쓰다가 스트레스받을거 같아서 휴일 하루 풀로 바쳐서 직접 만들었다..

 

이것은 그 결과물이다. 달라진건 별로없어보이지만 퍼포먼스쪽에서 엄청 개선되었다.

안드로이드폰 아이폰 모두 50~60프레임으로 유지되는것을 확인했따.

---

자축 및 drawing의 상태가 괜찮은지 확인의 의미로 내가 좋아하는 웹툰인 호랑이형님의 무커를 그려보았다. ㅋㅋ 

또 얼마나 쾌적했는지 확인해보려면 이 영상을 참고하면 될거같다!

https://www.youtube.com/shorts/efzg5NT7wf4

 

---

지금까지 너무 잦은 업데이트로 사용자가 너무 빡쳤을것 같다..

이제 자주 안할게~ 많이 써주세여

사용자가 최근에 좀 늘었는데 감사하다..

 

이 글을 읽고 만약 관심 있으면 써봐줘도 고맙겠다. 개선사항은 환영이다! (아직 ios는 skia renderer로 업데이트가 안되었다.)

https://play.google.com/store/apps/details?id=com.kunwookwon.TodaysPictureDiary

오늘의 그림일기: 그림으로 표현하는 하루 - Google Play 앱

• https://apps.apple.com/kr/app/%EC%98%A4%EB%8A%98%EC%9D%98-%EA%B7%B8%EB%A6%BC%EC%9D%BC%EA%B8%B0/id1603506813

‎오늘의 그림일기: 그림으로 표현하는 하루