SLENDER ANKLES's 개발블로그

STACK을 사용해야겠다는 직감을 가져야 하는 문제이다. 

약간의 생각이 필요한 듯 싶다. 그래서 정답률이 20% 대 인거 같다.

나는 이 문제에 대해서 실마리를 듣고 나서 풀었다. 

다시 풀었더니 그래도 잘 안 풀렸다. 이런 문제는 몇 번 더 풀어봐야 할 꺼 같다. 

문제의 조건에 맞추어 입력값들이 최대 50000개정도는 들어 온다고 하였으므로 다음과 같은 변수자료들을 선언했다.

STACK과 result[500005]

송신탑을 입력 받으면서 몇 가지 조건문을 통과해야 한다. 

1) 만약 스택이 비어있다면 result[현재인덱스] = 0 으로 저장되며

지금 있는 값은 stack에 저장한다.

2) 만약 stack의 top이 현재입력값보다 크면 stack의 top의 인덱스가 result에 저장된다.

3) 만약 stack의 top이 현재입력값보다 작으면 stack의 top은 pop된다. 

이와 같은 프로세스를 거쳐주게 되면 답을 구할 수 있다. 

트리 문제를 만났을 때, 배열을 통해서 구현 할 것인지 아니면 구조체를 통해서 구현해야 하는지에 대해서

항상 고민하게 된다. 

보통 배열을 쓰는 것이 더 직관적이고 습관화가 잘 되어있어서 편하지만 배열을 사용 할 수 없는 경우에는 이러한 습관이 또 독이 되는 것 같다. 

이번 문제는 배열을 써도 문제 없었다. 

노드의 개수는 26개까지 제한이 있었는데, 배열을 완전이진트리 형태로 만들어놓아도 큰 문제는 없었다. 

트리를 입력 받는 부분에서 지금까지와 다른 입력 형식이어서 살짝 고민했지만

인덱스를 관리해주는 배열을 따로 만들어서 풀어나갔다. 이런 부분은 그냥 경험으로 체득하는 것 같다. 

완전 이진트리를 만들어놓고 전위, 중위, 후위 순회하는 것은 별로 어렵지는 않았다.  

구조체를 사용해서 푸는 방법과 배열을 부모를 저장하는 형식으로 만들어내는 방법으로도 한 번 풀어볼 필요가 있을 것 같다. 

노드js의 모듈화는 어떻게 시킬까?

nodejs를 시작한지 얼마 되지 않았는데 

각 역할에 맡게 자바스크립트 파일들을 나누어놓았고 서로 독립적인 영역으로 최대한 구분할려고 했다.

하지만 디비는 모든 스크립트에서 다 쓰는데, 매번 디비를 선언하고 연결해야 하나?

좋지 않은 방법 같다. 

그래서 dbcontroller.js라는 파일을 만들어놓고 이를 각 스크립트에서 불러와서 쓰는 방법을 사용하고자 한다. 

간단히 모듈화하는 부분을 나타낸다. 맨 마지막에 exprts하는 부분이 포인트이다. 

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

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

하지만 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