は、順方向順序（Zインデックス）

Question

次のスニペットは、それらの上にドラッグして、両方の正方形を選択赤い四角

1. 上記緑色の正方形を有するが変化します。
2. 四角が注文を切り替えているbring forwardをクリックした後bring forwardボタン

をクリックします。アイテムは同じ順序にとどまらなければならないが、ボタンがさらにクリックされると、他の選択されていないアイテムの上にますます移動することは私の理解である。

選択を解除して実験を繰り返すと、再び切り替わります。

アイデア？

var canvas = new fabric.Canvas('c', 
 
{ 
 
    preserveObjectStacking \t : true 
 
}); 
 

 
var rect = new fabric.Rect({ 
 
    left: 10, top: 10, 
 
    fill: 'red', 
 
    width: 100, height: 100, 
 
    hasControls: true 
 
}); 
 

 
canvas.add(rect); 
 

 
var rect2 = new fabric.Rect({ 
 
    left: 40, top: 40, 
 
    fill: 'green', 
 
    width: 100, height: 100, 
 
    hasControls: true 
 
}); 
 

 
canvas.add(rect2); 
 

 
$("#bringForward").click(function() 
 
{ 
 
\t var items = canvas.getActiveObject() || canvas.getActiveGroup(); 
 

 
\t if(items) 
 
\t \t items.bringForward(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js"></script> 
 
<button id="bringForward">Bring Forward</button> 
 

 
<canvas id="c" width="640" height="480"></canvas>

Answer 1

これは、関数が何を期待して何をすべきかに応じて、バグかと考えることができます。

この機能のドキュメントには、 Moves an object or a selection up in stack of drawn objects となっています。 上のオブジェクトは上には移動できず、下にあるオブジェクトは上に移動できず、移動できません。

まだデベロッパーにとっては、これは奇妙な動作のように見えるかもしれませんが、実際はそうではありません。しかし、推測は個人的です。

あなたのウィジェットは、改良されたスニペットがあり、より良い解決策を試すことができます。

var removeFromArray = fabric.util.removeFromArray; 
 

 
// modified function to avoid snapping 
 
fabric.StaticCanvas.prototype.bringForward = function (object, intersecting) { 
 
     if (!object) { 
 
     return this; 
 
     } 
 
     var activeGroup = this._activeGroup, 
 
      i, obj, idx, newIdx, objs, latestIndex; 
 

 
     if (object === activeGroup) { 
 
     objs = activeGroup._objects; 
 
     latestIndex = this._objects.length; 
 
     for (i = objs.length; i--;) { 
 
      obj = objs[i]; 
 
      idx = this._objects.indexOf(obj); 
 
      if (idx !== this._objects.length - 1 && idx < latestIndex - 1) { 
 
      newIdx = idx + 1; 
 
      latestIndex = newIdx; 
 
      removeFromArray(this._objects, obj); 
 
      this._objects.splice(newIdx, 0, obj); 
 
      } else { 
 
      latestIndex = idx; 
 
      } 
 
     } 
 
     } 
 
     else { 
 
     idx = this._objects.indexOf(object); 
 
     if (idx !== this._objects.length - 1) { 
 
      // if object is not on top of stack (last item in an array) 
 
      newIdx = this._findNewUpperIndex(object, idx, intersecting); 
 
      removeFromArray(this._objects, object); 
 
      this._objects.splice(newIdx, 0, object); 
 
     } 
 
     } 
 
     this.renderAll && this.renderAll(); 
 
     return this; 
 
    }; 
 

 

 
var canvas = new fabric.Canvas('c', 
 
{ 
 
    preserveObjectStacking \t : true 
 
}); 
 

 
var rect = new fabric.Rect({ 
 
    left: 10, top: 10, 
 
    fill: 'red', 
 
    width: 100, height: 100, 
 
    hasControls: true 
 
}); 
 

 
canvas.add(rect); 
 

 
var rect2 = new fabric.Rect({ 
 
    left: 40, top: 40, 
 
    fill: 'green', 
 
    width: 100, height: 100, 
 
    hasControls: true 
 
}); 
 

 
canvas.add(rect2); 
 

 
var rect3 = new fabric.Rect({ 
 
    left: 70, top: 70, 
 
    fill: 'blue', 
 
    width: 100, height: 100, 
 
    hasControls: true 
 
}); 
 

 
canvas.add(rect3); 
 

 
var rect4 = new fabric.Rect({ 
 
    left: 100, top: 100, 
 
    fill: 'orange', 
 
    width: 100, height: 100, 
 
    hasControls: true 
 
}); 
 

 
canvas.add(rect4); 
 

 
$("#bringForward").click(function() 
 
{ 
 
\t var items = canvas.getActiveObject() || canvas.getActiveGroup(); 
 

 
\t if(items) 
 
\t \t items.bringForward(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js"></script> 
 
<button id="bringForward">Bring Forward</button> 
 

 
<canvas id="c" width="640" height="480"></canvas>