Изображения в цикле с FabricJS

Question

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

    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 заканчивается.

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

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 внутри замыкания, скажите мне, работает ли он.

ура