Question

我很难理解canvas objet的moveto功能。根据我的z-index计划，我试图加载对象并定位它们。这可能导致对象先于另一个对象加载，但后者加载的Z-Index较高。但这不符合计划。 Fabric是否只是添加一个，根据他们在画布上的时间添加？

以下是设置Z-Index的代码。

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

来解决此问题

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

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

了解Fabric Z-Index

1 个答案: