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 - 发送对象返回

回答

相关问题