與拉斐爾js滾動背景

我想使用Raphael.js來製作一個小遊戲，我希望遊戲有一個滾動的背景，以便它似乎無限。我做了拉斐爾對象的背景：與拉斐爾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座標或類似的東西。

來源

2013-04-22 Sam

使用Raphael提供的.attr()方法代替。

使用可以傳入一個對象，因爲您可能需要至少爲此設置x和y值。

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

的jsfiddle：http://jsfiddle.net/terryyounghk/EmGeE/

參考：http://raphaeljs.com/reference.html#Element.attr

來源

2013-04-22 15:00:38

你不能移動紙張（不是不移動所有東西）。所以要製作滾動背景，你必須這樣做：

製造一個很大的壞元素（一個正方形或一組）。
把它的背景。
移動紙張上的元素。

我建議你爲這個（一個g元素）創建一個組，因爲你以後可能會添加其他的東西。「g」元素沒有在raphael中定義，但是您可以在普通的js + svg中使用它，或者如果您覺得這樣做的願望可以擴展raphael。注意1：既然你說你做了一個遊戲，我覺得有必要告訴你，我經歷了一些令人討厭的內存泄漏與拉斐爾（關於路徑的東西......記不清楚）。例如raphael例子中的「polar clock」在firefox上有泄漏。我不一定說你會遇到同樣的問題，但我建議有人在開始之前先看看一些畫布的事情（看看三個js：http://threejs.org/）。主要的優點是，這是通過網絡gl和更加優化，並使用視頻板，女巫raphael沒有。注意2：如果到那時你還沒有弄清楚，我會在4-5個小時內把一些代碼放到家裏。如果您確實請求過評論;）

來源

2013-04-22 14:48:08 zozo

與拉斐爾js滾動背景

回答

相關問題