| Autor | Zpráva | ||
|---|---|---|---|
| hunter_dave Profil |
#1 · Zasláno: 23. 9. 2013, 18:44:03
Zdravím, narazil jsem na problém s js.
Mám následující kód: for(i = 0; i < 5; i++){
var img = new Image();
img.onload = function(){
//práce s nahraným obrázkem, kde potřebuji také využit proměnnou i
}
}Takže můj dotaz zní, jak dostat do té funkce onload proměnnou i, která už tam zůstane. Bohužel nic takového jako img.onload = function(i){ nefunguje za i se dosadi [object Event], nebo něco podobného, ani function(int = i){ nefunguje, nevím jak dál. |
||
| Joker Profil |
#2 · Zasláno: 23. 9. 2013, 18:56:22
hunter_dave:
„Bohužel nic takového jako img.onload = function(i){ nefunguje za i se dosadi [object Event]“ Tohle přece do funkce nevloží hodnotu i, ale vyrobí parametr jménem i. A obsluze události se jako argument předá objekt té události. „ani function(int = i){“ A tohle nedává ani smysl. Asi nejsnazší řešení je uložit si hodnotu i přímo do toho objektu jako atribut. |
||
| quatzael Profil |
#3 · Zasláno: 23. 9. 2013, 18:58:03 · Upravil/a: quatzael
hunter_dave:
Popisuješ svůj problém asi trochu složitě. Nejspíš jsi myslel, jak udělat to, aby se rozjel další cyklus teprve potom co proběhne celá funkce, ne? Jinak nepotřebuješ v Tvým případě žádnou proměnnou "i" v tý funkci.. Nebo si tu hodnotu můžeš ještě před cyklem uložit do jiný proměnný. Ale nevím přesně o co se snažíš.. |
||
| hunter_dave Profil |
#4 · Zasláno: 23. 9. 2013, 19:29:18
Joker:
chtel jsem vytvorit promenou int do ktere bych vlozil i jako vychozi .. jako, kdyz vytvaris fci .. function nazev_fce(promenna = true) napriklad To s tím atributem vyzkouším, díky moc quatzael: Jde o animaci v html5, aby to bylo plynule tak nemuzu cekat az se to provede. a tu promenou i potrebuju protoze se tam stridaj symboly, ktere mam ulozene v dvourozmernem poli. celý zápis té fce pak bude: img.onload = function(){
context.drawImage(images[symbols[i][j].value], symbols[i][j].x, symbols[i][j].y);
} |
||
| _es Profil |
#5 · Zasláno: 23. 9. 2013, 19:37:23
hunter_dave:
„for(i = 0;“ Viď Časté potíže, zajímavosti a poučné debaty » Používejte var.
Asi potrebuješ niečo ako: for(var j = 0; j < 5; j++){
var img = new Image();
(function(i){
img.onload = function(){
//práce s nahraným obrázkem, kde potřebuji také využit proměnnou i
})(j);
} |
||
| hunter_dave Profil |
#6 · Zasláno: 23. 9. 2013, 19:46:03
_es:
Co přesně dělá to (function(i){})(j), jinak ve var to není, používám ho všude, jen sem jsem napsal do toho cyklu "i" bez var |
||
| _es Profil |
hunter_dave:
„Co přesně dělá to“ Viď Časté potíže, zajímavosti a poučné debaty » Uchování hodnot proměnných v anonymních funkcích — lexikální uzávěry. |
||
| hunter_dave Profil |
Tak vyřešeno pomocí nápadu Jokera ale mám další problém: Obrázek se při každém kroku animace znovu nahraje, což je +- 16 milisekund a dost nepříjemně to bliká (safari), v chromu se to vůbec nezobrazí. Nevěděl by si s tím někdo rady? Tady je kód:
function drawSymbols(symbols) {
for(i = 0; i < document.getElementsByTagName("canvas").length; i++){
canvas = document.getElementsByTagName("canvas")[i];
context = canvas.getContext('2d');
for(j = 0; j < symbols[i].length; j++){
context.beginPath();
context.rect(symbols[i][j].x, symbols[i][j].y, symbolWidth, symbolHeight);
var img = new Image();
img.i = i;
img.j = j;
img.ctx = context;
img.onload = function(){
this.ctx.drawImage(this, symbols[this.i][this.j].x, symbols[this.i][this.j].y);
}
img.src = "symbols/"+symbols[i][j].value+".png";
context.lineWidth = symbolBorder;
context.strokeStyle = 'black';
context.stroke();
}
}
}Tak vše vyřešeno. Díky všem za pomoc, do proměné symbols sem si nahrál obrázek a k němu vlastnost loaded.. pokud už byl nahraný, znovu se nenačítal. Řešení: //pole se symboly
var symbols = new Array();
for(i = 0; i < document.getElementsByTagName("canvas").length; i++)
symbols[i] = new Array();
symbols[0][0] = {x: 0, y: 0, value: 'bonus', image: new Image()};
symbols[0][1] = {x: 0, y: 0, value: 'grape', image: new Image()};
symbols[0][2] = {x: 0, y: 0, value: 'cherry', image: new Image()};
//atd...
//fce drawSymbols
function drawSymbols(symbols) {
for(i = 0; i < document.getElementsByTagName("canvas").length; i++){
canvas = document.getElementsByTagName("canvas")[i];
context = canvas.getContext('2d');
for(j = 0; j < symbols[i].length; j++){
context.beginPath();
context.rect(symbols[i][j].x, symbols[i][j].y, symbolWidth, symbolHeight);
var img = new Image();
img.i = i;
img.j = j;
img.ctx = context;
if(!symbols[i][j].image.loaded){
symbols[i][j].image.i = i;
symbols[i][j].image.j = j;
symbols[i][j].image.ctx = context;
symbols[i][j].image.onload = function(){
this.ctx.drawImage(this, symbols[this.i][this.j].x, symbols[this.i][this.j].y);
};
symbols[i][j].image.src = "symbols/"+symbols[i][j].value+".png";
symbols[i][j].image.loaded = true;
}
else
context.drawImage(symbols[i][j].image, symbols[i][j].x, symbols[i][j].y);
context.lineWidth = symbolBorder;
context.strokeStyle = 'black';
context.stroke();
}
}
} |
||
|
Časová prodleva: 11 let
|
|||
0