Fabric JS - Objekte zurücksenden

Wenn Sie ein Objekt auswählen (in meinem Beispiel ein Polygon), wird es automatisch nach vorne verschoben. Ich suche nach einer Möglichkeit, die Bewegung auf der Z-Achse zu verhindern oder nach der Auswahl rückwärts zu schicken, vielleicht kann jemand helfen? HierFabric JS - Objekte zurücksenden

ist ein Link zu einem einfachen Beispiel: http://jsfiddle.net/98cuf9b7/1/

Wenn Sie wählen Sie eine der Polygone, nach vorne bewegt wird. Ich habe versucht, es nach der Auswahl zurückzuschicken, aber selbst wenn die Funktion "canvas.sendToBack (object)" aufgerufen wird, bleibt sie immer noch im Vordergrund.

Der Code in meinem Beispiel ist:

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"); 
    });

Quelle

2016-11-15 Sophie D

Das ist kein Fehler. Siehe http://stackoverflow.com/questions/38247337/fabricjs-1-6-3-why-active-object-isalways-shown-on-top/38293440#38293440. – Ben

Ok so, weil der Stoff-Version geschieht Sie verwenden. In Geige, wie ich sehen kann, haben Sie version 0.9 . So scheint es das Standardverhalten sein, dass, wenn ein Objekt ausgewählt ist sein Z-Index geändert wird, so dass es auf der Oberseite/vorne ist. Versuchen Sie es mit einer späteren Version. In anderen Versionen ist dieses Problem nicht vorhanden, wenn ein Objekt auf der Rückseite ist, bleibt es auf der Rückseite, selbst wenn Sie es auswählen. Hier ist eine Demo mit einer späteren version(1.4.0). Hier, wenn Sie das Objekt auswählen, wird es nach hinten verschoben. Und wenn Sie den rückwärts sendenden Code auskommentieren, bleibt er vorne und hinten auf der Rückseite.

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>

Quelle

2016-11-15 09:39:08 Manish

danke für deine Antwort :) In meinem eigenen Projekt verwende ich die neue Version, ich habe eine Geige mit der neuen Version erstellt und es funktioniert nicht wieder: http://jsfiddle.net/z7koh0h4/1/ I Ich denke, es ist ein Fehler, also werde ich das melden. :) danke –

Schritt 1: Sie können 2 preserveObjectStacking: true

Schritt verwenden: dann SendToBack verwenden, sendtofront .... fabricjs Optionen wie unten

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>

Quelle

2017-01-26 17:41:24 vijay

Erster Punkt gespeichert meine Zeit..Danke @vijay – lalithkumar

Fabric JS - Objekte zurücksenden

Antwort

Verwandte Themen