Új hozzászólás Aktív témák

• Bici félisten

  #4516

  #4499 Jim-Y

  2014-11-04 00:32:59

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Bici

  félisten

  #4499 Jim-Y

  #4499 Jim-Y

  Szia

  1: ... = Array; Ehelyett inkabb ... = [] az ajanlott. [link]

  2: ne tegyel semmit kulon fuggvenybe, ahogy fordfairlane is irta, a closure nem tartalmazza az i valtozodat, itt egy (ROSSZ) pelda, ez tortenik most a kododban.

  http://jsfiddle.net/Jim_Y/6vy2x7Lo/1/

  Latszik, hogy 10x "10" irodik ki a kepernyore, tehat ha lebontjuk, akkor

  ctx.drawImage(imageObj[10], b, 0, a, 1080);
  ctx.drawImage(imageObj[10], b, 0, a, 1080);
  ctx.drawImage(imageObj[10], b, 0, a, 1080);
  ctx.drawImage(imageObj[10], b, 0, a, 1080);
  ...stb tortenik

  Ez azert van, mert az onload fuggveny egy closure-t kepez az ot korulolelo fuggvennyel, ami azt jelenti, hogy amikor az onload fv. lefut, akkor mindig megnezni a runtime, hogy az aktualis kontextusban mi az i valtozo erteke. Mivel az onload aszinkron, ezert amikor azok lefutnak, addigra a ciklus mar vegzett, es az i ciklusvaltozo erteket 10-re novelte. Abban a pillanatban ahogy az onload lookup-olja az i-t, az mar 10-es ertekkel szerepel a kontextusban. Ezert lesz 10x"10" kiirva a konzolra.

  Ennek megoldasa, egy uj Execution Context (~ uj variable environment, ~closure) letrehozasaval orvosolhato, amiben az i valtozo mindig az eppen aktualis ertekre lesz beallitva, igy amikor az onload (lookup i) tortenik, akkor az aktualis environment context-ben az i jo ertekkel fog szerepelni.

  Ket Harom pelda:

  1: http://jsfiddle.net/Jim_Y/6vy2x7Lo/2/ reading Function.prototype.bind
  2: http://jsfiddle.net/Jim_Y/6vy2x7Lo/3/ reading closures
  3: http://jsfiddle.net/Jim_Y/6vy2x7Lo/4/ reading IIFE

  3: Az onload aszinkron muvelet, ami a ciklus lefutasa utan fog csak meghivodni.

  Itt egy szemlelteto pelda http://jsfiddle.net/Jim_Y/LsuLL7dg/1/

  A kodban a setTimeout az onload-ot szemlelteti. Latszik, hogy amit azon kivul csinalsz, az elobb fut le, mint amit azon belul.

  Udv

  Heló!

  A példáidat sajnos nem tudtam az én kódommal összehozni, ezért úgy döntöttem, hogy csak az elméletet használom fel belőle (enclosure), és kerestem erre a neten példákat, és ez lett a működő eredmény:

  {
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  var files = document.getElementById("files-upload").files;
  var imageObj = [];
  var betolt = function(i,b,a)
  {
  imageObj[i].onload = function ()
  {
  ctx.drawImage(imageObj[i], b, 0, d, a);
  };
  };
  a = ( 1920 - (files.length - 1) ) / ( files.length );
  for (var i = 0; i < files.length; i++)
  {
  b = ( a + 1 ) * i;
  imageObj[i] = new Image();
  imageObj[i].src = "útvonal"+files[i].name;
  betolt(i,b,a);
  }
  }

  A problémát a te példáidnál az okozta, hogy nem értettem a három közti különbséget és a szintaktikát - pl. a kapcsos zárójel után írt (i), vagy az, hogy egy zárójelen belül van egy függvény az onload jobb oldalán, vagy a settimeout-os Image függvény értelmét sem értem. Ezt mind a kettes példából vettem.
  Persze, utána fogok nézni mindegyiknek, mert ez így nem állapot, hogy ilyen alap dolgokat nem tudok, csak most nem hagyott nyugodni a dolog és működésre akartam bírni olyan módszerrel, amit értek.
  Remélem, nem "csúnya" nagyon a kódom.

  Ezen kívül van még egy kérdésem: A betöltött képeket szeretném mouse scroll segítségével átméretezni úgy, hogy a kép nem lép ki a rendelkezésére álló keretből, hanem levágódik a széle, ami nem fér ki - persze egérrel lehetne drage-elni is a képet. További funkció lenne az egymás melletti képek közti választóvónal eltolása.
  Összességében egyfajta montázs progit akarok csinálni - egyelőre csak egymás melletti képekkel, átfedés nélkül.
  Egyelőre még nem jártam sikerrel, de felmerült egy kérdés ezzel kapcsolatban: elég ehhez egy canvas, vagy érdemesebb képenként klön canvas-t létrehozni?

Új hozzászólás Aktív témák