Web 개발에서 도형을 그리는 작업은 여러 가지 라이브러리를 활용할 수 있습니다. 이 중에서 Fabric.js는 HTML5 캔버스에 그래픽 요소를 그리고 제어할 수 있는 강력한 도구입니다. 이번 글에서는 Fabric.js를 사용하여 도형의 외부와 내부에 선을 그리는 방법에 대해 알아보겠습니다.

외부 선 그리기

도형의 외부에 선을 그리기 위해서는 Fabric.js의 fabric.Line 클래스를 사용할 수 있습니다. 이 클래스는 시작점과 끝점을 지정하여 선을 그릴 수 있도록 해줍니다. 다음은 외부 선을 그리는 예제 코드입니다.

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

// 도형 생성
const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 100,
  fill: 'red',
});

// 외부 선 생성
const line = new fabric.Line([50, 50, 350, 50], {
  stroke: 'green',
  strokeWidth: 2,
});

// 캔버스에 도형과 선 추가
canvas.add(rect, line);

위의 예제에서 fabric.Line 클래스의 생성자에는 시작점과 끝점의 좌표를 [x1, y1, x2, y2] 형식으로 전달합니다. stroke 속성은 선의 색상을, strokeWidth 속성은 선의 두께를 지정할 수 있습니다.

내부 선 그리기

도형의 내부에 선을 그리기 위해서는 fabric.Polygon 클래스를 사용할 수 있습니다. 이 클래스는 다각형 내부에 선을 그리는 기능을 제공합니다. 아래는 내부 선을 그리는 예제 코드입니다.

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

// 다각형 내부의 선을 그리는 함수
function drawInnerLine(points, color, width) {
  const polygon = new fabric.Polygon(points, {
    fill: 'yellow',
    strokeWidth: 0,
  });

  const line = new fabric.Path(`M${points[0]} ${points[1]} L ${points[2]} ${points[3]}`, {
    stroke: color,
    strokeWidth: width,
  });

  polygon.addWithUpdate(line);
  canvas.add(polygon);
}

// 다각형 내부의 선 그리기
drawInnerLine([50, 50, 50, 250], 'blue', 2);

위의 예제에서 drawInnerLine 함수는 fabric.Polygon 클래스를 사용하여 다각형을 그리고, fabric.Path 클래스를 사용하여 선을 그립니다. 선을 다각형에 추가하기 위해서 addWithUpdate 메서드를 사용합니다. 이를 통해 다각형에 선이 추가되어 화면에 표시됩니다.

결론

Fabric.js를 사용하면 도형의 외부와 내부에 선을 그릴 수 있습니다. 외부 선은 fabric.Line 클래스를 사용하여 그리고, 내부 선은 fabric.Polygon과 fabric.Path 클래스를 사용하여 그릴 수 있습니다. 이를 통해 다양한 도형을 생성하고 다각형 내부의 선을 그릴 수 있습니다. 자세한 내용은 Fabric.js의 공식 문서를 참고하시기 바랍니다.

참고 문서:

• Fabric.js 공식 문서