Raphael js를 사용하여 드래그 앤 드롭

자바 스크립트로 퍼즐 게임을 만들려고합니다. 드래그 앤 드롭 및 회전을 처리하기 위해 래퍼를 사용합니다.Raphael js를 사용하여 드래그 앤 드롭

내가 직면 한 문제는 다음과 같습니다. 이미지를 회전 할 때마다 좌표계가 회전되고 드래그 앤 드롭이 더 이상 예상대로 작동하지 않습니다.

편집 2 : 간단한 테스트 사례입니다. 타원 주위를 드래그하여 회전 한 다음 다시 드래그 해보십시오.

편집 : 마우스로 1 픽셀 오른쪽 (x ++)으로 이동할 때마다 이미지가 x -coord하지만 아래 이미지가 보여주는 것처럼 자체 좌표계에서 회전 할 수도 있습니다. SVG Essentials에 설명

alt text http://commons.oreilly.com/wiki/images/f/fa/SVG_Essentials_I_5_tt93.png

으로, 이것은 예상 된 동작입니다.

내 질문은 : 내가 원하는 것을 우아하게 처리 할 수 있습니까? 아니면 회전 행렬을 사용하여 수동으로 올바른 좌표를 계산해야합니까?

기타 JS 라이브러리 또는 제안은 IE 지원을 잃어 버릴지라도 매우 환영 할 것입니다.

출처

2010-07-05 Tiago

이 기사에서도 언급했듯이 변환 순서가 중요합니다. 중심점 (또는 어떤 다른 점은 주위를 회전 할가)

이 또한주의 이전 위치로 다시 번역 0,0

에서 회전

그래서

개체를 번역가 이미 이것을 수행하는 rotate의 오버로드입니다.

<html> 
    <head> 
     <script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script> 
     <script type="text/javascript"> 
      function Draw() 
      { 
       var x = 150, y = 150; 
       var rotation = 0; 
       var paper = Raphael(0, 0, 800, 800); 
       var e = paper.ellipse(x, y, 30, 10); 
       paper.path("M150 150L800 150"); 
       window.setInterval(function() 
       { 
        x += 10; 
        rotation += 10; 
        e.translate(10, 0); 
        e.rotate(rotation, x, y); 
       }, 500); 
      } 
     </script> 
    </head> 
    <body onload="Draw()"> 
    </body> 
</html>

출처

2010-07-05 19:02:52

안녕하세요! 예, 이것이 제가하는 일입니다. 문제는 나중에 드래그하려고 할 때 이미지가 기본 x-coord 대신에 자체 x-coord로 이동하는 것입니다. – Tiago

안녕하세요! 이 코드를 작성해 주셔서 감사합니다. 여기에서 시도해 보았습니다. 1 대신 10 픽셀 씩 번역하면 문제가 발생하는 것을 볼 수 있습니다. 이미지가 직선, 수평선을 따르지 않습니다. – Tiago

직선을 추가하고 이동 거리와 회전 각도를 늘 렸습니다. 여전히 직선을 따른다. 이전 버전의 Raphael을 사용하고 있습니까? 나는 신선한 사본을 사용하고있다. –

Raphael js를 사용하여 드래그 앤 드롭

답변

관련 문제