SLENDER ANKLES's 개발블로그

우리는 이미지에 흰 색 배경을 빼야된다. 어쩔 수 없이 등록할때 흰색 배경이 나타났다. 

이 것이 가장 중요한 것이다. 라이브러리를 알아보고 찾아봐야 겠다.

---------------------------------------------------------------------

정말 많은 시도를 하고 알아 보았는데 완벽하게 구현하는 것은 어려웠다. 이미지 프로세싱의 과정이 필요하다. 

한 가지 비슷한 구현은 배경을 완벽히 제거해내는 것에는 성공하지만, 기존의 색깔을 유지하기 어려운 방법으로 구현했다.

이미지를 줌, 이동 하는 기능을 구현 중에 첫 번째 화면에서 그림이 위치하는 곳을 지정하거나, 그림의 크기를 지정해야만 했다. 

그림은 원래의 사이즈를 만큼을 지정하고, 위치는 화면의 가운데에 위치하게 끔 해야했다. 하지만 잘 되지 않았다. 

그림을 가운데에 위치시키기 위해서 이미지뷰의 특성을 wrap_content(원래의 사이즈만큼만 할당하게 했다)로 설정하였더니

가운데 일부분의 화면만 사용할 수 있게 되었다. (자세한 상황은 그림을 첨부해야 겠다.)

또 이미지뷰를 match_parent로 설정해 놓으니까 처음의 그림이 화면을 가득 채우는 상황이 발생했다. 이때는 화면전체를 이동하거나,

줌하는데는 무리가 없었지만 처음에 그림이 화면을 꽉 채워지는 것은 말이 안 되는 상황이다. 

구글을 찾아보면서 정말 많은 시도를 해봤지만 잘 안되었다. 

앞서 구현한 멀티터치 줌 구현부를 건들이면서 시도를 해보았다. 

정말 많이 헤맸다. 

이 코드를 사용하기 위해서는 imageview의 scaletype이 matrix였기 때문에 

답은 처음 사용하는 매트릭스 값을 건드려야 했다. 

매트릭스의 초기위치 값을 설정해줘야 했는데 그게 잘 안되었다. 

문제는 내가 이미지의 사이즈를 재는 함수를 선언하는 위치였다. 

우선 대략적인 소스는 이렇다.

이 부분을 해결하는데 정말 오래걸렸다. 

중요한 것은 매트릭스란 것이 무엇인지, 액티비티 생명주기를 어떻게 잘 이용하는지에 대해서 아는 것이 중요했다.

멀티터치줌 기능을 구현하기 위해서 매트릭스를 사용했는데, 매트릭스의 동작 과정과 간단한 개념 정도는 알아야 할 것 같았다.

SURFACEVIEW카메라 위에 IMAGEVIEW를 MATRIX를 이용해서 멀티터치 줌, 무브기능을 구현하는 중에

가정 처음에 터치 이벤트가 들어가게 되면 이미지뷰가 중앙에 위치하던 것이 좌측 위로 옮겨졌다. 

우리가 사용해야 되는것은 가급적 중앙에 위치해야 한다. 이 문제를 해결하기 위해서 매트릭스에 대해서 공부를 

하게 됐다. 

MATRIX는 3차원 배열로 되어 있다. 

MSCALE_X      0

MSKEW_X       1

MTRANS_X      2

MSKEW_Y       3

MSCALE_Y      4

MTRANS_Y      5

MPERSP_0      6

MPERSP_1      7

MPERSP_2      8

행렬로 보면

MSCALE_X      MSKEW_X       MTRANS_X

MSKEW_Y       MSCALE_Y      MTRANS_Y

MPERSP_0      MPERSP_1      MPERSP_2

MSCALE는 크기 조절... 에 사용되는것으로 보인다 (핀치투줌을 하면서 확인해보니 맞는것같다.)

MSKEW는 이미지의 기울기 (이것은... 확실하게 구분 갈 정도로는 작업해보질 않아서 확실치는...)

MTRANS!! 이친구가 나에겐 가장 중요했는데... x좌표와 y좌표의 변환값을 나타내고, 개인적으로 

느끼기엔 실질적으로 화면에서 드래그될 때, canvas상의 절대좌표 비스무리하게 이용할 수 있는 친구였다. (물론 그러라고 만든게 아닐것같기도 하지만...)

로그를 첨부로 올리니 확인해보자!!!

  Log.e("Value", "value X : "+value[0]+"/"+value[1]+"/"+value[2]);

  Log.e("Value", "value Y : "+value[3]+"/"+value[4]+"/"+value[5]);

  Log.e("Value", "value per : "+value[6]+"/"+value[7]+"/"+value[8]);

