2011-10-26 3 views
5

저는이 벽으로 머리를 두드리는 중입니다. 나는 라파스 js 버전 2.0을 가지고 있으며 이미지를 크로스 브라우저 방식으로 회전시킬 필요가있다. 나는 CSS3에서 그것을하고 싶지만 모든 브라우저가 내가해야 할 일을 지원하는 것은 아니다.RaphaelJS 로테이션이 작동하지 않습니다.

내 뇌를 고문 한 후, 나는 라파엘 놀이터에 가서 코드를 시험해 보았다. 거기에서도 작동하지 않습니다. 무슨 일 이니?

놀이터 : http://raphaeljs.com/playground.html 이 코드를 실행하면 정사각형의 윤곽이 보입니다. paper.rect (100, 100, 300,300) .animate ({rotation : "- 45"}, 2000);

사용하여 변환 작업 :

paper.rect (100, 100, 300, 300) .animate ({변환 : "R45를"}, 2000);

하지만 불행히도 transform을 사용하면 중심점을 지정할 수 없습니다. 개체를 왼쪽 하단 모서리에서 회전 시키길 원합니다. 이 코드로이 작업을 수행 할 수 있습니다

paper.rect을 (100, 100, 300, 300) .rotate (45,0,300)

하지만 애니메이션, 또는 완화 수락 또는 콜백이 없습니다. 나는이 포함 몇 가지 예에서 "회전"을 본 적이

:

http://www.irunmywebsite.com/raphael/additionalhelp.php#PAGETOP http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

감사, - 키스

+0

이 사진은 아직 작동 중입니다. http://raphaeljs.com/image-rotation.html – topek

답변

3

회전 속성은 2.0 스펙에서 누락 된 것 같습니다. 그것은 1.x에 존재했습니다. 나는 왜 그런지 모르지만 새로운 문서에서 찾을 수가 없다. 나는 이것이 앞으로의 사소한 수정에서 시정 될 감독이라고 생각한다.

한편, 자신 만의 애니메이션 처리기를 만들고 자신의 여유에 따라 각 틱에서 .rotate를 호출 할 수 있습니다.

+0

감사합니다. 뭔가 실종 된 느낌이 들었습니다. 스펙에서 제거 된 효과를 나타냅니다. 나는 이것이 좋은 학습 경험이었던 것처럼 느낀다. 그리고 나는 답장을 위해 모두에게 감사한다. – keith73

11

playground site로 이동하고이 코드를 붙여 :

paper.rect(100, 100, 300,300).animate({transform:"r-45,0,0"}, 2000); 

절대 0,0 위치에서 직사각형을 회전시킨다. raphael js code @github을 보면 transform은 회전을 위해 2 또는 4 개의 매개 변수를 사용할 수 있음을 보여줍니다.

관련 문제