「zim.js」카드UI 페이지

 

 

zim.js에서 페이지 생성패턴은 다음과 같다.

 

---

1] 컨테이너 생성

2] Rectangle생성

3] 컨테이너 하위구조 생성(Rectangle)

4] Page객체 하위구조(Container)

---

 

page1, 2, 3변수에 컨테이너를 각각 생성한 뒤,

Rectangle을 각 컨테이너의 하위구조에 연결해보자.

 

//생략...
  
  	const page1 = new Container(stageW, stageH).addTo(stage);
  	new Rectangle(stageW, stageH, blue).addTo(page1);
  	new Circle(200, pink).center(page1).drag();
  
  	const page2 = new Container(stageW, stageH).addTo(stage);
  	new Rectangle(stageW, stageH, orange).addTo(page2);
  	new Rectangle(400, 400, green).center(page2).drag();
  
  	const page3 = new Container(stageW, stageH).addTo(stage);
  	new Rectangle(stageW, stageH, purple).addTo(page3);
  	new Triangle(300, 300, 300, yellow).center(page3).drag();
  
//생략...

 

위의 코드에서 각 페이지 변수에는 컨테이너가 담겨 있다.

또한 컨테이너는 사각형을, 사각형은 '원, 사각형, 삼각형' 도형을 담고 있다.

 

현 상태에서 슬라이드형 페이지를 생성하려면,

페이지 객체를 생성하여, 컨테이너를 연결해주면 된다.

 

   const pages = new Pages([
	   {page: page1, swipe:[page3, page2, null, null]},
	   {page: page2, swipe:[page1, page3, null, null]},
	   {page: page3, swipe:[page2, page1, null, null]}
    ], "slide", .5).addTo(stage);

 

 

[실행 결과]

 

 

 

｜방향키 삽입

zim.js에서 제공하는 페이지 슬라이드 모션기능은 렉이 꽤 있다.

방향키를 삽입해서 렉을 최소한 줄여보자.

 

 

 

[구현]

 

 

 

 

zim.js의 Pages( )객체는 페이지의 순서를 간단하게 정리할 수 있다.

 

페이지1 ~3까지 Pages( )객체 내의 배열로 넣고,

.go( )메서드로 특정 페이지를 설정한다.

 

//생략...
   const pages = new Pages([
      {page: page1, swipe:[page3, page2, null, null]},
      {page: page2, swipe:[page1, page3, null, null]},
      {page: page3, swipe:[page2, page1, null, null]}
    ], "slide", .5).addTo(stage);
  
  	//생략...

 

 

위와 같이 삼각형 객체를 생성한 뒤,

tap( )이벤트에 .go( )메서드를 조합한다면 간단한 카드뉴스 GUI를 생성할 수 있다.

 

//생략...
  	const page1 = new Container(stageW, stageH).addTo(stage);
  	new Rectangle(stageW, stageH, purple).addTo(page1);
  	new Triangle(150, 150, 150, yellow).center(page1).drag();
  	new Label({text:"TRIANGLE", color:white, size:50}).center(page1).pos(null, 40);
  
  	new Triangle(70, 70, 70, white).rot(-90).alp(.8).hov(1).pos(50, 50, false, true, page1).tap(()=>{
	   pages.go(2, "left")
	});
  	new Triangle(70, 70, 70, white).rot(90).alp(.8).hov(1).pos(50, 50, true, true, page1).tap(()=>{
	   pages.go(1, "right")
	});
  //생략...