Value(12788): value X : 1.1628919/0.0/-1147.0

Value(12788): value Y : 0.0/1.1628919/-447.0

Value(12788): value per : 0.0/0.0/1.0

Value(12788): value X : 2.7457745/0.0/-3322.0

Value(12788): value Y : 0.0/2.7457745/-1910.0

Value(12788): value per : 0.0/0.0/1.0

상황은 액티비티에 surfaceview로 카메라화면이 작동되고 있고, 

그 위에 이미지뷰가 띄워져있는 상태에서 이미지를 드래그하거나, 확대 축소하는 이벤트를 달아야하는 상황이었다.

하지만 view라는 타켓에 이벤트를 걸려고 해도 이벤트가 걸리지 않았다(로그로 찍어봤는데 메소드에 진입하지 못했다.)

구글에서 검색해보니 기본적인 개념의 문제였다. 

이미지뷰에 setOnTouchListener라는 것을 걸어 주어야 리스너가 작동된다는 것을 알았다.

이런식으로 코드를 구성해주어야 동작하였다. 내부구조가 왜 이렇게 되는지에 대해서는 좀 더 

알아볼 필요가 있을 것 같다. 

안드로이드의 멀티 터치 줌 기능이 필요했다. 

상황은 surfaceview에 카메라를 얹고, 이미지뷰로 그림을 불러와 사용하였다. 

그리고 이미지를 손가락 하나로 이동시키거나, 

손가락 두 개를 이용해 확대/축소 기능도 제공해야 했다. 

다음의 소스를 활용했다. 

xml에서 imageview는 match_parent 속성을 가지고 있어야 한다. 

비트맵이 R.id로 접근이 가능한 경우 

다음과 같은 방법을 사용해 볼 수 있다. 

카메라 surfaceview를 사용하면서 당연히 버튼이라든지 이미지뷰와 같은 것이 사용된다. 

우선 이 같은 버튼이나, 이미지뷰는 메인 UI 스레드에서 돌아가게 될 것이다. 

구글에서 찾아보니 Linear Layout에 이미지뷰를 띄웠었는데 이러면 안되고 Relativelayout에 이미지뷰를

띄우면 된다고 해서 해봤더니 됐다. 

보통의 앱에서 카메라를 띄워줄때는 위의 알림창과 같은 타이틀바가 모두 제거된 상태로 

뷰가 나오는데, 이 부분에 대한 구현? 환경설정이 필요했다. 

안드로이드 알림 바 지우기

메니페스트.xml에 다음을 추가시켜준다. 

=> 메니페스트 파일 수정에는 extends가 ActionBarActivity여서는 안 된다. 

그냥 Activity여야만 한다. 이걸 몰라서 쫌 헤맸다.

surfaceview 위에 카메라를 구동 시키는 구현을 해야 했다. 

surfaceview란 메인 UI 스레드가 아닌 다른 스레드에서 구동되는 view다. 

surfaceview를 사용하는 이유는 카메라와 같이 매 초당 빈번하게 화면을 갱신해주는 작업이 수행되면 UI 스레드는 제대로 동작을 할 수 없게 된다. 

이러한 이유로 카메라를 띄워주기 위해서는 surfaceview를 사용하는 것이다.

surfaceview 위에 카메라 화면을 올리었는데

화면 회전 시 카메라 각도가 변하지 않는 현상이 발생했다. 

구글을 통해 찾아보니 간단히 답을 낼 수가 있었다. 

화면이 회점함에 따라 일정하게 카메라의 회전을 주는 방법이다. 

surfaceChanged의 mCamera.startPreview()이전에 코드를 작성해서 사용해주면 된다. 

android:layout_width 는 위젯 또는 레이아웃의 넓이를지정하는 속성입니다.

android:layout_height 는 위젯 또는 레이아웃의 높이를지정하는 속성입니다.

속성값으로 match_parent 는 부모 레이아웃을 꽉 채우도록최대한 크게 지정하는 방식입니다.

속성값으로 wrap_content 는 내부에 존재하는 콘텐츠의 크기에맞게 조절하는 방식입니다.

레이아웃의 경우에는 내부에 있는 위젯 또는 레이아웃이 콘텐츠가 됩니다.

위젯의 경우에는 내부에 있는 이미지 또는 텍스트가 콘텐츠가 됩니다.

추후 안드로이드 레이아웃에 대해서 자세히 정리 할 필요가 있겠다.