SLENDER ANKLES's 개발블로그

매트릭스의 위치좌표를 변경하고, 매트릭스의 회전각을 조정하고, 매트릭스의 크기를 조정하는 작업을 동시에 했다.

이미지가 얼마나 커지는 지를 체크 할 필요가 있었다. 이미지의 배율을 구해서 변화폭을 관찰해야 하는 부분을 구현해야 했다.

하지만 0도일때는 잘 구해지던 것이 90에서는 안 구해지고 180에서는 구해지는데 270도에는 안구해졌다. 

float[] matrixValues = new float[9];

matrix.getValues(matrixValues);

matrixValues[Matrix.MSCALE_X];

위와 같은 코드를 통해서 가로의 크기를 구해줄려고 했는데 ,,,,, 0도에서는 잘 구해지다가 90도에서는 0을 뱉어냈다 ㅜㅜ 270도에서도 0을 반환했다. 

아 .... 수학적인 문제인가를 생각해서 계속 구글링을 하면서 찾아봤는데 좋은 답이 안 나왔다. 

도저히 안되서 matrixValues배열은 3*3 행렬이므로 for문으로 값들을 돌려봤다.

그런데 .... 나의 심각한 오판이 있었다. matrixValues[0]의 값이 0도 일때는 스케일의 배율값이었는데 

90도 일때는 스케일의 배율값이 아니었다. ㅡㅡ 

각도가 바뀔 때마다 각 속성이 뒤바뀌었다. 

정확한 이유는 쫌 더 공부를 해봐야 하겠지만 ....

어쨋든 정리하자면 

for문을 돌려보면서 0도 90도 180도 270도 일 때의 스케일의 배율을 나타내는 값을 찾아내서 

if문 4개에 넣어주었다. 

필요한 구현 사항

매트릭스를 원하는 부분으로 postTranslate && 매트릭스를 원하는 회전각으로 postRotate && 매트릭스를 원하는 크기만큼 늘려야 한다. 

초기의 매트릭스 속성을 대입한 bitmap 이미지를 ImageView에 적용 시키면 좌측 상단에 이미지뷰가 위치하게 됐다. 

 ** 매트릭스의 초기값은 0, 0 => 매트릭스에서 0, 0은 화면의 좌측 상단을 의미한다. 

소스 코드를 보면서 설명하겠다.

picasso라이브러리를 사용하고 있었고, url을 통해서 이미지를 가져오는 상황이었다. 

이 이미지뷰에서 bitmap을 추출하고 싶었는데 보통의 이미지뷰에서 bitmap을 추출하는 방법으로는 가능하지 않았다. 

어떠한 방법을 쓰더라도 nullpointer exception이랑 runtime exception이 났다. 

-- 다음과 같은 이유를 알고 성공이 가능했다. 

!!!***** 잘 못된 접근을 하고 있어서 nullpointer exception이 났던 것이었다.

나의 이미지뷰는 resource에서 받아오는 것이 아니라 통신을 통해 Picasso 라이브러리에서 url을 통해

이미지를 받아오는 것이었기 때문에 이미지 사이즈도 측정 불가능하고 비트맵으로 변환시 nullpointer exception이 났던 것이었다. 

다음과 같이 Picasso에서 제공해주는 Target이라는 implements해주면 된다. 

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

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

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

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

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

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

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

그림을 가운데에 위치시키기 위해서 이미지뷰의 특성을 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에 이미지뷰를

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