Question

请各位帮忙解决这个问题。我将图像存储在一个数组中，同时使用Fabric Js在画布上检索这些图像，我正面临一个问题。图像正在加载，但是它们的位置不准确，它们相互叠加，最后一张图像在其上进行了更改。所有图像都来自那个位置，而不是他们自己的位置。

每个图像都有自己的位置，这些位置存储在数组中。但它不起作用。我正在使用 for循环在画布上检索它们。

 var frontobj = new Image();
    for(var i=0;i<len;i++)
    {
      var x = frontarray[i].id;
      frontobj.src = DesignName[x];

      fabric.Image.fromURL(frontobj.src, function(frontobj)
        {
        frontobj.set('id',frontarray[i-1].id).set('num',frontarray[i-1].num).setTop(frontarray[i-1].top).setLeft(frontarray[i-1].left).
setAngle(frontarray[i-1].angle).set('flipX', frontarray[i-1].flipx).set('flipY', frontarray[i-1].flipy)
                                  .setScaleX(frontarray[i-1].scalex).setScaleY(frontarray[i-1].scaley);

               canvas.add(frontobj);
               canvas.renderAll();  
        });                 
     }

我使用了i-1，因为i内fabric.Image.fromURL的值第一次获得了1。我发出警报并确定如果我有两张图片，那么它会显示两张图片，但会显示第二张图片的位置，不知道原因。

Answer 1

This link帮助我解决了我的问题。

我的错误是我没有正确使用对象细节。通过这个链接，我只是将对象中的细节绑定并使用它们。每次i的值增加后执行循环，然后从我的数组的该位置获取对象并使用其详细信息。让我告诉你我的工作代码。我希望它会帮助别人。

for (var i=0; i<frontarray.length;i++)
    {
                          var objRef = frontarray[i];


                              var url = objRef.url;
                              fabric.Image.fromURL(url, function(img) {
                                canvas.add(img).renderAll();
                              }, {
                                id: objRef.id,
                                num: objRef.num,
                                left: objRef.left,
                                top: objRef.top,
                                angle: objRef.angle,
                                scaleX: objRef.scalex,
                                scaleY: objRef.scaley,
                                flipX: objRef.flipx,
                                flipY: objRef.flipy,

                              }); 

    }

在Fabric Js中为for循环加载多个图像而不是它们的位置

1 个答案: