LHJ

I'm a FE developer.

1.7 단순한 그래픽 그리기

12 Apr 2020 » js_lj

HTML5에서 발전한 것 중에는 표준화된 그래픽 인터페이스도 있습니다.
HTML5 캔버스를 사용해서 그래픽 사각형이나 원, 다각형 같은 단순한 도형을 그릴 수 있습니다.
캔버스를 직접 사용하는 건 매우 어렵고 손이 많이 가는 일이므로 그래픽 라이브러리 Paper.js(http://paperjs.org/)를 사용해서 HTML5 캔버스를 사용해 봅시다.

NOTE_ Paper.js가 유일한 캔버스 그래픽 라이브러리는 아닙니다.
KineticJS(http://kineticjs.com/),
Fabric.js(http://fabricjs.com/),
EaselJS(http://www.createjs.com/easeljs)
등은 모두 매우 인기 있고 잘 만들어진 라이브러리입니다. 필자는 이들 라이브러리를 모두 사용해 봤고 매우 만족했습니다.

Paper.js로 그림을 그리기 전에 먼저 HTML 캔버스 요소를 준비해야 합니다.
다음 행을 바디에 추가하십시오.
위치는 어디든 상관없습니다.

<canvas id="mainCanvas"></canvas>

캔버스에 사용한 id 속성은 자바스크립트와 CSS에서 이 요소를 쉽게 찾기 위한 것입니다.
지금 당장 페이지를 확인하면 아무것도 달라지지 않았습니다.
캔버스에 아무것도 그리지 않았을 뿐 아니라,
흰 페이지 위의 흰 캔버스이고 너비와 높이도 지정하지 않았으니 당연히 차이를 발견할 수 없습니다.

NOTE_ 모든 HTML 요소에 ID를 사용할 수 있고, HTML의 형식을 잘 지키려면 각 ID는 반드시 한번씩만 사용해야 합니다.
즉, 캔버스의 id를 mainCanvas로 정했으므로 이 ID는 다시 사용할 수 없습니다.
따라서 ID를 너무 남발하지는 않길 권합니다.
여기서 ID를 사용한 이유는 초보자에게는 한 번에 하나씩 하는 게 배우기 쉽기 때문이고, ID는 원래 페이지 하나에 하나씩 쓰도록 정의되었기 때문입니다.

캔버스가 페이지에서 잘 보이도록 main.css를 수정합시다.
CSS에 익숙하지 않아도 괜찮습니다.
여기서 수정할 내용은 단순히 HTML 요소에 너비와 높이를 설정하고 검은색 테두리를 추가하는 것뿐입니다.
(CSS와 HTML에 대해 더 배우고 싶다면 코드 아카데미의 HTML & CSS 무료 강좌를 보길 권합니다. https://www.codecademy.com/learn/web)

#mainCanvas {
    width: 400px;
    height: 400px;
    border: solid 1px black;
}

이제 페이지를 리로드하면 캔버스가 보입니다.

이미지

이제 도형을 그릴 캔버스가 준비됐으니 그리는 작업을 도와줄 Paper.js 라이브러리를 링크합시다.
제이쿼리 링크 바로 다음, main.js 링크 바로 앞에 다음 행을 추가하십시오.

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>

제이쿼리와 마찬가지로 이번에도 CDN을 통해 Paper.js를 불러왔습니다.

NOTE_ 이제 라이브러리를 링크하는 순서가 중요하다는 걸 깨달았을 겁니다.
main.js에서 제이쿼리와 Paper.js를 모두 사용해야 하므로 이들을 먼저 링크해야 합니다.
제이쿼리와 Paper.js는 서로 관계가 없으므로 이 두 라이브러리의 순서는 상관없지만,
웹개발에서 제이쿼리가 빠지는 일은 거의 없으므로 항상 제이쿼리를 먼저 링크하는 습관을 들이길 권합니다.

이제 Paper.js를 불러왔으니 설정 작업이 필요합니다.
다음과 같이 어떤 일을 하기 전에 항상 먼저 실행해야 하는 코드를 보통 템플릿, 또는 보일러플레이트(boilerplate)라고 부릅니다.
다음 코드를 mian.js의 use strict 바로 다음에 추가하십시오.
(원한다면 console.log는 이제 제거해도 됩니다.)

$(document).ready(function () {
    'use strict';
    paper.install(window);
    paper.setup(document.getElementById('mainCanvas'));

    // Todo

    paper.view.draw();
})

첫 번째 행에서는 Paper.js를 전역 스코프에 설치했습니다.
(스코프에 대해서는 7장에서 배웁니다.)
두 번째 행에서는 Paper.js를 캔버스에 연결하고 Paper.js가 그림을 그릴 수 있도록 준비합니다.
중앙의 Todo는 실제로 그림을 그리는 코드가 들어갈 자리입니다.
마지막 행에서는 Paper.js가 실제로 화면에 그림을 그리라는 명령입니다.

이제 템플릿이 준비됐으니 그림을 그려 봅시다.
먼저 캔버스 중앙에 녹색 원을 그리겠습니다.
Todo 주석을 다음 행으로 교체하십시오.

$(document).ready(function () {
    'use strict';
    paper.install(window);
    paper.setup(document.getElementById('mainCanvas'));

    var c = Shape.Circle(200, 200, 50);
    c.fillColor = 'green';

    paper.view.draw();
})

브라우저를 새로고침 하니 녹색 원이 나타났습니다.

이미지

		var c = Shape.Circle(200, 200, 50);
    c.fillColor = 'green';

사실 이 두 행에서는 아주 많은 일을 하고 있지만, 지금 알아야 할 것은 몇 가지뿐입니다.

  • 첫 번째 행은 원 객체를 만들고, 객체를 만들기 위해 매개변수 세 가지를 받습니다.
    여기서 받은 매개변수는 원 중앙의 x, y 좌표와 원의 반지름입니다.
    캔버스 너비와 높이가 각각 400px이었으므로 캔버스의 중심은 (200, 200)입니다.
    반지름 50px은 캔버스의 너비와 높이의 1/8입니다.
  • 두 번째 행에서는 채울 색깔(fill)을 정했습니다.
    이 색깔은 Paper.js에서 스트로크(stroke)라 부르는 외곽선 색깔과는 다릅니다.

매개변수를 자유롭게 바꿔가면서 실험해봐도 괜찮습니다.

Related Posts