[javascript] Fabric.js로 폴리곤 그리기
Fabric.js는 HTML5 캔버스 요소를 다루기 위한 자바스크립트 라이브러리입니다. 이 글에서는 Fabric.js를 사용하여 폴리곤을 그리는 방법을 알아보겠습니다.
1. Fabric.js 설치
먼저 Fabric.js를 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하여 설치할 수 있습니다.
npm install fabric
2. HTML 파일에 Fabric.js 추가하기
Fabric.js를 사용하기 위해 HTML 파일에 fabric.js 스크립트를 추가해야 합니다. <script> 태그를 사용하여 다음과 같이 추가합니다.
<script src="node_modules/fabric/dist/fabric.js"></script>
3. 폴리곤 그리기
이제 폴리곤을 그리기 위한 기본 코드를 작성해보겠습니다.
// 캔버스 생성
var canvas = new fabric.Canvas('canvas');
// 폴리곤 생성
var polygon = new fabric.Polygon([
{x: 50, y: 50},
{x: 100, y: 100},
{x: 150, y: 50},
{x: 150, y: 150},
{x: 50, y: 150}
], {
fill: 'red',
stroke: 'black',
strokeWidth: 2
});
// 캔버스에 폴리곤 추가
canvas.add(polygon);
위 코드에서는 fabric.Canvas 객체를 사용하여 캔버스를 생성하고, fabric.Polygon 객체를 사용하여 폴리곤을 생성합니다. fabric.Polygon 생성자의 첫 번째 인자로 폴리곤의 좌표를 배열로 전달합니다. 이때 좌표의 순서는 반드시 시계 방향이어야 합니다. 두 번째 인자로는 폴리곤의 스타일을 설정할 수 있습니다.
마지막으로 canvas.add 메서드를 사용하여 폴리곤을 캔버스에 추가합니다.
4. 캔버스에 이벤트 추가하기
Fabric.js는 캔버스에 다양한 이벤트 핸들러를 추가할 수 있습니다. 예를 들어, 폴리곤 클릭 시 어떤 동작을 수행하도록 할 수 있습니다.
polygon.on('mousedown', function() {
console.log('폴리곤이 클릭되었습니다.');
});
위 코드는 폴리곤이 마우스로 클릭되었을 때 콘솔에 메시지를 출력합니다. on 메서드를 사용하여 이벤트 핸들러를 등록할 수 있습니다. 다양한 이벤트 타입과 핸들러를 사용할 수 있으니 필요에 따라 사용하면 됩니다.