스크롤하는 배경과 함께 lraphael js

Question

작은 게임을 만들기 위해 Raphael.js를 사용하려고합니다. 그리고 게임이 무한하게 보이도록 스크롤하는 배경을 갖고 싶습니다. 나는 라파엘 개체와 배경 만든 :

var paper = new Raphael($('#canvas'), 0, 0); 
var c = paper.image("sky.jpg", 0, 0, 1000, 1000); 
paper.setSize(1000,1000); 

을하지만 실제로 이미지를 그리기 다시 심지어 X 좌표입니다하여 이미지를 이동하거나 수없는 것. 나는 시도했다 :

paper._left = -2000; 
c.attrs.x = -2000; 
paper.image("sky.jpg", -2000, 0, 1000, 1000); 
var d = document.getElementById('canvas'); 
d.left = -2000; 

나는 움직일 수 없다. 이 문장을 어떤 종류의 루프에 넣고 싶기 때문에 X 좌표 등을 계속해서 감소시킵니다.

Answer 1

대신 Raphael에서 제공 한 .attr() 메서드를 사용하십시오.

대신에 x과 y 값을 설정하려는 경우 사용할 수 있습니다.

c.attr({ 
    x: -2000 
}); 

jsFiddle : http://jsfiddle.net/terryyounghk/EmGeE/

참조 : http://raphaeljs.com/reference.html#Element.attr

Answer 2

모든 것을 움직이지 않고 용지를 이동할 수 없습니다. 스크롤 배경을 만들려면 다음을 수행해야합니다.

• 큰 요소 (정사각형 또는 그룹)를 만듭니다.
• 배경을 넣으십시오.
• 요소를 용지 위로 이동하십시오.

나중에 다른 항목을 추가 할 수 있으므로이 (a 요소) 그룹을 만드는 것이 좋습니다. "g"엘레멘트는 라파엘에 정의되어 있지 않지만, 보통의 js + svg와 함께 사용할 수 있습니다. 그렇게 할 생각이라면 라파엘을 확장 할 수 있습니다.

Note 1 : 게임을 만들었다 고 말한 이후로 나는 라파엘과 함께 성가신 기억 누출을 경험했다는 것을 느낄 수 있었다. 예를 들어, 라파엘 예제의 "극좌표 시계"는 파이어 폭스에 누수가있었습니다. 나는 당신이 똑같은 문제를 겪을 것이라고 말할 필요는 없지만, 당신이 그것을 시작하기 전에 몇몇 캔버스 것들을 살펴볼 것을 제안한다. (3 개의 js : http://threejs.org/을 보라). 가장 큰 장점은 웹 gl을 통해 이루어지며 훨씬 최적화되어 있으며 비디오 보드를 사용하면 마녀 라파엘 (mraphrapha)이 아니라는 것입니다.

참고 2 : 집으로 돌아 가면 4 ~ 5 시간 안에 코드를 입력하십시오.