FabricJS 层

Question

最初，一个对象 (fabric.Circle) 添加到我的 canvas。

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

现在，如果我使用按钮将另一个对象添加到我的 canvas，之前的对象就会消失。我认为它将新对象添加到上一层之上。

我不想这样。有什么方法可以在不丢失 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>

FabricJS 层

FabricJS layers

javascript

fabricjs