마치 손으로 스케치한 듯한 효과를 주는 자바스크립트 라이브러리 Rough.js를 소개합니다.
Rough는 Canvas를 기반으로하는 경량 라이브러리로, Canvas로 표현해 낸 형태를 스케치한 듯이 표현해 줍니다.
라인이나 곡선, 호, 원, 타원형, 다각형 그리고 SVG path를 정의하고 지원합니다.
마치 손그림 같은 모습이 너무 귀엽지않나요?...ㅎㅎㅎ
*설치
git에서 관리, 배포되고 있어 다운로드 받으셔서 import하시거나 npm으로 설치하시면 됩니다.
git
https://github.com/pshihn/rough/tree/master/dist
npm
npm install --save roughjs*튜토리얼
Canvas를 준비한 뒤, rough를 이용하여 간단한 도형을 그려보며 속성을 익혀보겠습니다.
기본적으로 제공하는 모형인 사각형, 라인, 원, 그리고 타원형을 위치를 잡아 간단하게 그리실 수 있습니다.
const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 150, 140); // 사각형 x, y, 너비, 높이 rc.circle(80, 120, 50); // 원 - 원의 중심 x, y, 지름 rc.ellipse(200, 100, 150, 80); // 타원형 - 원의 중심 x, y, 너비, 높이 rc.line(80, 120, 225, 100); // 선 - x1, y1, x2, y2
뭔가 허전하시죠...? 도형 내부를 채워보도록 하겠습니다.
모형에 효과를 주기 위해서는 마지막 인자에 옵션값을 부여하시면 됩니다.
색을 채울 때는 fill 이며, 디테일한 손그림 표현을 위해 안을 채우는 선에 굵기를 조절하는 fillWeight 옵션이 있으
며, 칠하는 각도(hachureAngle)나 갭(hachureGap)도 조절할 수 있어, 더 섬세하게 표현할 수 있습니다.
모형을 그냥 꽉차게 채우고 싶으시다면 fillStyle: 'solid'를 주시면 됩니다.
rc.circle(50, 50, 80, { fill: '#0080c0' }); // 기본
rc.circle(120, 50, 80, { fill: '#0080c0', fillWeight: 2 }); // 모형 안쪽 선 굵기 rc.circle(220, 50, 80, { fill: '#0080c0', hachureAngle:60 }); // 모형 안쪽 칠하는 각도 rc.circle(300, 50, 80, { fill: '#0080c0', hachureAngle:60, hachureGap:10 }); // 모형 안쪽 선 간격 rc.circle(300, 50, 80, { fill: '#0080c0', fillStyle: 'solid' }); // 모형 안쪽 꽉 채우기
roughness 옵션을 이용하시면 의 펜 휘날리는 정도를 조절 가능합니다.
값이 커질수록 연하고 손을 마구잡이 휘날리는(?!) 느낌을 받으실 수 있습니다.
rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: '#a349a4' });
rc.rectangle(120, 15, 80, 80, { roughness: 5, fill: '#ff7ffe' });
비슷하게 테두리도 bowing옵션 강도에 따라 채워지는 느낌을 달리 할 수 있습니다.
마찬가지로 값이 커질수록 뭐 선이 두줄로 보이는 현상을 마주하실 수 있다는 점~
rc.rectangle(15, 30, 80, 80, { bowing: 3, stroke: '#333', strokeWidth: 3 });
rc.rectangle(120, 30, 80, 80, { bowing: 10, stroke: '#333', strokeWidth: 3 });
rc.rectangle(240, 30, 80, 80, { bowing: 20, stroke: '#333', strokeWidth: 3 });
rough.js를 사용하다보니 신기하게도 매번 그려줄때마다 그림이 달라진다는 것을 발견했습니다.
아래는 같은 옵션을 사용함에도 불구하고 다른 느낌으로 그려진 것을 확인할 수 있다.
rc.rectangle(15, 30, 80, 80,{roughness: 1, fill:'#333', bowing: 5,stroke: '#000', strokeWidth: 3});
rc.rectangle(120, 30, 80, 80,{roughness: 1, fill:'#333', bowing: 5,stroke: '#000', strokeWidth: 3});
rc.rectangle(240, 30, 80, 80,{roughness: 1, fill:'#333', bowing: 5,stroke: '#000', strokeWidth: 3});
)
rc.path('M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9
C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z',
{ roughness: 3, fill: '#fc7367', fillWeight: 3,bowing: 3, stroke: '#fdd335', strokeWidth: 5,
hachureAngle:150, hachureGap:10});
아래는 rough 사이트에 올라와진 예제로 소스는 사이트에 들어가서 확인 가능합니다.
