『Zim.js』 간략정리

디자이너가 없는 개발자라면 html5 canvas라이브러리를 찾기 마련인데,

zim.js는 canvas라이브러리 중에서 관리가 잘 되고 있는 '살아있는' 라이브러리다.

 

라이브러리 원작자와 1:1로 소통하기란 쉽지 않은데(특히, 유명인일 경우)

zim.js의 Dr.Abstract(실명 모름)는 Discord, slack, youtube, 등..

여러 채널을 통해 실시간으로 소통할 수 있다.(경험담)

 

zimjs.com/index.html

ZIM - JavaScript Canvas Framework

 

---

엔진

Frame()은 canvas 태그를 'myCanvas'아이디로 생성한다. 즉, zim.js의 엔진이다.

zim.js의 실질적인 기능은 모두 Frame()인스턴스를 안에서 실행된다.

 

frame변수를 따로 만들지 않는다면,

아래와 같이 .on( )이벤트 메서드 + 콜벡함수 형식으로 사용할 수 있다.

//.on() ::이벤트리스너  new Frame().on("ready",function(){   //코드 넣기 })

 

 

---

인스턴스

파라미터의 값은 아래와 같이 객체형식으로 입력할 수 있다.

// ex] Slideer생성 const slider = new Slider({ max:3, step:4, useTicks:true })

자바스크립트의 객체형식 ('속성:값')을 그대로 파라미터에 적용하면

zim Slider 디자인이 그대로 구현된다.

 

zim.js는 대부분 인스턴스에 이벤트를 생성할 수 있는데,

change( )메서드를 활용한다.

const slider = new Slider().center().change(()=>{      zog(slider.currentValue) //슬라이더 움직임에 따른 수치가 console.log로 찍힘 })

 

change( )메서드는 자바스크립트의 change( )이벤트리스너와 기능이 같다.

 

 

 

---

기능

zim.js가 존재하는 이유는

canvas로 생성하기 까다로운 도형이나 GUI를 쉽게 생성하기 위해서다.

 

파라미터, 메서드, 속성 사용법은

zim doc에서 자세하게 알 수 있다.

 

zimjs.com/docs.html

ZIM DOCS - JavaScript Canvas Framework

 

버튼, 사각형, 원과 같은 도형은 기본이며,

Blob(포토샵의 bezier커브), 그리드, 차트, 슬라이더, 페이지 등

엄청난 기능을 제공하고 있다.

 

* new Button(width,height,텍스트) :: 버튼

* new Rectangle(width, height, 색상, 바깥색상,외곽선 굵기,외곽굴곡,etc.. ) :: 사각형

* new Circle( ) :: 원

* new Blob( ) :: bezier(컨트롤bar) 도형

* new Grid( ) :: 그리드 격자

* new Slider( ) :: 슬라이더 bar

...

zim doc페이지

 

 

---

메서드

zim.js의 메서드 역시 상당히 많다.

 

테스트를 해본 결과,

canvas의 기능을 대부분 구현할 수 있었다.

오히려 캔버스 기능보다 더 많은 기능을 구현할 수 있다.

(웹소켓, Ajax, 로컬Storage, three.js, 등...)

 

.addTo(stage) :: 인스턴스 화면에 추가하기 .loc(x,y) :: 상대좌표를 기준으로 이동하기 .center( ) :: stage의 센터에 위치하기 .rot(회전각) :: 각도만큼 회전하기 .mov( 거리 ) :: 우측으로 '거리'만큼 이동하기 .pos(x,y,방향) :: 절대좌표 이동하기 ex) .pos(100,200,RIGHT,BOTTOM) .sca(가로크기 곱, 세로크기 곱) :: 크기 배수 .outline( ) :: 외곽라인 표시하기 .reg(x, y) :: 피봇위치 설정 .centerReg( ) :: 센터피봇 위치 .addChild(인스턴스) :: 자식노드 설정  ex) .addChild(circle) .alpha(0.2) :: 알파값 조절 *체이닝에서는 .alp()로 사용가능 .place( ) :: 객체를 드래그하면서 좌표값을 알 수 있음(좌표값 콘솔에 반환)

zim.js로 구현할 때,

파라미터 값에 넣지 않은 속성은 

Property부분으로 지정할 수 있다.

 

하지만 메서드는 제이쿼리처럼 체이닝 방식으로 연결해야한다.

이와 관련된 명령어는 

DOC:: method( )편을 참고하자.

zim Doc :: Method