[javascript] Fabric.js로 도형의 꼭짓점 개수 확인하기
Fabric.js는 HTML5 캔버스를 기반으로 동작하는 자바스크립트 라이브러리로, 도형을 쉽게 그리고 조작할 수 있도록 도와줍니다. 이번에는 Fabric.js를 사용하여 그려진 도형의 꼭짓점 개수를 확인하는 방법에 대해 알아보겠습니다.
예제 코드
// Fabric.js 캔버스 생성
var canvas = new fabric.Canvas('canvas');
// 삼각형 객체 생성
var triangle = new fabric.Triangle({
left: 100,
top: 100,
width: 100,
height: 100,
fill: 'red'
});
// 사각형 객체 생성
var rectangle = new fabric.Rect({
left: 300,
top: 100,
width: 100,
height: 100,
fill: 'blue'
});
// 캔버스에 도형 추가
canvas.add(triangle);
canvas.add(rectangle);
// 도형의 꼭짓점 개수 확인 함수
function getVerticesCount(shape) {
if (shape.get('type') === 'triangle') {
return 3;
} else if (shape.get('type') === 'rect') {
return 4;
} else {
return 0;
}
}
// 도형 선택 시 꼭짓점 개수 확인
canvas.on('selection:created', function(e) {
var selectedShape = e.target;
var verticesCount = getVerticesCount(selectedShape);
console.log('Selected shape has ' + verticesCount + ' vertices.');
});
설명
위 예제 코드에서는 Fabric.js를 사용하여 캔버스를 생성하고, 삼각형과 사각형 객체를 생성한 후 캔버스에 추가합니다. 그리고 도형의 꼭짓점 개수를 확인하는 getVerticesCount 함수를 작성합니다. 이 함수는 선택된 도형의 타입을 확인하고, 타입에 따라 해당 도형의 꼭짓점 개수를 반환합니다.
마지막으로, 캔버스의 selection:created 이벤트를 통해 도형이 선택되었을 때 해당 도형의 꼭짓점 개수를 확인하고 콘솔에 출력합니다.
실행 결과
Selected shape has 3 vertices.
Selected shape has 4 vertices.