zim.js 슬라이더 | 다이얼 제작하기

1 다이얼, 슬라이더 제작 및 연동하기

슬라이더, 다이얼과 같은 기능을 제작하고 싶다면 zim.js가 정답이다.

「zim.js 경계설정하기(1)」에서 설정한 컨테이너 옆에 새로운 컨테이너를 생성해보자.

  

 

일단 2번째 Tile까지 작성한 코드는 아래와 같다. 

<div id="zimBase"></div>
<script> 

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

frame.on("ready", () => { 
	const 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(stage);
  	const first = new Container(stageW/2, stageH/2)
    			   .pos(0, 0, LEFT)
    			   .addTo(stage);
  	const r = 40;
  	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(0.4)
	   .alp(0.5)
  
  	const second = new Container(stageW/2, stageH/2)
    			   .pos(0, 0, RIGHT)
    			   .addTo(stage);
  
  	let slider = new Slider({
    			   step:1,
      			   useTicks:true
    			}).pos(50, 0, CENTER, BOTTOM, second)
    			  .sca(.6)
    			  .change(e => {
				dial.currentValue = slider.currentValue;
			   });
  
  	let dial = new Dial()
    			   //.addTo(second)
    			   .loc(60, 60, second)
    			   .sca(.6)
    			   .change(e => {
				slider.currentValue = dial.currentValue;
			   });
  	

	stage.update();
});
</script>

 

코드가 다소 많은 것처럽 보이지만

3/2는 경계를 설정하는 첫번째 Tile부분이다.

 

slider, dial의 .change( )메서드가 핵심이며,

해당 속성값은 데이터와 연결할 수 있다.(zim DOC참고)

 

               

 

 

 

 

2 칼라피커 버튼 제작하기

다이얼, 슬라이더에 이어 칼라피커 대화상자를 삽입해보자.

zim.js는 칼라피커 라이브러리를 사용할 필요없이 자체기능을 제공한다.

 

	const cp = new ColorPicker({
		   alphaPicker:false
		}).center(second);

	cp.on("change",()=>{
	   button.backgroundColor = cp.selectedColor;
	   cp.removeFrom();
	   stage.update();
	});

	cp.on("close",()=>{
	   cp.removeFrom();
	   stage.update();
	})

	const button = new Button({
			   color:white
			}).pos(50, -20, RIGHT, CENTER, second)
			  .tap(()=>{
				cp.show();
				stage.update();
			   });

	new Label("COMPONENTS").pos(40,40,RIGHT);

 

ColorPicker인스턴스 변수를 생성하고,

색상을 선택한 뒤 칼라피커 대화상자를 제거하는 change이벤트와 바로 닫히는 close이벤트를 연결한다.

 

[구현]

 

 

**위의 코드는 블로그상에서 실행하면 에러가 발생한다.

티스토리의 전역변수와 zim.js충돌(개인서버에서 실행시 이상없음)