Fabric js가 가져온 svg에 ID를 할당합니다.

Question

다른 시간대에 다른 작업을로드하므로 순서가 항상 같지 않으므로 내 svg에 ID를 할당하려고합니다. 그래서 처음 두 ID가 어떤 이유로 자동으로 이루어진다

var svgImages = ['textarea-max', 'textarea-min', 'cutout-test'] 

for (var i = 0; i < svgImages.length; i++) { 
    fabric.loadSVGFromURL("/" + svgImages[i] + ".svg", function(objects, options) { 
    objects.svgUid = svgImages[i]; (this was just a test) 
    var obj = fabric.util.groupSVGElements(objects, options); 
    canvas.add(obj); 
    canvas.renderAll(); 
    }); 
}; 

(텍스트 영역과 텍스트 영역 맥스 분이지만 마지막은 1이다). 그들은 같은 방법으로 나에 의해 동시에 창조되었습니다. 그 경우가 이상하게 보입니다. 어떤 아이디어라도 도움이 될 것입니다.

Answer 1

var svgImages = ['textarea-max', 'textarea-min', 'cutout-test'] 

for (var i = 0; i < svgImages.length; i++) { 
    (function(i) { 
    fabric.loadSVGFromURL("/" + svgImages[i] + ".svg", function(objects, options) { 
     var obj = fabric.util.groupSVGElements(objects, options); 
     obj.svgUid = svgImages[i]; 
     canvas.add(obj); 
     canvas.calcOffset(); 
     canvas.renderAll(); 
    }); 
    })(i); 
}; 

loadSVGFromURL 제가 예상대로 설정되지 가치가 익명 함수 걸린다. 그래서 다른 함수를 만들고 그 범위에 i 값을 전달하면 정확히 i 값을 얻을 수 있고 svgUid를 obj로 설정하여 groupSVGElements에서 캔버스에 추가 할 수 있습니다.

ES6

const svgImages = ['textarea-max', 'textarea-min', 'cutout-test']; 

for (let i = 0; i < svgImages.length; i++) { 
    fabric.loadSVGFromURL(`/${svgImages[i]}.svg`, (objects, options) => { 
    const obj = fabric.util.groupSVGElements(objects, options); 
    obj.svgUid = svgImages[i]; 
    canvas.add(obj); 
    canvas.calcOffset(); 
    canvas.renderAll(); 
    }); 
}