javascript - FabricJS图层

最初，对象（fabric.Circle）被添加到我的画布中。

var canvas = new fabric.Canvas('myCanvas');
var circle = new fabric.Circle ({
    radius: 100,
    fill: 'white',
    stroke: 'black',
    originX: 'center',
    originY: 'center'
});
canvas.add(circle);

现在，如果我使用按钮将另一个对象添加到画布中，则前一个对象将消失。我认为它会将新对象添加到上一层的顶部。

我不要有什么办法可以在不丢失FabricJS功能的情况下继续向当前层添加对象？

编辑：该按钮及其相应的功能如下：

<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>

最佳答案

是的，确实在前一个对象的顶部添加了另一个对象，因为在创建对象时未指定该对象的位置。

您需要根据需要为每个单独的对象设置不同的位置（顶部，左侧），以使它们彼此不重叠。

ᴅᴇᴍᴏ

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>

关于javascript - FabricJS图层，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44119248/