5

私はこのスクリプトを使用しています：

var canvas = new fabric.Canvas('game_canvas', { selection: false });

fabric.Image.fromURL('images/bg.jpg', function(img) {
  img.set('left', 1024/2).set('top', 600/2).set('zindex', 0);
  canvas.add(img);        
});

fabric.Image.fromURL('images/panel-2-bg-l-r.png', function(img) {
  img.set('left', 262/2).set('top', (390/2)+110).set('zindex', 1);
  canvas.add(img);        
});

fabric.Image.fromURL('images/player-board.png', function(img) {
  img.set('left', 254/2).set('top', (122/2)).set('zindex', 2);
  canvas.add(img);        
});

fabric.Image.fromURL('images/player-board-top-red.png', function(img) {
  img.set('left', 203/2).set('top', (109/2)).set('zindex', 3);
  canvas.add(img).bringToFront(img);          
});

3 番目の画像描画は適切に機能しており、上下に表示されています。しかし、4 番目を追加すると、3 番目の後ろに隠れてしまいます。画像の zindex を指定すると、まだ 3 番目以下です。

これの何が問題なのですか？ここで何か間違ったことをしていますか？助けてください。

ありがとう
ピーター

4

2 に答える 2

11

ここにはいくつかの問題があります。

1) zindex プロパティを設定してイメージの zindex を変更することはできません。生地の画像にはそのようなプロパティがなく、それを変更してもキャンバス上の画像の z インデックスは変更されません。.set('zindex', 0)これにより、 、 などすべてが.set('zindex', 1)ほとんどノーオペレーションになります。

2)bringToFrontここでは期待どおりに動作し、最後の画像を描画スタックの一番上に移動します。しかし、問題は、最後にロードしている「images/player-board-top-red.png」画像が最後に追加されたものであるとは限りません。これら 4 つの要求は非同期です。それらは任意の順序で送信されるため、コールバックも任意の順序で実行されます。たとえば、私のテストでは、最後の画像が2番目になり、コールバックが実行され、画像が前面に表示されますが、2つのコールバックに続いて「上書き」されます。

最後の画像を上にレンダリングするにはどうすればよいですか? さて、最後の画像を一番上に表示する前に、すべての画像が読み込まれていることを確認するだけです。

var img4;
// ...
function checkAllLoaded() {
  if (canvas.getObjects().length === 4) {
    canvas.bringToFront(img4);
  }
}
// ...
fabric.Image.fromURL('images/1.png', function(img) {
  img.set('left', 0).set('top', 0);
  canvas.add(img);
  checkAllLoaded(img);
});
// load other images, making sure to include `checkAllLoaded` in callback
fabric.Image.fromURL('images/4.png', function(img) {
  img4 = img.set('left', 0).set('top', 0);
  canvas.add(img);
  checkAllLoaded(img);
});

ちなみに、次のようにオブジェクトをsetメソッドに渡すことができることを忘れないでください。

img.set({ left: ..., top: ... });

また、チェーン可能でインスタンスへの参照を返すため、次のようsetに渡すこともできます。add

canvas.add(img.set({ left: ..., top: ... }));

お役に立てれば。

于 2011-08-07T06:14:01.120 に答える
4

選択したオブジェクトの zIndex を設定するcanvas.insertAt(object,index);代わりに使用できます。canvas.add(object)

また、次を使用して任意のオブジェクトを取得できます。

canvas_object = canvas.item(index);

そのオブジェクトを前面に出したい場合は、次を使用します。

canvas_object.bringForward() 

//or

canvas_object.bringToFront()
于 2013-08-09T10:05:59.923 に答える