0

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 座標などを継続的に減少させたいだけです。

4

2 に答える 2

0

.attr()代わりに Raphael が提供するメソッドを使用してください。

少なくとも と の両方xのy値を設定したい場合があるため、 use は代わりにオブジェクトを渡すことができます。

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

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

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

于 2013-04-22T15:00:38.253 に答える
0

紙を動かすことはできません (すべてを動かさないわけではありません)。したがって、スクロールする背景を作成するには、次のようにする必要があります。

  • 大きな悪い要素 (正方形またはグループ) を作成します。
  • それに背景を入れます。
  • 用紙上の要素を移動します。

後で他のものを追加する可能性があるため、この (ag 要素) のグループを作成することをお勧めします。「g」要素は raphael では定義されていませんが、通常の js+svg で使用するか、必要に応じて raphael を拡張することができます。

注 1: あなたがゲームを作ると言ったので、ラファエルで厄介なメモリ リークが発生したことを伝える必要があると感じています (パスに関する何か... 正確には思い出せません)。たとえば、ラファエルの例の「極時計」には、Firefox でのリークがありました。必ずしも同じ問題が発生するとは限りませんが、開始する前にいくつかのキャンバスを確認することをお勧めします (three js を参照してください: http://threejs.org/ )。主な利点は、web gl を介して作成され、はるかに最適化されていることです。また、ビデオ ボードを使用しても、魔女のラファエルはそうではありません。

注 2: 家に帰ってから 4 ～ 5 時間以内にコードを書きます。あなたがした場合はコメントしてください;）

于 2013-04-22T14:48:08.517 に答える