리오집사의 기억저장소

네이티브 안드로이드 모바일 앱에서 두포인트간 curved line을 그리는 문제


웹에서는, 그러니까 Google maps API for JavaScript 로는 마커 간에 curved line을 쉽게 그릴 수 있다.

그러나 모바일에서는 API에서 기본적으로 제공되지 않는다.

웹으로는 이렇게 마커 간에 커브 라인을 생성하는게 기본적으로 제공되어 간단하지만, 안드로이드에서는 제공되지 않는다.웹으로는 이렇게 마커 간에 커브 라인을 생성하는게 기본적으로 제공되어 간단하지만, 안드로이드에서는 제공되지 않는다.


구글에서 안드로이드 API에 이런 기능을 제공하지 않는 것은 물론 이유가 있을 것이다.

제한된 사양의 안드로이드 폰에서 이런 라인을 그린다는 것은 성능상 문제가 발생할 수 있기 때문이다.

물론, 안드로이드에서도 polyline 옵션을 보면 geodesic 이라고 projection 에 따라서 곡선을 그려주긴 하는데, 다음과 같이 거의 직선 형태로 되어 있어 예쁘지가 않다.

구글에서도 성능을 고려하여 이런 식으로 밖에 표현하지 않는 것이다.

Google APIs for Android 문서에 들어가보면 polyline 옵션의 geodesic으로 커브 형태의 라인을 그릴 수 있다. 그러나 어디까지가 projection에 따른 커브라인만 그릴 수 있고, 가까운 거리에서는 아예 직선 형태로만 보인다.


  

그렇다면 정말 방법이 없을까?

Canvas의 Path의 addArc() 메서드를 사용하는 방법을 생각해보았다.

하지만 addArc() 메서드는 기본적으로 float 형을 사용하게 되어 있다. 문제는 구글맵에서는, 또는 지도의 위도 경도 좌표는 double형으로 표현해야지만 정확한 위치를 찍는다는 것이다. 그렇기 때문에 addArc() 메서드를 활용해서 안드로이드에 곡선 라인을 그릴 수는 없었다. (그려보았지만, 선의 위치가 정확하지 않게 그려진다. )

그래서 억지로 그리기 위해서는 두 포인트의 double형 위도 경도를 가지고, 직접 수학 공식을 활용해 polyline을 만드는 수 밖에 없다.


안드로이드 네이티브 앱에서 구글 맵 위에 커브 곡선 그리는 방법

1. Bezier Curve 이론을 활용하여 double형 두 포인트간의 커브라인 포인트들을 얻는다.

2. 포인트들을 가지고 polyline을 구현하여 지도에 찍는다.

소스코드 > https://drive.google.com/a/sphinfo.co.kr/file/d/0B2xBF9APpPqWY1FueVhvYllyZVU/view?usp=drive_web


위에 첨부된 소스코드 사용시 알아야 하는 사항들 :

 * DRAW_LINE_COUNT 변수 : curved 폴리라인에 찍을 포인트 갯수 설정

 * 포인트 얻는 for문이 끝나고, 포인트 배열의 시작과 끝 포인터를 다시 설정하는 이유는,

   Bezier Curve 수학 공식에서 시작과 끝을 따로 구해주지 않기 때문이다.

 * 곡선의 정밀도 보정 :

    - DRAW_LINE_COUNT 변수의 값을 크게 함.

    - 현재 함수에서는, 곡선의 기준을 잡는 포인터를 하나만 잡는데(quad),

      곡선의 기준을 잡는 포인터를 두개(Cubic), 또는 그 이상을 잡는다.

      (Bezier 클래스 내에 nextBezier4 참조)

 * 현재 곡선의 기준을 잡는 포인터는 임의로 잡아두었다.

   곡선 기준을 잡는 포인트의 자동 생성 함수는 따로 구현해야 한다.

 * 어떻게 사용될지 몰라서, 수학 공식 관련 Class 외에는

   절차형으로 구현해두었다. 필요에 따라 리팩토링 이 필요하다.

반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band