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였기 때문에 

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

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

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

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

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

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