[javascript] Fabric.js로 도형의 외접원, 내접원 그리기

30 Nov 2023

javascript

Fabric.js는 HTML5 캔버스를 기반으로한 자바스크립트 라이브러리로, 동적인 그래픽을 생성하고 관리하는데 사용됩니다. 이번 포스트에서는 Fabric.js를 사용하여 도형의 외접원과 내접원을 그리는 방법에 대해 알아보겠습니다.

외접원 그리기

Fabric.js 초기화

먼저 Fabric.js를 사용하기 위해 HTML 파일에서 Fabric.js를 로드하고, 캔버스 요소를 생성하고 초기화해야 합니다.

<canvas id="canvas" width="500" height="500"></canvas>

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

외접원 그리기

외접원을 그리기 위해서는 원을 생성하고, 원의 중심점을 도형의 중심으로 이동시킨 다음, 도형을 회전시켜야 합니다. 이를 위해 필요한 값들을 계산하고 설정해주어야 합니다.

// 원의 반지름과 도형의 위치 값을 설정합니다.
var radius = 100;
var x = 250;
var y = 250;

// 원의 중심점을 도형의 중심으로 이동시킵니다.
var centerX = x + radius;
var centerY = y + radius;

// 원을 생성하고 도형을 회전시킵니다.
var circle = new fabric.Circle({
  radius: radius,
  left: x,
  top: y,
  originX: 'center',
  originY: 'center',
  angle: 45
});

// 캔버스에 원을 추가합니다.
canvas.add(circle);

위 코드를 실행하면, 중심이 (250, 250)인 반지름이 100인 원이 캔버스에 그려집니다. 도형의 회전을 변경하기 위해 angle 값을 수정해보세요.

내접원 그리기

Fabric.js 초기화

외접원 그리기와 마찬가지로, Fabric.js를 초기화하는 코드는 동일합니다.

<canvas id="canvas" width="500" height="500"></canvas>

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

내접원 그리기

내접원을 그리기 위해서는 원을 생성하고, 원의 반지름과 도형의 크기를 조절해주어야 합니다. 내접원의 경우 도형의 크기에 따라 원의 중심점을 계산하여 설정해주어야 합니다.

// 도형의 크기 값을 설정합니다.
var width = 200;
var height = 200;

// 원의 반지름을 계산합니다.
var radius = Math.min(width, height) / 2;

// 원의 중심점을 도형의 중심으로 이동시킵니다.
var centerX = radius;
var centerY = radius;

// 원을 생성하고 도형의 크기를 조절합니다.
var circle = new fabric.Circle({
  radius: radius,
  left: 250,
  top: 250,
  width: width,
  height: height,
  originX: 'center',
  originY: 'center'
});

// 캔버스에 원을 추가합니다.
canvas.add(circle);

위 코드를 실행하면, 크기가 (200, 200)인 내접원이 캔버스에 그려집니다. 도형의 크기를 변경해보세요.

결론

이번 포스트에서는 Fabric.js를 사용하여 도형의 외접원과 내접원을 그리는 방법을 알아보았습니다.

Fabric.js는 강력하고 유연한 자바스크립트 그래픽 라이브러리로, 다양한 기능과 옵션을 제공합니다. 추가적인 도움이 필요하다면 Fabric.js 공식 문서를 참고해보세요.

Fabric.js 공식 문서