Fabric.js는 HTML5 캔버스에서 그래픽 객체를 다룰 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 쉽게 도형의 위치와 크기를 조절할 수 있으며, 도형의 센터 좌표를 구할 수도 있습니다.

아래의 예제 코드는 Fabric.js를 사용하여 도형의 센터 좌표를 구하는 방법을 보여줍니다.

// Fabric.js 캔버스 생성
var canvas = new fabric.Canvas('canvas');

// 원 객체 생성
var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: 'red'
});

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

// 센터 좌표 구하기
var center = {
  x: circle.left + circle.radius,
  y: circle.top + circle.radius
};

console.log('센터 좌표:', center);

위의 코드에서는 fabric.Circle 객체를 생성하여 캔버스에 추가하고, 도형의 left와 top 속성 값을 이용하여 원의 센터 좌표를 구하고 있습니다. 계산된 센터 좌표는 x와 y 속성으로 나타내어집니다.

이와 같은 방법으로 다양한 형태의 도형의 센터 좌표를 구할 수 있습니다.

참고 자료:

• Fabric.js 공식 문서