[javascript] Raphaël을 사용하여 도형의 회전 기능을 추가하는 방법은 어떻게 되나요?

29 Nov 2023

javascript

Raphaël은 HTML5 기반의 JavaScript 라이브러리로, SVG 그래픽을 생성하고 조작하는 데 사용됩니다. Raphaël을 사용하여 도형의 회전 기능을 추가하는 방법은 다음과 같습니다:

Raphaël 라이브러리를 웹 페이지에 로드합니다.

<script src="raphael.js"></script>

Raphaël을 사용하여 도형을 생성합니다. 예를 들어 원을 만들어보겠습니다.

var paper = Raphael(0, 0, 600, 400); // 600x400 크기의 그래픽 영역 생성
var circle = paper.circle(300, 200, 50); // 중심 좌표가 (300, 200)이고 반지름이 50인 원 생성

도형에 이벤트 핸들러를 등록하여 회전 기능을 추가합니다.

circle.attr({cursor: 'pointer'}); // 커서 모양을 포인터로 변경하여 클릭 가능하도록 설정

circle.drag(
    function(dx, dy, x, y, evt) { // 드래그 시작 시 동작하는 함수
        var angle = Math.atan2(y - this.attr("cy"), x - this.attr("cx")); // 현재 도형의 중심과 마우스 위치 사이의 각도 계산
        this.rotate(angle * (180 / Math.PI)); // 도형을 해당 각도로 회전
    },
    function() {}, // 드래그 중에는 아무 동작도 하지 않음
    function() {} // 드래그가 끝난 후에는 아무 동작도 하지 않음
);

웹 페이지에서 도형을 확인하고 회전 기능을 테스트합니다.

위의 예제 코드는 Raphaël을 사용하여 도형의 회전 기능을 구현하는 간단한 방법을 보여줍니다. 필요에 따라 코드를 수정하여 원하는 동작을 구현할 수 있습니다. 자세한 내용은 Raphaël 공식 문서를 참조하시기 바랍니다.

참고 문서: