發送多個對象向前改變它們的順序（z-index的）

下面的代碼片段上面都有紅色正方形發送多個對象向前改變它們的順序（z-index的）

綠色廣場拖動在他們選擇這兩個正方形。
點擊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>

來源

2017-02-17 Lee Taylor

你將不得不解決它自己（即個別的有選擇的，哪些不是，然後將它們保持選定的曲目順序）。 –

我很高興嘲笑某些事情，如果你願意......你需要從這裏開始，'canvas.on（'object：selected'，onObjectSelected）;'，通過創建一個選定的事件，讓你知道選擇的對象......然後提出，'canvas.bringForward（canvasSelectedItem，true）;'向後發送......等 –

@TimHarker這更多的是對開發人員的錯誤說明。我還在他們的git頁面上發佈了這個問題，並附有這個問題的鏈接。很高興你嘗試回答這個問題！ –

這可以被認爲是一個錯誤與否，取決於你有什麼期望的函數來完成。

該功能的文檔說： 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>

來源

2017-02-19 23:23:55 AndreaBogazzi

發送多個對象向前改變它們的順序（z-index的）

回答

相關問題