[zim.js] GUI 경계 설정하기

1 배경 제작하기

Tile( )내부에 Stage의 50%에 해당되는 Rectangle( )을 '2x2'배열로 실행한다.

그리고 Stage크기의 빈껍데기 Container( )를 삽입하여,

Rectangle( )위에서 동작이 이뤄지는 것처럼 꾸민다.

(container( )위에서 실행)

frame.on("ready",function(){
	let stage = frame.stage;
	let stageW = frame.width;
	let stageH = frame.height;

	const colors = series(pink,green,yellow,blue)
	new Tile(new Rectangle(stageW/2, stageH/2, colors), 2, 2)
		.addTo()  

	const first = new Container(stageW,stageH)
			   .addTo()
			   .outline();

	stage.update();

});

 

 

 

 

 

 

 

2 컨테이너 경계설정

zim.js에서는 경계를 설정할 수 있는 Boundary객체를 제공한다.

Boundary객체는 아래와 같은 방식으로 경계를 설정할 수 있다.

---

Boundary( x, y, width, height )

---

.drag( )와 같은 메서드의 파라미터값으로 boundary를 전달했을 경우,

아래와 같이 drag경계지역을 설정할 수 있다. 

 

const frame2 = new Frame( { 
   scaling:'zimBase2', 
   width:724,  
   height:430,  
   color:light 
  }); 

frame2.on("ready", () => { 
	const stage = frame2.stage; 
	let stageW = frame2.width; 
	let stageH = frame2.height;
  
	const colors = series(pink, green, yellow, blue)
	new Tile(new Rectangle(stageW/2, stageH/2, colors), 2, 2)
		.addTo(stage)  

	const first = new Container(stageW/2,stageH/2)
			   .pos(0, 0, LEFT)
			   .addTo(stage);
	const r = 70;
	const boundary = new Boundary(r, r, first.width-r*2, first.height-r*2);
	new Circle(r, purple)
	   .center(first)
	   .drag(boundary);
  	
	new Label('Drag the Circle')
	   .pos(20, 20, LEFT, BOTTOM, first)
	   .sca(.8)
	   .alp(.5)

	stage.update();
});

 

위의 코드에서 first변수는 Container이며, boundary는 first컨테이너의 너비 비율을 갖는다.

first컨테이너 내부에서 객체가 움직이려면, drag( )인자값에 boundary값을 설정한다.

 

그리고 x, y값에 원의 반지름을 설정한 이유는 원이 경계 바깥으로 튀어나가지 않기 위함이다.

만일 x, y값이 0이 된다면, 원의 반지름 부분이 경계선 바깥으로 튀어나가게 된다.

따라서 boudary설정을 할 때는 도형의 반지름 크기만큼 x, y값을 움직여줘야 한다.

 

 

 

 

 

 

 

boundary설정은 어플 내의 어플을 제작할 때 유용하게 사용할 수 있다.

특히, 블로그 내의 어플을 제작할 때 활용성이 높다.