트리 뷰어를 간단하게 만들어봤다.
해당 노드를 클릭하면 자식이 만들어진다.
그냥 트리를 출력하면 되는거 아닌가 싶지만
좀만 생각해보면 좀 까다롭다는 사실을 알수 있을 것이다.
콘솔에 트리를 출력할때 흔히 쓰는 방식이
Pre-Order 방식으로 라인별로 출력을 하는 방식일 것이다.
먼저 상대적인 좌표를 pre-order 출력순으로 좌표를 매긴다.
그뒤 다시 Post-order 순으로 거슬러 올라가면서 자식노드의
가중치 (자기 자신으로부터 모든 후손의 합) 를 고려한
가장 적당한 위치를 찾아간다.
즉
1. 상대적인 좌표를 빠르게 구한다 (Top-Down)
2. 모든 노드에 대해서 재위치 조정 (Bottom Up)
그외
범용성을 위해
어떠한 canvas 사이즈에도 매치가 되게 하기 위해
모든 노드의 좌표는 Normalize 되며
노드 자체의 크기도 동적으로 조정된다.
애니메이션은
목표 좌표를 먼저 계산한 뒤에
실제 좌표를 목표 노드까지 프레임에 따라 갱신시켜 나가는 식이다.
감소율 개념을 적용하면 마치 댐퍼로 막은 것과 같이
빠른속도에서 점차적으로 속도가 줄어들 것이다.
크롬 확장
nodeAnimation.crx'javascript' 카테고리의 다른 글
| ASSA3d simple engine 테스트 , 크롬,파폭 (0) | 2011.12.27 |
|---|---|
| localStorage 활용 초간단 todo list 크롬 익스텐션 (0) | 2011.12.10 |
| tree viewer HTML5 (0) | 2011.12.09 |
| TDOP parsing (재귀 하향식 연산자 우선순위 파싱) 사칙연산 (0) | 2011.12.05 |
| text scanner 예제 (0) | 2011.12.05 |
| 웹 사진 편집기 다음 포폴 (0) | 2011.11.10 |
댓글을 달아 주세요