Изображения в петле с FabricJS

Question

Я использую fabricjs, и у меня есть список изображений JSON. каждый элемент представляет изображение с информацией, такой как левый, верхний и т. д. для каждого изображения. в моем яваскрипта коде у меня есть следующие

for (var j = 0; j < ChrImages.d.length; j++) { 

    var obj = ChrImages.d[j]; 

    fabric.util.loadImage(obj.URL, function (img) { 
     var customImage = new fabric.CustomImage(img, { name: obj.Name, rot: obj.Rotation, rawURL: obj.RawURL, belongsto: obj.BelongsTo,left:obj.PosX,top:obj.PosY,angle:obj.Rotation }); 
     //customImage.set({ 
     // left: obj.PosX, 
     // top: obj.PosY, 
     // angle: obj.Rotation, 
     // lockScalingX: true, 
     // lockScalingY: true, 
     // perPixelTargetFind: true, 
     //}); 
    // customImage.filters.push(new fabric.Image.filters.RemoveWhite()); 
     canvas.add(customImage); 
     groupWorkingChromosomeImages.add(customImage); 
    }); 

    } 

вопрос я имею, что все изображения уложены друг на друга. кажется, что все изображения получают одинаковые левые и верхние.

У меня есть проверка, чтобы убедиться, что список JSON является точным. Кроме того, мне нужно использовать пользовательский класс, поскольку мои изображения имеют дополнительные атрибуты.

Может кто-нибудь, пожалуйста, дайте мне знать, почему добавление изображений в плотную петлю не удается?

Answer 1

Ваша переменная obj не находится в том же объеме функции loadImage, что дает вам неожиданные результаты, потому что вы не можете контролировать, когда срабатывает loadImage. Вероятно, он очень сильно срабатывает после вашего для финишной петли.

использовать этот код и скажите мне, если это помогло:

for (var j = 0; j < ChrImages.d.length; j++) { 
    var currentObj = ChrImages.d[j]; 

    //closure, create a scope for specific variables 
    (function (obj) { 
     fabric.util.loadImage(obj.URL, function (img) { 
      var customImage = new fabric.CustomImage(img, { 
       name: obj.Name, 
       rot: obj.Rotation, 
       rawURL: obj.RawURL, 
       belongsto: obj.BelongsTo, 
       left: obj.PosX, 
       top: obj.PosY, 
       angle: obj.Rotation 
      }); 
      canvas.add(customImage); 
      groupWorkingChromosomeImages.add(customImage); 
     }); 

    })(currentObj); 

} 

я обернут вашей функции LoadImage поэтому он будет использовать правильный OBJ экземпляра внутри закрытия, скажите мне, если это работает.

ура