Canvas, wstawienie kilku różnych jpg Opcje

[MONII28]

Witam

Mam problem z wstawieniem różnych obrazów na płótno canvas
Ładuję mi się tylko ten ostatni, sprawdzałam zmienne są prawidłowo przekazywane. Problem jest z wyp.onload tak jakby się wykonywał kod tylko dla ostatniego.

[HTML] pobierz, plaintext 
wyp.onload = function() {				
	c.drawImage(wyp, s, d, xp, yp); 
};
[HTML] pobierz, plaintext 

Próbowałam również:

[HTML] pobierz, plaintext 
var img = document.createElement("img");
img.src = wyp; // w wyp jest adres obrazka
img.addEventListener("load", function() {
	setInterval(function() {
		c.drawImage(img, s, d, xp, yp);	
		}, 200);
	});	
[HTML] pobierz, plaintext 

Kod wykonuję się w pętli

Jeśli ktoś już miał styczność z takim problemem bardzo proszę o pomoc.

[trueblue]

Skoro w wyp jest adres obrazka (+ jest już listener na load), to dlaczego do wyp.onload jest przypisana funkcja?

[MONII28]

W pierwszym przykładzie w wyp jest już obiekt new Image();

[trueblue]

Wrzuć jakiś większy fragment tu: https://jsfiddle.net/

[MONII28]

view-source:http://www.stronnet.pl/kalkulator-szafy/projekt_drzwi.js

Po przeciągnięciu zdjęcia płyty na obszar drzwi ładuje się poprawnie, po przeciągnięciu na następne ładuje się ostatnie.

Tworzenie projektu drzwi miałam w PHP ale ze względów na nową funkcjonalność (skalowanie i przesuwanie) zmieniam na JavaScript. W PHP trudno by mi było to wykonać. Wcześniej przy pomocy AJAXa miałam ładowany projekt.

Jeśli możesz mi pomóc będę wdzięczna

Pozdrawiam MONII28

[trueblue]

[HTML] pobierz, plaintext 
img.addEventListener("load", function() {
 var _this=this;
 setTimeout(function() {
  c.drawImage(_this, s, d, xp, yp);	
 }, 200);
});
[HTML] pobierz, plaintext 

Odwołanie do załadowanego obrazka i setTimeout, nie setInterval.

lub

[HTML] pobierz, plaintext 
img.addEventListener("load", function() {
 setTimeout( function() {
  c.drawImage(this, s, d, xp, yp);
}.bind(this),1000);
});
[HTML] pobierz, plaintext 

Ten post edytował trueblue 18.08.2017, 14:56:47

[MONII28]

Zmieniłam ale dalej tak samo ładuje się tylko ostatni

[trueblue]

Wrzuć jakiś spreparowany przykład na serwis, do którego podałem link wyżej.

[MONII28]

https://jsfiddle.net/rke2wxee/1/

Jak damy pętle na jeden element to wczyta poprawnie, jak damy na dwa to wczyta ostatni.
W dole widać obrazki jakie mają być wczytane

Ten post edytował MONII28 18.08.2017, 15:41:12

[trueblue]

Zanim się załadują obrazki, to s przyjmuje wartość 1*150.

[HTML] pobierz, plaintext 
var img = document.createElement("img");
img.src = wyp;
img.s=s;
img.addEventListener("load", function(s) {
 setTimeout(function(s) {
  c.drawImage(this, this.s, d, xp, yp);	
 }.bind(this), 200);
});	
[HTML] pobierz, plaintext 

Ten post edytował trueblue 18.08.2017, 16:03:36

[MONII28]

Działa SUPER Dziękuję

Okazało się że pozostałe parametry również muszą być przypisane do obrazka. I następny problem rozwiązany. Super
Zastanawiam się jak teraz nad skalowaniem poprzez przeciąganie rogu. Czy da się to wykonać?