[javascript] Fabric.js로 바탕화면 이미지의 마우스 이벤트 제어하기(클릭, 드롭)

30 Nov 2023

javascript

Fabric.js는 HTML5 캔버스를 사용하여 그래픽을 그리고 조작할 수 있는 자바스크립트 라이브러리입니다. 이번 포스트에서는 Fabric.js를 사용하여 바탕화면 이미지에 클릭 이벤트와 드롭 이벤트를 제어하는 방법에 대해 알아보겠습니다.

설치 및 준비

먼저 Fabric.js를 설치하기 위해 프로젝트 폴더에서 다음 명령을 실행합니다:

npm install fabric --save

그리고 HTML 파일에 다음과 같이 Fabric.js 스크립트 파일을 포함시킵니다:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>

HTML 마크업

Fabric.js를 사용하여 바탕화면 이미지를 제어하기 위해 다음과 같이 HTML을 구성합니다:

<div id="canvas-container">
  <canvas id="canvas"></canvas>
</div>

자바스크립트 코드

이제 Fabric.js를 사용하여 바탕화면 이미지에 마우스 이벤트를 추가해보겠습니다:

document.addEventListener('DOMContentLoaded', function() {
  // 바탕화면 이미지 URL
  var backgroundImageUrl = '바탕화면 이미지의 URL';

  // Canvas 요소 가져오기
  var canvas = new fabric.Canvas('canvas');

  // 바탕화면 이미지 추가
  fabric.Image.fromURL(backgroundImageUrl, function(img) {
    canvas.setDimensions({
      width: img.width,
      height: img.height
    });
    canvas.setBackgroundImage(img);
    canvas.renderAll();
  });

  // 클릭 이벤트 추가
  canvas.on('mouse:down', function(event) {
    var pointer = canvas.getPointer(event.e);
    var x = pointer.x;
    var y = pointer.y;

    console.log('클릭 위치:', x, y);

    // TODO: 클릭 이벤트 처리 로직 작성
  });

  // 드롭 이벤트 추가
  canvas.on('mouse:up', function(event) {
    var pointer = canvas.getPointer(event.e);
    var x = pointer.x;
    var y = pointer.y;

    console.log('드롭 위치:', x, y);

    // TODO: 드롭 이벤트 처리 로직 작성
  });
});

위 코드에서 주석에 추가로 처리해야 할 로직을 작성하면 됩니다. 클릭 이벤트의 경우 mouse:down 이벤트를 듣고, 드롭 이벤트의 경우 mouse:up 이벤트를 듣고 있습니다. 클릭 또는 드롭된 위치는 canvas.getPointer(event.e)를 사용하여 가져올 수 있습니다.

실행

이제 준비된 HTML 파일을 웹 브라우저에서 실행하면 바탕화면 이미지에 클릭과 드롭 이벤트를 제어할 수 있습니다.

Fabric.js를 사용하면 마우스 이벤트를 통해 바탕화면 이미지를 상호작용적으로 제어할 수 있습니다. 자세한 내용은 공식 문서를 참조하십시오.