Fabric.js로 캔버스를 다룰 때 여러 개의 객체가 겹쳐 있는 경우, 어떤 객체가 앞에 표시되고 어떤 객체가 뒤에 숨겨질지 결정하는 레이어 순서(z-index) 조절이 필요할 때가 많습니다. Fabric.js는 이를 위해 간단하고 직관적인 API 메서드를 제공합니다.
레이어 순서를 변경하는 기본 API
Fabric.js는 객체의 z-index(쌓임 순서)를 변경할 수 있는 다음과 같은 메서드들을 제공합니다:
canvas.sendBackwards(myObject) // 객체를 한 단계 뒤로 보내기 canvas.sendToBack(myObject) // 객체를 가장 뒤로 보내기 canvas.bringForward(myObject) // 객체를 한 단계 앞으로 가져오기 canvas.bringToFront(myObject) // 객체를 가장 앞으로 가져오기
각 메서드의 역할
- sendBackwards(obj): 대상 객체를 현재 위치에서 한 단계씩 뒤로 이동시킵니다.
- sendToBack(obj): 대상 객체를 모든 객체 중 가장 아래(뒤)로 이동시킵니다.
- bringForward(obj): 대상 객체를 현재 위치에서 한 단계씩 앞으로 이동시킵니다.
- bringToFront(obj): 대상 객체를 모든 객체 중 가장 위(앞)로 이동시킵니다.
객체 전체를 원하는 기준으로 정렬하기
개별적으로 순서를 조절하는 것 외에도, 캔버스에 있는 모든 객체를 특정 기준(예: 크기, 생성 시간 등)에 따라 한 번에 정렬하고 싶다면 Fabric.Canvas.prototype에 커스텀 메서드를 추가하여 활용할 수 있습니다:
fabric.Canvas.prototype.orderObjects = function(compare) {
this._objects.sort(compare);
this.renderAll();
}위 코드는 캔버스 내부의 객체 배열(_objects)을 자바스크립트의 sort() 메서드와 비교 함수(compare)를 사용해 정렬한 뒤, renderAll()을 호출하여 화면에 즉시 반영합니다.
사용 예시
// 객체를 너비 기준으로 오름차순 정렬
canvas.orderObjects(function(a, b) {
return a.width - b.width;
});이처럼 Fabric.js의 레이어 관련 API를 잘 활용하면 도형, 이미지, 텍스트 등 다양한 요소가 겹치는 복잡한 캔버스 애플리케이션에서도 객체의 표시 순서를 손쉽게 제어할 수 있습니다.