公式のAPIを介してFabric.jsキャンバスにオブジェクトをレイヤーする方法はありますか?今私が見つけた唯一の方法は、canvas._objectsを手動で繰り返し、特定の順序で描画されるように並べ替えることです。オブジェクトを(潜在的に)破壊しない、これを行うためのより良い方法はありますか?Fabric.jsにキャンバスオブジェクトを重ねる
18
A
答えて
36
[編集] 私は以下の情報を修正しました(私の悪い、元々はKineticJs APIを考えていました)。
FabricJSオブジェクトのz屈折率を変更するこれらのAPIのメソッドがあります。カバーの下
canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
canvas.bringForward(myObject)
canvas.bringToFront(myObject)
、FabricJsは(getObjectsからオブジェクトを除去することにより、z屈折率が変化する)配列およびスプライシングその後ろに希望の位置。それは交差するオブジェクトをチェックする素晴らしい最適化を持っています。
bringForward: function (object) {
var objects = this.getObjects(),
idx = objects.indexOf(object),
nextIntersectingIdx = idx;
// if object is not on top of stack (last item in an array)
if (idx !== objects.length-1) {
// traverse up the stack looking for the nearest intersecting object
for (var i = idx + 1, l = this._objects.length; i < l; ++i) {
var isIntersecting = object.intersectsWithObject(objects[i]) ||
object.isContainedWithinObject(this._objects[i]) ||
this._objects[i].isContainedWithinObject(object);
if (isIntersecting) {
nextIntersectingIdx = i;
break;
}
}
removeFromArray(objects, object);
objects.splice(nextIntersectingIdx, 0, object);
}
this.renderAll();
},
0
ステップ1:あなたは特定を設定したい場合は、その後、sendtoback
以下
1
ようsendtofront .... fabricjsのオプションを使用します。あなたはpreserveObjectStacking: true
ステップ2を使用することができます1つのオブジェクトを前後に動かすのではなく、すべてのオブジェクトの順序付けを行うために、前面/背面への呼び出し/送信の反復呼び出しが遅くなります。
あなたはこのユースケースをスピードアップするためのインスピレーションとしてbringToFront
のコードを使用することができます
そして、次の操作を行います。
比較は次のように、ソートを定義するfabric.Canvas.prototype.orderObjects = function(compare) {
this._objects.sort(compare);
this.renderAll();
}
:
function compare(x,y) {
return x.getWidth() * x.getHeight() < y.getWidth() * y.getHeight();
}
some_canvas.orderObjects(compare)
小さなオブジェクトを前面に持ってきたい場合。
関連する問題
- 1. スプライトをスプライトシートに重ねる
- 2. 2つのキャンバスを重ねて重ねる+クリックイベント
- 3. DIVをFRAMESETに重ねる方法は?
- 4. iframe上にキャンバスを重ねる - HTML
- 5. アクティビティにマウスポインタを重ねる方法は?
- 6. WPFでTextBlockコントロールを積み重ねる
- 7. プリズム:リージョンのコントロールを積み重ねる?
- 8. Java Netbeans:パネルを重ねる方法は?
- 9. イメージを別のイメージと重ねる
- 10. ZedGraph積み重ねバーが
- 11. フロック積み重ね棒
- 12. .ajaxCompleteは積み重ね続ける
- 13. は跳ねるボールと重力は、Java
- 14. divに画像を縦に積み重ねるには
- 15. GWTレイアウトを重ねて表示
- 16. GroupLayoutでコンポーネントを重ねて表示
- 17. CSS内のdivを積み重ね
- 18. のImageMagick:重心とコンバート-compositeと重ねる画像
- 19. Magento/PHPで画像を別の画像に重ねるには?
- 20. divをテーブルセルの上に絶対に積み重ねる方法
- 21. jQuery UIを使用してdivをピラミッドに積み重ねる
- 22. Tkinterを使ってラベル画像にボックスを重ねる
- 23. Air:NativeWindowをOSXメニューバーに重ねる方法は?
- 24. 画像を1つの画像に重ねる
- 25. R:散布図の「ドット」に円グラフを重ねる方法R
- 26. SVG世界地図上にツールチップスタイルのデータを重ねる
- 27. yuv画像を別の画像に重ねる
- 28. ワードドキュメントに2つのテーブルを直接重ねて追加する
- 29. R州地図を州図に重ねる
- 30. iPhone:透明なOpenGLビューをUIViewの上に重ねる?
ありがとうございました!これは私に多くの問題を救う。 – Zwade
fabricjsは組み込みのオブジェクトスタックインデックスシステムを持っています...次に、 'var idx = some_object.get_zIndex()'のような何かをすることができます – dsdsdsdsd
Zインデックスを取得できます:canvas.getObjects()。indexOf(some_object) 。スタック順序を変更するコマンドは、some_object.sendBackwards()、some_object.sendToBack()、some_object.bringForward()、およびsome_object.bringToFront()の4つです。 – markE