2

キャンバス内の要素の zindex を変更するにはどうすればよいですか?

コード例:

fabric.Image.fromURL('http://nocookie.net/bw.jpg', function(image) {
    image.set('left', 200).set('top', 250);
    canvas.add(image);
});


var helloWorld = new fabric.Text('Hello world!', { 
  left: 0, 
  top: 0,
  fontfamily: 'delicious_500',
  zindex: 10
});

canvas.add(helloWorld);

fabric.js ライブラリの使用。

今後の参考のために：

fabric.Element.html#bringForward

4

2 に答える 2

1

まったく機能しませんが、何が起こっているかについての私の推測は次のとおりです。

  1. Fabric はその URL に画像を要求します。Fabric には画像が返されたときにコールバック メソッドが与えられているため、待機している間に次のタスクに進みます。
  2. Fabric は Text オブジェクトを作成し、キャンバスに追加します。
  3. 最後に、画像が読み込まれたことを認識し (あなたが提供した特定の例は実際に私に 404 されました)、それをコールバック メソッドに渡します。

画像はテキストの後にキャンバスに追加されるため、 Fabric はキャンバスが通常どおりに動作していると想定しています。後で追加されたものは、既に存在するものの上に描画されます。...テキストに z-index を与えたとしても。

覚えておいてください、私はそれを機能させることができず、ただあきらめました。ですから、私が完全に、完全に間違っている可能性は十分にあります。もしそうなら、私は別の理論を持っています：

zindexそれが正しいプロパティであると確信していますか? もしそうなら、画像にも設定してみてください：

image.set('left', 200).set('top', 250).set('zindex', 5);

よくわからない場合は、... どうぞ。

于 2011-02-17T06:17:00.810 に答える
1

fabric.js バージョン 1.1.4 以降、zIndex 操作の新しいメソッドが利用可能になりました。

canvas.moveTo(object, index);
object.moveTo(index);

これがあなたが望むものであることを願っています:

http://jsfiddle.net/Kienz/RRv3g/

于 2013-11-26T03:23:31.070 に答える