zim.js 레이아웃 설정하기

1 레이아웃 생성

풀스크린이 아닌 특정 프레임 내에서 동작하는 레이아웃을 제작해보자.

  

[code]

//생략...
  
  	const left = new Container(100, 300).addTo(stage);
  	const pad = new Pad(60, 1, 4, [1, 2, 3, 4], green).center(left);
  
  	const middle = new Container(500, 500).addTo(stage).outline();
  	const title = new Label({
    				text: '짤방 생성기',
      				color: white
    			}).scaleTo(middle, 80)
    			.pos(0, 50, CENTER, TOP, middle);
  
  	const right = new Container(100, 550).addTo(stage);
  	const cp = new ColorPicker({
    			colors:[purple, pink, blue, green, orange, red],
      			cols: 6,
      			circles: true,
      			backgroundColor:clear
    		}).rot(-90).center(right);
  
  	//레이아웃
  	const layout = new Layout(stage,[
			{ object:left, backgroundColor:darker },
			{ object:middle, backgroundColor:orange },
			{ object:right, align:CENTER, minWidth:20, maxHeight:90 }
    		])
  
//생략...

 

왼쪽 , 중간, 오른쪽 영역의 컨테이너를 생성하고,

각 컨테이너 내부에 특정 오브젝트를 넣어준다.(패드, 라벨, 칼라피커, 등.. )

 

zim.js는 레이아웃을 쉽게 설정할 수 있는 Layout( )객체를 제공한다.

Layout( )의 object속성에 각 컨테이너를 입력하고, 위치와 색상 및 크기를 지정한다.

 

[구현]

 

 

 

            

           

 

 

｜ 가로형 레이아웃 설정

ResizeManager( )를 사용한다면, 레이아웃을 쉽게 변경할 수 있다.

Layout( )객체를 ResizeManager( )내부로 이동하고,

regions속성에서 컨테이너의 위치를 지정해준다.

 

[code]

//가로 레이아웃 설정
    const manager = new ResizeManager();
    manager.add(
          	new Layout({
              	holder:stage,
              	regions:[
              		{ object:left, backgroundColor:darker },
                    	{ object:middle, backgroundColor:orange, minWidth:250 },
            		{ object:right, align:CENTER, minWidth:20, maxHeight:90 },
            	],
         		lastMargin:0,
         		vertical:false,
         		regionShape:new Shape()
            	})
          )

 

위의 코드에서 레이아웃을 가로로 변경해주는 핵심코드는 ResizeManager의 'vertical'속성이다.

vertical속성을 'false'로 지정해주면, 레이아웃이 아래와 같이 가로방향으로 정렬된다.

 

 

[구현]