FabricJS层

Question

最初，一个对象(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>

Answer 1

是的，这确实将另一个对象添加到前面的对象之上，因为您在创建对象时没有指定对象的位置。

您需要根据需要为每个单独的对象设置不同的位置(顶部、左边)，这样它们就不会重叠。

ᴅᴇᴍᴏ

​

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>

​