Javascript 使用FabricJS循环中的图像
我正在使用fabricjs,我有一个JSON图像列表。每个元素代表一个图像,每个图像都有左、顶等信息。在我的javascript代码中,我有以下内容Javascript 使用FabricJS循环中的图像,javascript,fabricjs,Javascript,Fabricjs,我正在使用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.
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);
});
}
for(var j=0;j
我遇到的问题是,所有的图像都是堆叠在一起的。似乎所有的图像都得到相同的左上角
我必须检查以确保JSON列表是准确的。此外,我需要使用自定义类,因为我的图像具有其他属性
有人能告诉我为什么在紧循环中添加图像会失败吗?您的变量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);
}
for(var j=0;j
我包装了loadImage函数,以便它在闭包中使用正确的obj实例,请告诉我它是否有效
干杯