zim.js 연필 드로잉

｜Pen & 모션컨트롤러 사용

드로잉 포스팅에 이어 zim.js에 탑재된 기본 드로잉 기능, 'pen'을 사용해보자.

pen을 단독으로 사용해서는 부드러운 필기구 느낌을 낼 수 없으며, motionController가 필요하다.

 

 

[구현]

 

 

 

 

연필드로잉 코드는 마음먹기에 따라 얼마든지 (코드)길이가 늘어날 수 있는데,

zim.js는 20줄 정도로 끝내버린다.

 

[코드]

 

<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 pen = new Pen({
			color:pink,
			damp:1
		}).addTo(stage);
  
	   let motionController = new MotionController({
				target:pen, 
				type:"pressmove",
				speed:150,
				damp:1,
				mouseMoveOutside:true
		}).center(stage);
  
	   motionController.enabled = false;
	   pen.write = true;
  
	   stage.update();
	});
</script>​

 

딱히 개발자가 손댈게 없다;

zim.js의 Pen()인스턴스를 생성한 뒤 MotionController에 집어넣으면 끝이다.

 Pen()과 관련된 내용은 zim.DOC페이지에서 좀더 디테일한 부분을 볼 수 있다.  

 

https://zimjs.com/docs.html

ZIM DOCS - JavaScript Canvas Framework