Question

我正在尝试使用Raphael.js制作一个小游戏，我希望游戏具有滚动背景，以便它看起来无限。我用Raphael对象制作了背景：

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

你不能移动纸张（不是没有移动所有东西）。因此，要制作滚动背景，您必须执行此操作：

制作一个很重要的元素（正方形或组合）。
把背景放到它上面。
将元素移到纸上。

我建议您为此创建一个组（一个g元素），因为您可能稍后添加其他内容。 “g”元素未在raphael中定义，但您可以将其与普通的js + svg一起使用，或者如果您有这样做的冲动，可以延长raphael。

注1：既然你说你做了一个游戏，我觉得有必要告诉你我经历了一些令人烦恼的raphael内存泄漏（关于路径的事情......记不清楚）。例如，raphael示例中的“极地时钟”在firefox上有泄漏。我并不一定说你会遇到同样的问题，但我建议你在开始之前先看看一些画布的东西（看看三个js：http://threejs.org/）。主要优点是通过网络gl进行，并且更加优化，并且使用视频板，巫婆raphael也没有。

注意2：当我回到家时，如果你没有弄明白的话，我会在4-5小时内放一些代码。如果你做的话请评论;）

Answer 2

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

使用可以传入对象，因为您可能希望为此设置至少x和y值。

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

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

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

用raphael js滚动背景

2 个答案: