了解Fabric Z-Index

Question

我很难理解画布对象的moveto功能。根据我的z索引计划，我正在尝试加载对象并定位它们。这可能会导致一个对象比另一个对象更早加载，但具有更高的Z-Index比后者更早加载。但这并不像计划的那样工作。Fabric是否只是根据它们在画布上的时间添加将一个添加到另一个上？

这是设置Z轴的代码。

function makeMySvg(urlNames,yvalues,xvalues,zvalues,dasArray,theCanvas)
{
    var targetUrl = urlNames.shift();
    var targetY = yvalues.shift();
    var targetX = xvalues.shift();
    var targetZ = zvalues.shift();
    if (targetUrl){
    fabric.loadSVGFromURL(targetUrl,

    function(objects)
    {

            var obj = new fabric.util.groupSVGElements(objects, {
              //left: versatzx-14, // 1/2 breite 28px hoehe 33px
              //top: versatzy+axpos1/10*factor,
              top: targetY,
              left: targetX,
              opacity: 1,
              scaleX: 1,
              scaleY: 1,
              selectable: true,
              objectCaching: true
            });

            theCanvas.add(obj);
            dasArray.push(obj);
            theCanvas.moveTo(obj, targetZ);
            console.log(targetZ);
            //obj.moveTo(targetZ);
            makeMySvg(urlNames,yvalues,xvalues,zvalues,dasArray,theCanvas);

    });
  }
  theCanvas.renderAll();
}



 var axleUrls =['images/axe180a.svg', 'images/axe180b.svg'];
 var axleY = [versatzy+axpos1/10*factor,versatzy+oldlength*5-axpos2/10*factor-30];
 var axleX = [versatzx-45,versatzx-45];
 var axleZ = [28,29];
 var axle=[];

        makeMySvg(axleUrls, axleY, axleX, axleZ, axle, canvas);

Answer 1

是的，fabricJS将根据它们完成加载的顺序，将一个添加到另一个之上。您可以通过添加数组中的所有对象来修复此问题，而不是执行canvas.add

从一个与要加载url的数组大小相同的数组开始。

var myUrls = ['urlA', 'urlB', 'urlC'];
var placeHolders = [null, null, null];

myUrls.forEach(function(url, index) {
  fabric.loadSVGFromURL(targetUrl, function(objects) {
        var obj = new fabric.util.groupSVGElements(objects, {
          //left: versatzx-14, // 1/2 breite 28px hoehe 33px
          //top: versatzy+axpos1/10*factor,
          top: targetY,
          left: targetX,
          opacity: 1,
          scaleX: 1,
          scaleY: 1,
          selectable: true,
          objectCaching: true
        });
        dasArray.push(obj);
        placeHolders[index] = obj;
  })
});
canvas.add(...placeHolders);