У меня есть набор изображений svg и некоторые атрибуты, которые я хотел бы загрузить на холст HTML. Цель состоит в том, чтобы загрузить изображения заданного размера и с заданными координатами x, y. Вот мой пример объекта:
var ObjectInstances = {
objects:[
{
"ID": "1234",
"Name": "Backhoe",
"x": "0",
"y": "0",
"height": "150",
"width": "350",
"svg": "images/svgs/backhoe.svg"
},
{
"ID": "5678",
"Name": "Crane",
"x": "350",
"y": "150",
"height": "200",
"width": "200",
"svg": "images/svgs/crane1.svg"
}
]
};
В идеале я бы перебирал объекты и использовал эти пары ключ:значение для рендеринга каждого изображения на холсте, но я постоянно сталкиваюсь с случаями, когда объекты появляются в разных размерах или в разных местах после перезагрузки. Из своего исследования я знаю, что мне нужно предварительно загрузить все изображения, чтобы нарисовать их на холсте. Я создал параллельные массивы, чтобы справиться с этим. Один массив для хранения предварительно загруженных изображений, другой массив для хранения координат и размеров каждого изображения. Затем я попытался нарисовать изображения, используя эти два массива. Вот мой код:
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
// Preload images into a source array
var sources = {};
$.each(ObjectInstances.objects, function(index, value) {
sources[index]=this.svg;
})
loadImages(sources, function(images) {
$.each(ObjectInstances.objects, function (index, value) {
var x=$(this)[0].x,
y=$(this)[0].y,
w=$(this)[0].width,
h=$(this)[0].height;
attach(images[index], x, y, w, h);
});
});
// Load Object Instances
function attach(img, x, y, w, h) {
context.drawImage(img, x, y, w, h);
}
Может ли кто-нибудь подсказать мне, как лучше всего это сделать?
