[javascript] Fabric.js로 도형의 거리에 따라 점 그리기

30 Nov 2023

javascript

Fabric.js는 자바스크립트 기반의 캔버스 라이브러리로, 그래픽 객체를 생성하고 조작할 수 있습니다. 이번 블로그 포스트에서는 Fabric.js를 사용하여 도형의 거리에 따라 점을 그리는 방법을 알아보겠습니다.

1. Fabric.js 설치 및 설정

Fabric.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용하신다면 아래의 명령어를 사용하여 설치할 수 있습니다.

npm install fabric

또는 HTML 파일에서 직접 Fabric.js를 불러올 수도 있습니다. 아래의 코드를 HTML 파일의 <head> 태그 내에 추가하세요.

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>

2. 캔버스 생성하기

먼저 Fabric.js로 캔버스를 생성해야 합니다. 아래의 코드를 사용하여 캔버스를 생성하세요.

const canvas = new fabric.Canvas("canvas");

위의 코드에서 "canvas"는 캔버스를 그릴 HTML 요소의 ID입니다. 원하는 ID로 변경해 주세요.

3. 도형 그리기

캔버스에 도형을 그리기 위해서는 Fabric.js의 도형 클래스를 사용해야 합니다. 점을 그리기 위해서는 fabric.Circle 클래스를 사용할 수 있습니다. 아래의 코드로 원을 그릴 수 있습니다.

const circle = new fabric.Circle({
  radius: 5,
  fill: 'red',
  left: 100,
  top: 100
});

canvas.add(circle);

위의 코드에서 radius는 점의 반지름, fill은 색상, left와 top은 좌표를 나타냅니다. 원하는 좌표와 원의 크기, 색상을 설정해 주세요.

4. 도형의 거리에 따라 점 그리기

이제 도형들이 겹치거나 가까워질 때마다 점을 그리는 기능을 추가해 보겠습니다. Fabric.js의 canvas.on('object:added') 메소드를 사용하여 객체가 캔버스에 추가될 때마다 해당 이벤트를 감지할 수 있습니다.

canvas.on('object:added', function(event) {
  const shape = event.target;
  const overlappingObjects = canvas.getObjects().filter(obj => obj !== shape && obj.intersectsWithObject(shape));
  
  overlappingObjects.forEach(obj => {
    const distance = obj.getCenterPoint().distanceFrom(shape.getCenterPoint());
    
    if (distance < 50) {
      const point = new fabric.Circle({
        radius: 3,
        fill: 'blue',
        left: (obj.left + shape.left) / 2,
        top: (obj.top + shape.top) / 2
      });
      
      canvas.add(point);
    }
  });
});

위의 코드에서 shape은 추가된 도형을 나타내며, overlappingObjects는 겹치는 다른 도형들의 배열입니다. intersectsWidthObject() 메소드를 사용하여 두 도형이 겹치는지 확인하고, getCenterPoint() 메소드로 도형의 가운데 좌표를 가져옵니다.

만약 두 도형 사이의 거리가 50보다 작다면 새로운 점을 생성하고 캔버스에 추가합니다. 점의 좌표는 두 도형 중앙점의 평균값을 사용하여 설정합니다.

결론

이제 Fabric.js를 사용하여 도형의 거리에 따라 점을 그리는 방법을 알아보았습니다. 이를 응용하여 다양한 시각화 기능을 구현할 수 있습니다. Fabric.js의 다양한 메소드와 기능을 활용해 원하는 그래픽을 자유롭게 구현해 보세요!

참고: Fabric.js 공식 문서