[javascript] Raphaël을 사용하여 웹 페이지에 확대/축소 기능을 추가하는 방법은 어떻게 되나요?

29 Nov 2023

javascript

포괄적인 Raphaël 라이브러리를 사용하여 웹 페이지에 확대/축소 기능을 구현하는 것은 매우 간단합니다. Raphaël은 SVG(Scaleable Vector Graphics)를 다루기 위한 Javascript 라이브러리로, 다양한 그림과 도형을 그릴 수 있습니다.

아래는 Raphaël을 사용하여 확대/축소 기능을 추가하는 간단한 예제입니다. 먼저, Raphaël 라이브러리를 다운로드하고 HTML 문서에 포함시킵니다.

<!DOCTYPE html>
<html>
<head>
  <title>Raphaël Zoom Example</title>
  <script src="raphael.min.js"></script>
</head>
<body>
  <div id="canvas"></div>

  <script>
    // Raphaël로 canvas 생성
    var canvas = Raphael("canvas", 800, 600);
    
    // 화면에 그리고자 하는 사각형 요소 생성
    var rect = canvas.rect(100, 100, 200, 100)
                    .attr({
                      fill: "#f00",
                      stroke: "#000"
                    });

    // 확대/축소 기능을 위한 이벤트 핸들러 함수
    function zoom(event) {
      var scaleFactor = event.wheelDelta > 0 ? 1.2 : 0.8; // 휠 이벤트에서 확대/축소 비율 설정
      var mouseX = event.offsetX; // 마우스 위치(X)
      var mouseY = event.offsetY; // 마우스 위치(Y)

      // 확대/축소 이벤트 발생 시 사각형의 위치와 크기를 조정
      var newWidth = rect.attrs.width * scaleFactor;
      var newHeight = rect.attrs.height * scaleFactor;

      var newX = rect.attrs.x - (newWidth - rect.attrs.width) * (mouseX / rect.attrs.width);
      var newY = rect.attrs.y - (newHeight - rect.attrs.height) * (mouseY / rect.attrs.height);

      rect.attr({ width: newWidth, height: newHeight, x: newX, y: newY });
    }

    // 마우스 휠 이벤트 감지 시 확대/축소 함수 호출
    document.getElementById("canvas").addEventListener("mousewheel", zoom);

  </script>
</body>
</html>

위의 예제에서는 Raphaël을 사용하여 사각형을 생성하고, 휠 이벤트를 감지하여 확대/축소 기능을 구현하였습니다. 이벤트 핸들러 함수 zoom에서 휠 이벤트의 wheelDelta 값을 확인하여 확대/축소 비율을 조정합니다. 그리고 사각형의 위치와 크기를 계산하여 조정한 후, attr 메소드를 사용하여 사각형을 업데이트합니다.

Raphaël은 다양한 기능을 제공하며, 더 복잡한 그래픽 요소와 확대/축소 동작을 추가할 수도 있습니다. Raphaël 공식 문서(https://dmitrybaranovskiy.github.io/raphael/)를 참고하여 더 많은 기능을 탐색해보세요.