이미지가 겹쳐있을 경우 처리

환경

• fabricJS 2.4.0

요약

• fabricJS에서 canvas를 생성시 preserveObjectStacking : true 옵션을 설정하면 이미지가 겹쳐있을 경우도 우선순위에 따라 우선순위 맨 위쪽의 이미지 레이어만 클릭이 된다. 우선순위에 관계없이 눈에 보이는 이미지를 바로 선택을 하게 하려면 이벤트를 걸어서 타겟을 바꿔줘야 한다.

대응

// 1. 캔버스 생성
var canvas = new fabric.Canvas(canvasRef, {
	width: 500,
	height: 500,
	preserveObjectStacking : true
});

// 2. 마우스 클릭 이벤트 핸들러 설정
canvas.on('mouse:down:before', swapVisibleObject);

// 3. swapVisibleObject 함수
function swapVisibleObject(event) {

	// 타겟이 없다면 return
	if (!event.target) {
		return;
	}

	// event가 드래그가 아닐 경우 return
	const corner = event.target._findTargetCorner(canvas.getPointer(event.e, true));
	const action = canvas._getActionFromCorner(event.target, corner, event.e);
	if (action != 'drag') {
		return;
	}


	// 이벤트 클릭 위치
	var layerX = event.e.layerX;
	var layerY = event.e.layerY;


	// 클릭 위치에 해당하는 바꿀 이미지 취득 (개인의 설정 로직에 따라 다름. 아래는 object 중 1번째라는 예시일뿐)
	var clipImage = canvas.getObjects()[1]; 

	
	// 해당 타겟을 바꾸어준다.
	canvas._target = clipImage;
}