본문 바로가기

React Native

(3)
RN Perspective Crop - 크롭 사이즈편 Perspective Cropper로 크롭할 영역을 선택하면, 크롭 영역은 대부분 직사각형이 아니라 각도가 제각각인 사각형입니다. (직사각형을 위한 크롭 툴은 따로 선택할 수 있게 해 뒀습니다.) Perspective 크롭을 하면 직사각형으로 변환될 텐데, 이 직사각형의 크기는 어떻게 결정해야 할까요? 의외로 Cropper 컴포넌트 다음으로 많이 고민했던 부분이었습니다. 세로=Max(좌,우), 가로=Max(위,아래)? 예전에 안드로이드 앱 만들 때 공부했던 자바책입니다. 처음엔 기울여서 찍으면 좌우 대각선의 길이가 증가할 것이기 때문에, 단순히 세로=Max(좌,우), 가로=Max(위,아래) 정도로 하면 될 것 같았습니다. 그리고 좌표평면에 있기 때문에, 직각삼각형 공식을 사용하여 각 변의 길이를 구할 수..
RN Perspective Crop - 네이티브편 RN Perspective Crop - OpenCV편에서 만든 WebView는 이미지 처리 연산만 담당할 뿐 사용자에게 보이지 않습니다.하지만 내부의 캔버스는 크기를 가지고 있습니다. 윈도우에서 브라우저 크기를 조절해도 스크롤바만 생기고 내부 컨텐츠 크기는 그대로인 것과 동일한 개념입니다. 이제 아래와 같이 사용자가 크롭할 영역을 선택할 수 있는 컴포넌트인 Perspective Cropper를 만들어보겠습니다. 주요 재료react-native-gesture-handler크기가 없고, 자식 컴포넌트를 터치하고 드래그했을 때, 움직인 거리 정보를 포함한 이벤트를 발생시키는 PanGestureHandler 컴포넌트를 제공해 줍니다. react-native-reanimated리액트 네이티브에서 기본적으로 제공되..
RN Perspective Crop - OpenCV편 Perspective Crop은 원본 이미지에서 선택한 영역(직사각형 아님)을 직사각형으로 잘라주는 자르기 방식입니다. OpenCV라는 이미지 처리 라이브러리를 사용해서 이 기능을 구현할 수 있습니다. OpenCV 공식 홈페이지에서 Perspective Crop뿐만 아니라 해당 라이브러리를 사용한 다양한 이미지 처리 방식과 예제를 확인할 수 있습니다. OpenCV는 다양한 언어로 바인딩되어 배포되어 있습니다. 자바스크립트는 NodeJS용 라이브러리와 브라우저에서 사용할 수 있는 라이브러리(opencv.js)가 배포되어 있습니다. 그리고 리액트 네이티브에는 react-native-opencv3 라이브러리가 있습니다. react-native-opencv3 처음에는 react-native-opencv3를 선택..