[javascript] Fabric.js로 도형의 겹침 여부 확인하기
Fabric.js는 HTML5 캔버스 위에서 작업하는 JavaScript 라이브러리로, 사용자 인터페이스 요소를 만들고 조작하기에 매우 편리한 도구입니다. 이번 포스트에서는 Fabric.js를 사용하여 도형이 겹쳐져 있는지 여부를 확인하는 방법을 알아보겠습니다.
겹침 여부 확인하기
Fabric.js에서 도형들은 canvas 요소에 추가되어 화면에 표시됩니다. 이러한 도형들은 fabric.Object 클래스의 인스턴스로써 생성됩니다. 따라서, 겹침 여부를 확인하기 위해서는 각 도형의 위치와 크기 정보를 비교해야 합니다.
var canvas = new fabric.Canvas('canvas'); // 캔버스 생성
var rect1 = new fabric.Rect({ // 첫 번째 사각형 생성
left: 50,
top: 50,
width: 100,
height: 100,
fill: 'red'
});
canvas.add(rect1);
var rect2 = new fabric.Rect({ // 두 번째 사각형 생성
left: 75,
top: 75,
width: 100,
height: 100,
fill: 'blue'
});
canvas.add(rect2);
if (rect1.intersectsWithObject(rect2)) { // 겹침 여부 확인
console.log('도형이 겹쳐져 있습니다.');
} else {
console.log('도형이 겹치지 않습니다.');
}
위의 코드에서는 fabric.Rect 클래스를 사용하여 두 개의 사각형을 생성하고, canvas에 추가합니다. intersectsWithObject 메서드를 사용하여 두 도형이 겹쳐져 있는지 여부를 확인합니다.