Fabric JS - 發送對象返回

當您選擇一個對象（在我的示例中是一個多邊形）時，它會自動移動到Front。我正在尋找一種方法來防止Z軸上的移動或在選擇後向後移動，也許有人可以幫忙？Fabric JS - 發送對象返回

下面是一個簡單的例子鏈接：http://jsfiddle.net/98cuf9b7/1/

當你選擇一個多邊形，它就會被移到前面。我試圖在選擇後向後發送它，但即使調用了「canvas.sendToBack（object）」函數，它仍然保留在Front中。

的代碼在我的例子是：

var canvas = new fabric.Canvas('c'); 

var pol = new fabric.Polygon([ 
    {x: 200, y: 0}, 
    {x: 250, y: 50}, 
    {x: 250, y: 100}, 
    {x: 150, y: 100}, 
    {x: 150, y: 50} ], { 
    left: 250, 
    top: 150, 
    angle: 0, 
    fill: 'green' 
    } 
); 

var pol2 = new fabric.Polygon([ 
    {x: 200, y: 50}, 
    {x: 200, y: 100}, 
    {x: 100, y: 100}, 
    {x: 100, y: 50} ], { 
    left: 300, 
    top: 200, 
    angle: 0, 
    fill: 'blue' 
    } 
); 
canvas.add(pol, pol2); 

canvas.on('object:selected', function(event) { 
     var object = event.target; 
     canvas.sendToBack(object); 
     //object.sendToBack(); 
     console.log("OK"); 
    });

來源

2016-11-15 Sophie D

這是不是一個錯誤。請參閱http://stackoverflow.com/questions/38247337/fabricjs-1-6-3-why-active-object-is-always-shown-on-top/38293440#38293440。 – Ben

好了，所以這是由於您使用的面料版本發生。在小提琴中，因爲我可以看到你已經使用version 0.9 .所以它似乎是默認的行爲，每當一個對象被選中時，它的z-index被改變，使它在頂部/前部。嘗試使用更高版本。在其他版本中，如果對象位於後面，即使您選擇它，它也不會存在。這是一個演示，後面有version(1.4.0)。在這裏，每當您選擇對象時，它都會向後移動。如果你註釋掉向後發送的代碼，它將保持在前面，如果在後面，則在後面。

var canvas = new fabric.Canvas('c'); 
 

 
var pol = new fabric.Polygon([ 
 
    {x: 200, y: 0}, 
 
    {x: 250, y: 50}, 
 
    {x: 250, y: 100}, 
 
    {x: 150, y: 100}, 
 
    {x: 150, y: 50} ], { 
 
    left: 250, 
 
    top: 150, 
 
    angle: 0, 
 
    fill: 'green' 
 
    } 
 
); 
 

 
var pol2 = new fabric.Polygon([ 
 
    {x: 200, y: 50}, 
 
    {x: 200, y: 100}, 
 
    {x: 100, y: 100}, 
 
    {x: 100, y: 50} ], { 
 
    left: 300, 
 
    top: 200, 
 
    angle: 0, 
 
    fill: 'blue' 
 
    } 
 
); 
 
canvas.add(pol, pol2); 
 

 
canvas.on('object:selected', function(event) { 
 
     var object = event.target; 
 
     canvas.sendToBack(object); 
 
     //object.sendToBack(); 
 
     console.log("Selected"); 
 
    });

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script> 
 
<canvas id="c" width="500" height="500"></canvas>

來源

2016-11-15 09:39:08 Manish

感謝您的回覆:) 在我自己的項目中，我使用的是新版本，我創建了一個新版本的小提琴，它不再工作：http://jsfiddle.net/z7koh0h4/1/ 我認爲這是一個錯誤，所以我會報告這一點。 :)謝謝 –

第1步：您可以使用preserveObjectStacking: true

第2步：然後用sendtoback，sendtofront .... fabricjs選項像下面

Working Example with back and front working

<html> 
    <body> 
    <button onclick="sendSelectedObjectBack()"> Send Back </button> 
    <canvas id="c" width="600" height="600"></canvas> 

    <script> 
     var canvas = new fabric.Canvas('c', { 
     preserveObjectStacking: true 
     }); 

     var pol = new fabric.Polygon([{ 
     x: 200, 
     y: 0 
     }, { 
     x: 250, 
     y: 50 
     }, { 
     x: 250, 
     y: 100 
     }, { 
     x: 150, 
     y: 100 
     }, { 
     x: 150, 
     y: 50 
     }], { 
     left: 250, 
     top: 150, 
     angle: 0, 
     fill: 'green' 
     }); 

     var pol2 = new fabric.Polygon([{ 
     x: 200, 
     y: 50 
     }, { 
     x: 200, 
     y: 100 
     }, { 
     x: 100, 
     y: 100 
     }, { 
     x: 100, 
     y: 50 
     }], { 
     left: 300, 
     top: 200, 
     angle: 0, 
     fill: 'blue' 
     }); 
     canvas.add(pol, pol2); 

     var objectToSendBack; 
     canvas.on('object:selected', function(event) { 
     objectToSendBack = event.target; 
     }); 

     var sendSelectedObjectBack = function() { 
     canvas.sendToBack(objectToSendBack); 
     } 

    </script> 
    </body> 
</html>

來源

2017-01-26 17:41:24 vijay

第一點救了我的時間..謝謝你@vijay – lalithkumar

Fabric JS - 發送對象返回

回答

相關問題