zim.js 카드뉴스Type 페이지 제작하기

 

 

 

｜페이지 생성

페이지 생성을 위해서는 빈 껍데기의 Container가 필요하다.

Rectangle과 같은 객체는 Container에 종속되며,

기타 객체는 다시 Rectangle에 종속되는 구조이다.

 

[구현]

 

 

 

 

[컨테이너 생성]

//생략...  
	const page1 = new Container(stageW, stageH);
	      page1.name = "Blue Page";
	const page2 = new Container(stageW, stageH);
	      page2.name = "Green Page";
	const page3 = new Container(stageW, stageH);
	      page3.name = "Orange Page";
  
  	//페이지 생성
  	new Rectangle(page1.width, page1.height, blue).addTo(page1);
  	new Rectangle(page2.width, page2.height, green).addTo(page2);
  	new Rectangle(page3.width, page3.height, orange).addTo(page3);

 

stage크기에 해당하는 컨테이너를 3개 생성한 뒤,

page1 ~ 3 변수로 지정한다.

 

그리고 Rectangle오브젝트를 3개 생성한 뒤,

page1 ~ 3의 컨테이너의 하위영역으로 넣어준다.

 

위의 코드에서 컨테이너는 빈 껍데기일 뿐,

사용자가 페이지라고 생각하는 영역은 'Rectangle오브젝트'가 된다. 

 

 

[페이지 생성]

//버튼생성
	page1.button = new Triangle({color:purple})
  					.rot(90)
  					.hov(pink)
  					.pos(40, 40, RIGHT, BOTTOM, page1);
  	
  	page2.button = new Triangle({color:purple})
  					.rot(90)
  					.hov(pink)
  					.pos(40, 40, RIGHT, BOTTOM, page2);
  
  	page3.button = new Triangle({color:purple})
  					.rot(90)
  					.hov(pink)
  					.pos(40, 40, RIGHT, BOTTOM, page3);
  
  //Page()생성
  	const pages = new Pages([
      				{page:page1, swipe:[page3, page2, "help", "help"]},
      				{page:page2, swipe:[page1, page3, "help", "help"]},
      				{page:page3, swipe:[page2, page1, "help", "help"]}
    			], "slide", .5).addTo();
  
  	const hotSpots = new HotSpots([
      				{page:page1, rect:page1.button, call:()=>{ pages.go(page2, "right")} },
      				{page:page2, rect:page2.button, call:()=>{ pages.go(page3, "right")} },
      				{page:page3, rect:page3.button, call:()=>{ pages.go(page1, "right")} },
    			]);
  
  //*참고사항:helPage기능
  	const helpPage = new Pane(400, 180, "I am Help").sca(.4)
  		  pages.on("dblclick", e=>{
          	helpPage.text = `Help for ${pages.page.name}`;
            helpPage.show();
          })
//생략...

 

페이지 버튼을 3개 생성한 뒤(Triangle)

zim.js의 Page( )객체를 생성한다.

 

Rectangle에 tap( )메서드를 붙여 버튼의 기능을 활성화할 수도 있지만

tap( )기능은 메모리를 과도하게 사용하는 만큼 Page( )내의 콜벡기능을 사용하는 편이 좋다.

 

HotSpots( )는 Page( )의 특정기능을 활성화하는 용도로 사용할 수 있고,

위에서는 page1 ~ 3의 버튼의 콜벡함수를 불러오는 기능을 담당한다.

 

 

 

 

 

 

｜페이지 내부 콘텐츠 채우기

페이지 내부의 콘텐츠를 생성하는 방법은 간단하다.

 

[구현]

 

 

 

 

특정 오브젝트를 생성한 뒤,

center( ), addTo( )와 같은 메서드로 각 페이지의 하위구조로 연결하면 된다.

 

[코드]

//생략...
  	const page1 = new Container(stageW, stageH);
  		  page1.name = "Blue Page";
  	const page2 = new Container(stageW, stageH);
  		  page2.name = "Green Page";
  	const page3 = new Container(stageW, stageH);
  		  page3.name = "Orange Page";
  
  	//페이지 생성
  	new Rectangle(page1.width, page1.height, blue).addTo(page1);
  	new Rectangle(page2.width, page2.height, green).addTo(page2);
  	new Rectangle(page3.width, page3.height, orange).addTo(page3);

	//페이지 내부 생성
  	new Tile(new Circle(), 3, 2, 10, 10).center(page1);
  	new RadialMenu().center(page2);
  	new Slider().center(page3);
  
//생략...