0

我正在尝试使用 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 坐标或类似的东西。

4

2 回答 2

0

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

  • 制作一个大坏元素（一个正方形或一组）。
  • 把背景放在它上面。
  • 移动纸上的元素。

我建议您为此（ag 元素）创建一个组，因为您以后可能会添加其他内容。"g" 元素在 raphael 中没有定义，但是你可以将它与普通的 js+svg 一起使用，或者如果你有这样做的冲动，你可以扩展 raphael。

注 1：既然你说你制作了一款游戏，我觉得有必要告诉你，我在 raphael 中遇到了一些烦人的内存泄漏（关于路径的一些东西......记不清了）。例如，raphael 示例中的“极坐标时钟”在 Firefox 上存在漏洞。我不一定说你会遇到同样的问题，但我建议一些人在开始之前先看看一些画布的东西（看看三个 js：http ://threejs.org/ ）。主要优点是基于 web gl 并且更加优化，并且使用视频板，witch raphael 没有。

注意 2：如果你当时还没弄明白，我会在 4-5 小时内输入一些代码。如果你做了请评论;）

于 2013-04-22T14:48:08.517 回答
0

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

Use 可以传入一个对象，因为您可能希望至少同时设置x和y值。

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

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

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

于 2013-04-22T15:00:38.253 回答