[zim.js] 콘텐츠 자막 넣기

.on( )이벤트

 

 

체이닝 방식으로 zim 오브젝트에 연결함으로써 마우스, 키보드 이벤트를 적용할 수 있다.

 

<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;
    
    
	let label = new Label({
		text:'라벨1'
	}).center();
	
	label.cur().on('click',(e)=>{
		e.target.text = '안녕';
		stage.update();
	});
});
</script>

 

-.cur( ) : 마우스 커서변환

- .on( ) : 마우스 이벤트

 

위의 코드에서 이벤트 입력 후, 'stage.update( )'를 실행해야 한다는 점에 주의한다.

 

 

 

 

Drag( ) & Click( ) 이벤트

	let labelDrag = new Label({
		text:'라벨 드레그 & up'
	}).center(stage);
	
	labelDrag.drag().on('pressup',(e)=>{
		e.target.text = '안녕';
		stage.update();
	});

 

위와 같이 실행하면, 마우스를 Drag & Click이 끝난뒤 이벤트가 발생한다.

 

 

 

 

Move 이벤트

pressmove( )이벤트와 rand( )를 결합할 경우, 

이동에 따라 오브젝트를 변화시킬 수 있다.

 

//생략...
    
	let labelDrag = new Label({
		text:'Move & random size'
	}).center(stage);
	
 	label.drag().on('pressmove',(e)=>{
    	e.target.sca(rand(1,3));
    });

 

 

 

 

 

keyDown( )이벤트

zim.js는 키보드 이벤트도 지원한다.

다음과 같이 '엔터키'를 입력함에 따라 라벨이 삭제되는 간단한 효과가 가능하다.

 

//생략...
    
	let labelDrag = new Label({
		text:'라벨 드레그 & up'
	}).center(stage);
	
 	label.drag().on('pressmove',(e)=>{
    	e.target.sca(rand(1,3));
    });
  
	frame4.on('keydown',(e)=>{
    	console.log('key코드:'+e.keyCode);
      	if(e.keyCode === 13){
        	label.removeFrom();
          	stage.update();
        }
    });

 

같은 원리로 원을 생성한 뒤 클릭 이벤트로 제거하는 코드도 가능하다.

 

//생략...
    let tile = new Tile(new Circle(), 7, 4, 10, 10)
				.center(stage)
				.tap(e=>{
					e.target.removeFrom();
					stage.update();
				})

 

 

 

e.currentTarget( )

 e.currentTarget은 해당 객체의 상위 객체를 선택할 수 있다.

 

 

//생략...
    let tile = new Tile(new Circle(), 2, 2, 10, 10)
					.center(stage)
					.tap(e=>{
						e.currentTarget.alp(0.5);
						stage.update();
					})
				});

 

 

alp( )가 아닌 drag( )메서드를 사용한다면,

다음과 같이 원 전체를 움직일 수 있다.

 

//생략...
    let tile = new Tile(new Circle(), 2, 2, 10, 10)
					.center(stage)
					.drag({
						currentTarget:true // currentTarget은 'all'로 대체가능
					})
				});

 

이외에도 zim.js는 웹에서 사용할 수 있는 다양한 이벤트를 지원한다.