조연섭의 IT 블로그

fabricJS - 이미지에 오버레이 포커스

개요 전체 이미지를 뿌옇게 오버레이 처리하고 네모 박스를 만들어서 포커스 효과를 주고 싶을 경우 jsfiddle : https://jsfiddle.net/yscho03/4uvjsb6L/ 전체 코드 var canvasWidth = 640, canvasHeight = 480; var canvas = new fabric.Canvas('my-canvas', { preserveObjectStacking: 'true', width : canvasWidth, height: canvasHeight }); canvas.setOverlayImage('https://placeimg.com/' + canvasWidth + '/' + canvasHeight + '/people', canvas.renderAll.bind(canv..

프런트엔드/Library 2022. 4. 20. 16:20

shift 키를 눌렀을때 정사이즈로 scaling

구현방법 shift 키를 눌렀을 경우 객체를 정사이즈로 스케일링하고 shift 키를 누르지 않았을 경우는 반대로 드래그한 비율대로 리사이즈를 하고싶다. 원인 fabricJS에서는 객체 스케일링시 기본 옵션이 정사이즈 비율로 리사이즈되고 shift 키를 눌렀을때 드래그한 비율대로 리사이즈를 한다. 대응 fabricJS에서 이벤트를 제어할 수 있는 확장 함수로 존재하나 이 확장 함수를 활용하여 조건문을 변경하면서 대응하기는 힘들다. fabricJS에서 사용하고 있는 스케일링 조건 함수를 덮어씌우는 방법이다. 데모 페이지 : http://jsfiddle.net/yscho03/egzcopf4 var canvas = new fabric.Canvas('c', { uniScaleTransform: true }); v..

프런트엔드/Library 2020. 6. 4. 14:56

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

환경 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. swapV..

프런트엔드/Library 2018. 12. 31. 16:23