FabricJS Schichten

Question

Zunächst wird ein Objekt (fabric.Circle) zu meiner Leinwand hinzugefügt.

Jetzt, wenn ich eine Schaltfläche verwenden, um ein anderes Objekt zu meiner Leinwand hinzuzufügen, verschwindet die vorherige. Ich schätze, es fügt das neue Objekt über der vorherigen Ebene hinzu.

Ich will das nicht. Gibt es eine Möglichkeit, weitere Objekte zur aktuellen Ebene hinzuzufügen, ohne die Funktionalitäten von FabricJS zu verlieren?

Edit: Die Taste und die entsprechende Funktion ist wie folgt:

<button onclick="addArrowToCanvas()">Add Circle</button> 
<script> 
       function addArrowToCanvas(){ 
        var canvas = new fabric.Canvas('myCanvas'); 
        var circle = new fabric.Circle ({ 
         radius: 100, 
         fill: 'white', 
         stroke: 'black', 
         originX: 'center', 
         originY: 'center' 
        }); 
        canvas.add(circle); 
       } 
      </script> 

Answer 1

Ja, das in die Tat auf dem vorherigen auf das andere Objekt fügt hinzu, da Sie nicht in die Position für das Objekt angegeben haben, wenn es schaffen.

Sie müssen verschiedene Positionen (oben, links) für jedes einzelne Objekt nach Ihren Bedürfnissen einstellen, so dass sie sich nicht überlappen.

ᴅᴇᴍᴏ

var canvas = new fabric.Canvas('myCanvas'); 
 
var circle = new fabric.Circle({ 
 
    top: 50, //<-- set this 
 
    left: 50, //<-- set this 
 
    radius: 30, 
 
    fill: 'white', 
 
    stroke: 'black', 
 
    originX: 'center', 
 
    originY: 'center' 
 
}); 
 
canvas.add(circle); 
 

 
function addRect() { 
 
    var rect = new fabric.Rect({ 
 
     top: 120, //<-- set this 
 
     left: 120, //<-- set this 
 
     width: 60, 
 
     height: 60, 
 
     fill: 'white', 
 
     stroke: 'black', 
 
     originX: 'center', 
 
     originY: 'center' 
 
    }) 
 
    canvas.add(rect); 
 
}

body{margin:10px 0 0 0;overflow:hidden}canvas {border: 1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script> 
 
<canvas id="myCanvas" width="180" height="180"></canvas> 
 
<button onclick="addRect()">Add Rectangle</button>