JavaScript - HTML5 képfeldolgozás

6. Képpontozó

A fény kifejezést hétköznapi értelemben a látható elektromágneses sugárzás jelenségének leírására használjuk, "szigorúbb megfogalmazás szerint a fény az emberben kialakuló érzetet és észleletet jelöli, amit az optikai sugárzásnak (100nm-1mm) egy szűkebb, látható tartománya (380nm-780nm) képes kiváltani. Ennek a szűkebb tartománynak az egyik végénél az ultraibolyatartomány (100-400nm), a másik végénél az infratartomány (780nm-1mm) helyezkedik el."

"Az emberi szemben a pálcikák és csapok végzik az elektromágneses hullámok érzékelését, míg előbbiek gyenge fényviszonyok mellett és a szem periférikus területein is jelentős érzékenységgel bírnak, addig utóbbiak elsősorban nappali körülmények között, a szem központi részén érzékelik a látható sugárzást. A pálcikák nem képesek a színek megkülönböztetésére, viszont a csapokból 3 féle található, eltérő érzékenységgel: L(λ), M(λ) és S(λ) (L: long - hosszú, M: medium - közepes, S: short - rövid hullámhossz tartományt jelöl). A színes kamerák színképi érzékenysége az emberi szemhez nagyon hasonló módon képzelhető el: a különböző spektrális tartományok érzékeléséért külön szenzorok felelősek. A kamerákból kiolvasható R, G, B (R: red - vörös, G: green - zöld, B: blue - kék) értékek a három szenzor válaszának felelnek meg."[1] Az így kapott digitális képek ábrázolásra többféle színmodell is alkalmas. A monitorok és a televíziók működése az additív színkeverési módra épül, és ennek megfelelően a HTML5 digitális vászna is az RGB modellt használja.

Képpontok szín és átlátszóság kezelése

Készítsünk digitális képek megjelenítésére alkalmas JavaScript kódot, amely a vászonra rajzolt kép színcsatorna, fényerő, kontraszt és átlátszóság beállításait szemlélteti. Az átlátszóság bemutatásához a vásznat tartalmazó cella rendelkezzen saját háttérképpel.

Bemenet: A Csillagok háborúja-trilógia főszereplőnek fotói, a PE-MIK bejáratáról készült digitális kép, valamint a színcsatorna, a fényesség, a kontraszt és az átlátszóság adatok.

Kimenet: A kijelölt digitális kép a beállított módosításokkal.

Változók: A canvas, context változók a vászonműveletekhez, az imgViewer objektum változói a digitális kép kezeléséhez, továbbá az űrlap mezői a paraméterek fogadásához.

Algoritmus: Megszerkesztjük az adatok fogadására alkalmas űrlapot, amelyben elhelyezzük a képek megjelenítésre használt vásznat, majd a Form lenyíló listájára felfűzzük az előkészített képek azonosítóit. Létrehozunk egy imgViewer objektumot, ami elvégzi a képek feltöltését, cseréjét és gondoskodik a Form beállításainak megfelelő képmódosításokról. A vásznon megjelenő kép gyakorlatilag egy olyan adatfolyam lesz, ahol egymást követik a képpontok RGB és Alfa csatornájának byte-jai. Az átlátszóság szemléltetéséhez kihasználjuk a CSS background-image tulajdonságát, és a vászon háttérképeként beillesztjük a PE-MIK bejáratáról készült képet.

Eseménykezelés: Az űrlap onchange() eseményét az imgViewer objektum adjustment metódusa kezeli le, és gondoskodik az űrlapértékeknek megfelelő a képpontértékek beállításáról.

Kedves Bitfaragó jelöltek!

A HTML5 canvas digitális képek kezelését is támogatja. Segítségével könnyen megjeleníthetjük és egyszerű programozási eszközökkel manipulálhatjuk is a képeinket. Ebben a leckében bemutatunk néhány JavaScriptben kódolt képszerkesztési műveletet, amelyek ismeretében már összetettebb feladatok megoldására is vállalkozhattok. A minta feladatok alatti Próbáld ki! » gombra kattintással nemcsak megnézhetitek a futási eredményt, hanem mindjárt szerkeszthetitek is a kódot.

1	Színcsatorna és átlátszóság

A digitális kép méretét az x és y irányú képpontok számával adjuk meg. A képpontonként eltárolt bitek száma pedig meghatározza a színmélységet. Ha a vörös, zöld és kék színcsatorna is egy-egy önálló byte-ot foglal le, akkor ebben az esetben 24 bites színmélységről beszélhetünk. Viszont minden képponthoz hozzárendelhetünk egy úgynevezett alfa csatornát is, amivel az átlátszóságot szabályozhatjuk. Ekkor már 24 + 8 = 32 bites színmélységről beszélünk. Az előzőek ismeretében könnyen kiszámolható, hogy egy 800 X 600 képpontból álló kép 32 bites színmélységgel 800*600*32/8= 1,92 MiB méretű lesz.

A canvas drawImage() metódusával helyezhetünk el képet a digitális vászonra. A képpontok adataihoz pedig a getImageData() metódussal juthatunk, ami gyakorlatilag egy byte-folyamot ad vissza. Az egymás után következő byte-ok rendre a képpontok vörös, zöld, kék és alfa csatornáinak értékét tartalmazzák. Ezeket az értékeket egy adekvát algoritmussal módosíthatjuk, majd a putImageData() metódussal vissza is írhatjuk a vászonra.

Figyeljétek meg az alábbi képnézegető scriptben az űrlap beviteli mezőinek, valamint a színkódok és az alfa csatorna értékeinek kezelését.

<!DOCTYPE html>
<html lang="hu">
<head>
 <title>Képpontok - színcsatornák</title>
 <meta charset="UTF-8">
 <meta name="author" content="fj">
</head>

<body>
<h1>Képpontok - színcsatornák</h1>

<!-- Űrlap külső adatok átvételéhez -->
 <form id="imgForm">
    <table style="background:#1f2839;color:#ff9900;width:412px;padding:3px;text-align:center;">
	<tr>
      <td style="text-align:left;width:33%;">
      <select name="imgsrc" id="imgsrc" onchange="imgViewer.change(this.id)">
        <option id="yoda" value="yoda">Yoda</option>
		<option id="skywalker" value="skywalker">Skywalker</option>
		<option id="darthvader" value="darthvader">Darth Vader</option>
      </select>
	  </td>
	  <td style="width:33%;">Star Wars Pictures</td>
	  <td style="text-align:right;">
      R:<input type="checkbox" name="red" id="red" checked onchange="imgViewer.adjustment()">
      G:<input type="checkbox" name="green" id="green" checked onchange="imgViewer.adjustment()">
      B:<input type="checkbox" name="blue" id="blue" checked onchange="imgViewer.adjustment()">
	  </td>
	</tr>
	
	<tr><td colspan="3">
	  <!-- A vászon kijelölése, méretezése -->
      <canvas id="myCanvas" width="400" height="400" style="background-image: url('./img/pemik_400x400.jpg');">
      Your browser does not support the HTML5 canvas tag.</canvas>
	</td></tr>
	
    <tr style="text-align:center;">
	  <td>Fényerő</td>
	  <td>Kontraszt</td>
	  <td>Átlátszóság</td>
	</tr>
	<tr>
	  <td><input type="range" style="width:100px;" name="brightness" id="brightness" min="-128" max="128" step="8" value="0" onchange="imgViewer.adjustment()"></td>
	  <td><input type="range" style="width:100px;" name="contrast" id="contrast" min="-128" max="128" step="8" value="0" onchange="imgViewer.adjustment()"></td>
	  <td><input type="range" style="width:100px;" name="alfa" id="alfa" min="0" max="256" step="8" value="0" onchange="imgViewer.adjustment()"></td>
	</tr>
	</table>
  </form>
  
<script>
 // === Globális változók deklarálása
 var canvas=document.getElementById('myCanvas');
 var context=canvas.getContext('2d');
 
 // === Képnézegető objektum
 var imgViewer = {
     // === Objektumváltozók deklarálása
     sources : {
        yoda: './img/yoda.jpg',
		skywalker: './img/skywalker.jpg',
		darthvader: './img/darthvader.jpg',
     },
	 imageSelected : {},
	 
	 // === Képek betöltése
     loadImages: function(sources, callback) {
        images = {};
        var loadedImages = 0;
        var numImages = 0;
		
		document.getElementById("imgForm").reset();
		
        // get num of sources
        for(var src in this.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];
        }
      },
	  
    // === Képváltás
    change: function (elementId) {
	  // === Választott kép betöltése
      this.imgSelected = document.getElementById(elementId).value;
      context.drawImage(images[this.imgSelected], 0, 0, context.canvas.width, context.canvas.height);
	  
	  // === Form reset & clear
      document.getElementById("imgForm").reset();
	  document.getElementById(this.imgSelected).selected = true;
	  document.getElementById('brightness').value = 0;
	  document.getElementById('contrast').value = 0;
	  document.getElementById('alfa').value = 0;
	},
	
	// === Összeadás 0 és 255 között (8 bites színkód)
    addTruncate: function(a,b){
	  if (a+b>255) { return 255}
	  else if(a+b<0) {return 0}
	  else return a+b;
	},
	
	// === Képpontok beállítása
	adjustment: function() {
	    // === Képadatok bekérése
	    context.drawImage(images[this.imgSelected], 0, 0, context.canvas.width, context.canvas.height);
	    var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
	    var data = imageData.data;
		
		// === Új értékek kiolvasása a Form-ból
	    var brightness = Number(document.getElementById('brightness').value);
		var contrast = Number(document.getElementById('contrast').value);
		    contrast = (259 * (contrast + 255))/ (255*(259-contrast));
		var alfa = Number(document.getElementById('alfa').value);
		var red = document.getElementById('red').checked;
		var green = document.getElementById('green').checked;
		var blue = document.getElementById('blue').checked;

		// === Red, Gree, Blue és Alfa értékek módosítása képpontonként
        for(var i = 0; i < data.length; i += 4) {
          // === Red channel - Piros színcsatorna
		  if (red){
            data[i] = this.addTruncate(data[i],brightness);
			data[i] = this.addTruncate(contrast*(data[i]-128),128);
		  }
		  else {
		    data[i] = 0;
		  }
          // === Green channel - Zöld színcsatorna
		  if (green){
            data[i + 1] = this.addTruncate(data[i+1],brightness);
			data[i + 1] = this.addTruncate(contrast*(data[i+1]-128),128);
		  }
		  else {
		    data[i + 1] = 0;
		  }
          // === Blue channel - Kék színcsatorna
		  if (blue){
            data[i + 2] = this.addTruncate(data[i+2],brightness);
			data[i + 2] = this.addTruncate(contrast*(data[i+2]-128),128);
		  }
		  else{
		    data[i + 2] = 0;
		  }
		  // == Alfa channel - Átlátszóság
		  data[i + 3] = this.addTruncate(data[i+3],-alfa);
        }
        // === Módosítások kiírása a vászonra
        context.putImageData(imageData, 0, 0);
	}

 }

 // === Start ImageViewer

     imgViewer.loadImages(imgViewer.sources, function(images) {
		imgViewer.change('yoda');
     });

</script> 

<!-- =========================
http://www.w3schools.com/tags/tag_input.asp
http://www.w3schools.com/tags/att_input_type.asp
Select a file: <input type="file" name="img">
 
Képbetöltés:  http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/
Contrast: http://www.dfstudios.co.uk/articles/programming/image-programming-algorithms/image-processing-algorithms-part-5-contrast-adjustment/
Grayscale: http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/
==============================-->
</body>
</html>

Megjegyzés: Az átlátszóság használatakor ügyeljetek arra, hogy nem minden fájlformátum tárolja az Alfa csatornán beállított értékeket. A .GIF és .PNG formátumok megőrzik a beállított átlátszóság értéket, de a .JPG érhető okok miatt nem.

« Előző | Lap eleje

2	Képméretezés, vágás, nyírás

A vászonra a drawImage() metódussal rajzolhatjuk fel a kiválasztott képünket. A legegyszerűbb esetben a kép elérési útjának és a rajzolási koordináták megadásával már meg is jelenik a képünk az tárolt méretben. Ám a drawImage() metódus paraméterei átdefiniálhatók. A programozási gyakorlatban biztos találkoztatok már az overloading kifejezéssel. Nos, ha drawImage('kép neve',x,y, width, height) metódust újabb két paraméterrel kiegészítve hívjuk meg, akkor a width értékkel a rajzolási szélességet, a height értékkel pedig a rajzolási magasságot tudjuk szabályozni.

Ha további négy paraméterrel megtoldjuk a drawImage() metódus paraméterlistáját, akkor a kijelölt képről az általunk megadott pozíciótól a megadott méretű képrészletet tudjuk kiemelni, amit a vásznon az utolsó négy paraméterrel megjelölt pozícióban a megadott méretben helyez el a metódus. Rövidebben: drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

A canvas minden objektumához tartozik egy transzformációs mátrix. A nyírás műveletéhez a transform() metódust vehetjük igénybe, ami az aktuális transzformációs mátrixot cseréli le. A paraméterek értelmezése röviden: context.transform (x skála, x ferdítés, y ferdítés, y skála, x elmozgatás, y elmozgatás). Az eredeti állapot visszaállítását a setTransform() metódussal tudjuk elvégezni.

<!DOCTYPE html>
<html lang="hu">
<head>
 <title>Canvas size, crop, transform</title>
 <meta charset="UTF-8">
 <meta name="author" content="fj">

</head>

<body>
  <h1>Képméretezés, vágás, nyírás</h1>
  <!-- A vászon kijelölése, méretezése -->
  <canvas id="myCanvas" width="400" height="400" >
  Your browser does not support the HTML5 canvas tag.</canvas>
  <form>
    <input type="button" value="Eredeti" onclick="contextReset()" />
    <input type="button" value="Kicsinyítés" onclick="contextMirror()" />
	<input type="button" value="Vágás" onclick="contextRotate()" />
	<input type="button" value="Nyírás" onclick="contextShear()" />
  </form>
  
  <script>
  // === Globális változók deklarálása
  var canvas=document.getElementById('myCanvas');
  var context=canvas.getContext('2d');
  var width = 100;
  var height = 75;
  
  // === Képbetöltés, vászonra írás
  var imageObj = new Image();
  imageObj.src = './img/pencil.jpg';
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
  };
  
  // === Eredeti állapot visszaállítása
  contextReset = function() {
	canvas.width = canvas.width;
    context.drawImage(imageObj, 0, 0);
  }
  
  // === Kép kicsinyítése
  contextMirror = function() {
	context.drawImage(imageObj, 0, 305, width, height);
  }
  
  // === Kép vágása
  contextRotate = function() {
    var sourceX = 200;
    var sourceY = 125;
    var sourceWidth = width;
    var sourceHeight = height;
    var destWidth = sourceWidth;
    var destHeight = sourceHeight;
    var destX = 105;
    var destY = 305;
	context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
  }
  
  // === Kép nyírása
  contextShear = function() {
	// Az új rajzolási pozíció beállítása, (0,0) pozició eltolása
    context.translate(200,305);
	
    /* 
	Transzformációs mátrix, context.transform(a,b,c,d,e,f)
    a c e
    b d f
    0 0 1
	*/
	
    // context.transform (x skála, x ferdítés, y ferdítés, y skála, x elmozgatás, y elmozgatás)
    context.transform(1, 0, 0.5, 1, 50, 0);

	context.drawImage(imageObj, 0, 0, width, height);
	// Alapállapot beállítása, új transzformációs matrix
	context.setTransform(1, 0, 0, 1, 0, 0);
  }
  </script>
</body>
</html>

« Előző | Lap eleje

3	Tükrözés, elforgatás

A canvas scale() metódusa az aktuális rajz méretezését végzi el, és hatása minden jövőbeni rajzolási műveletre érvényes lesz. A rajzolási pozíciót is skálázza. A scale(2,2) nemcsak a méretet kétszerezi, hanem kétszer olyan távolságra is helyezi el a következő rajzelemet a vászon bal felső sarkától. Vízszintes tükrözésnél a scale(-1, 1) metódussal a jobb oldalról rajzolhatjuk ki a képet, ha előbb a translate() metódussal a rajzolási eltolást a canvas jobb felső sarkához illesztettük.

Az elforgatáshoz a rotate() metódusra lesz szükségünk, amely a paraméterként radiánban megadott szöggel forgatja el a következő rajzelemet. Ügyeljünk a rajzolási pozíció eltolásának megadására is.

<!DOCTYPE html>
<html lang="hu">
<head>
 <title>Canvas mirror and rotate</title>
 <meta charset="UTF-8">
 <meta name="author" content="fj">

</head>

<body>
  <h1>Tükrözés, elforgatás</h1>
  <!-- A vászon kijelölése, méretezése -->
  <canvas style="border: 1px solid silver;" id="myCanvas" width="400" height="400" >
  Your browser does not support the HTML5 canvas tag.</canvas>
  
  <form>
    <input type="button" value="Eredeti" onclick="contextReset()" />
    <input type="button" value="Tükrözés" onclick="contextMirror()" />
	<input type="button" value="Elforgatás" onclick="contextRotate()" />
  </form>
  
  <script>
  // === Globális változók deklarálása
  var canvas=document.getElementById('myCanvas');
  var context=canvas.getContext('2d');
  
  // === Képbetöltés, vászonra írás 
  var imageObj = new Image();
  imageObj.src = './img/pencil.jpg';
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
  };
  
  // === Eredeti állapot visszaállítása
  contextReset = function() {
	canvas.width = canvas.width;
    context.drawImage(imageObj, 0, 0);
  }
  
  // === Canvas horizontális tükrözése
  contextMirror = function() {
    context.translate(400, 0);
    context.scale(-1, 1);
	context.drawImage(imageObj, 0, 0);
  }
  
  // === Canvas forgatása
  contextRotate = function() {
    // Elforgatás előtti canvas tartalom törlése
    context.clearRect ( 0 , 0 , canvas.width , canvas.height );
	// Elforgatás indul
    context.translate(400, 0);
    context.rotate(90*Math.PI/180);
	context.drawImage(imageObj, 0, 0);
  }
  </script>
</body>
</html>

« Előző | Lap eleje

4	Animáció kódolása

"De mit is értünk animáció alatt? Maga az animáció szó, a latin "anima" vagyis lélek szóból ered. Ez arra utal, hogy az animáció készítése során lelket adunk, lélekkel töltjük meg az élettelen tárgyakat, legyenek azok bábok vagy akár vonalak. Az animálás során állókép-sorozatokat készítünk, amelyeket ha kellő gyorsasággal egymás után levetítünk – a szemünk tehetetlensége miatt – mozgásélményben lesz részünk. Az animációval több információt közölhetünk, mint egy statikus képpel, de ne feledjük, hogy az animáció megjelenítéséhez, lejátszásához több erőforrás szükségeltetik a megjelenítő eszköz (pl. számítógép, okostelefon, iPad) részéről."[2]

A mintaprogramban egy 65x65 pixeles PNG képet mozgatunk a vásznon 100ms-os időközönként. A kép kezdő pozícióit véletlenszám-generátorral állítjuk elő, ezt követően a beállított lépéshosszal változtatjuk a kép pozíciót, a canvas szélén pedig gondoskodunk az irányváltásról. Egy apró trükk erejéig kihasználtuk a CSS background-image opcióját a canvas hátterének beállításához, ami az NGC 6559 csillagképet mutatja.

<!DOCTYPE html>
<html lang="hu">
<head>
  <title>Screenwalker</title>
  <meta charset="UTF-8">
  <meta name="author" content="fj">
  <style>
    #myCanvas {
    background-image: url('./img/space-243-dusty-ngc-6559_67014_600x450.jpg');
    background-repeat:no-repeat;
    border: 1px solid silver;  
    }
  </style>
</head>

<body>
  <h1>Screenwalker</h1>
  <!-- A vászon kijelölése, méretezése -->
  <canvas id="myCanvas" width="480" height="360" >
  Your browser does not support the HTML5 canvas tag.</canvas>
  
  <form>
    Kép:
    <input type="button" value="B3 logó" onclick="changeImageObj('./img/b3_65x65.png')" />
    <input type="button" value="Imperial shuttle" onclick="changeImageObj('./img/spaceshuttle_65x65_alfa.png')" />
	Háttérkép:
	<input type="button" value="NGC-6559" onclick="changeBgImage('url(\'./img/space-243-dusty-ngc-6559_67014_600x450.jpg\')')" />
    <input type="button" value="PE campus" onclick="changeBgImage('url(\'./img/veszprem03jul0013_600x450.jpg\')')" />
  </form>
  
  <script>
  // === Globális változók deklarálása
  var canvas=document.getElementById('myCanvas');
  var context=canvas.getContext('2d');

  // Space Shuttle mozgatás segédváltozói
  var shWidth = 65;
  var shHeight = 65;
  // Vigyázz,shLeft és shTop ne induljon nulláról!
  var shLeft = Math.floor((Math.random() * 100) + 1); ;
  var shTop = Math.floor((Math.random() * 100) + 1); ;
  var step= 2;
  var xWay = true;
  var yWay = true;
  
  // === Képbetöltés, vászonra írás
  var imageObj = new Image();
  imageObj.src = './img/b3_65x65.png';
  imageObj.onload = function() {
    context.drawImage(imageObj, shLeft, shTop);
  };
  // === Képcsere
  function changeImageObj(imgsrc){
    imageObj.src = imgsrc;
    context.drawImage(imageObj, shLeft, shTop);
  }
  function changeBgImage(bgimgsrc){
    document.getElementById("myCanvas").style.backgroundImage=bgimgsrc;
  }
  
  // === Időzítés bekapcsolása
  var myVar=setInterval(function(){walker()},100);
  
  function walker(){
    // Space Shuttle irányváltás kezelése
    if (shLeft+shWidth>context.canvas.width) {xWay = !xWay;}
	else if (shLeft<1) {xWay=!xWay;}
	if (shTop+shHeight>context.canvas.height) {yWay = !yWay;}
	else if (shTop<1) {yWay=!yWay;}
	
	// Space Shuttle eltűnik a régi pozicióról
    context.clearRect(shLeft,shTop,shWidth,shHeight);
	
	// Space Shuttle megjelenik az új pozición
	shLeft=xWay ? shLeft+step : shLeft-step;
	shTop=yWay ? shTop+step : shTop-step;
    context.drawImage(imageObj, shLeft, shTop);
  };
  </script>
  
<!-- Források: ==============
HTML DOM Events: http://www.w3schools.com/jsref/dom_obj_event.asp
addEventListener() Method: http://www.w3schools.com/jsref/met_element_addeventlistener.asp
onmousemove Event: http://www.w3schools.com/jsref/event_onmousemove.asp
Show mouse coords: http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
Mouse Coordinates Tutorial: http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
NGC-6559: http://upload.wikimedia.org/wikipedia/commons/9/93/The_star_formation_region_NGC_6559.jpg
Veszprém légifotók: http://www.legifotok.hu
========================= -->
</body>
</html>

« Előző | Lap eleje

5	Egérpozicionálás és eseménykezelés

A HTML DOM események lehetővé teszik, hogy különböző JavaScript eseménykezelő utasításokat kapcsoljunk a HTML dokumentum elemeihez. Az események alapesetben függvényhívásokat kezdeményeznek, melyek csak az esemény bekövetkezésekor hajtódnak végre. Az eseménymodellt a W3C által szabványosított DOM Level 2 mutatja be, amely 9 egéreseményt szabályoz. A mintaprogramunkban a mousemove és mouseleave eseményeket használjuk fel úgy, hogy a DOM addEventListener() metódusával a canvas-hoz kapcsoljuk a saját eseménykezelő függvényünket.

Természetesen a canvas HTML tag-jében az onmousemove és onmouseleave attribútummal is megoldható lenne az eseménykezelő függvény felkapcsolása, de mi itt most tisztán a JavaScript kódra támaszkodtunk. Az egér képernyő pozícióját az eseményparaméter clientX és clientY értéke ugyan megadja, de nekünk a vásznon belüli relatív pozícióra lenne szükségünk. Ehhez a canvas.getBoundingClientRect() metódus visszaadott értékeit kell felhasználnunk, amelyekből kiolvashatók a canvas bal felső sarkának koordinátái. Most már nincs más dolgunk, mint a kiszámított egérpozícióban elvégezzük a tervezett képszerkesztési műveleteket. Jelen esetben egy 60x60 pixeles területet felnagyítunk 100x100 pixelesre. Mivel csak a vászon feletti manipulációt figyeljük, ezért a felület elhagyását a mouseleave esemény bekövetkezésekor szintén le kell még kezelnünk.

<!DOCTYPE html>
<html lang="hu">
<head>
 <title>Egér koordináták kezelése</title>
 <meta charset="UTF-8">
 <meta name="author" content="fj">
</head>

<body>
  <h1>Egér koordináták kezelése</h1>
  <!-- A vászon kijelölése, méretezése -->
  <canvas id="myCanvas" width="400" height="300" >
  Your browser does not support the HTML5 canvas tag.</canvas>
  
  <p>Egérpozíció: <span id="x">0</span>, <span id="y">0</span> <span id="color" style="border: 1px solid silver;"> Színkód: </span> <span id="rgb">?</span></p>
  
  <script>
  // === Globális változók deklarálása
  var canvas=document.getElementById('myCanvas');
  var context=canvas.getContext('2d');
  
  // === Eseménykövetés a vásznon
  canvas.addEventListener('mousemove', function(evt) {
      // Egérpozíció kiírása
      var mousePos = getMousePos(canvas, evt);
	  document.getElementById("x").innerHTML = mousePos.x;
	  document.getElementById("y").innerHTML = mousePos.y;
	  
      // Pixel színkód kiírása
      document.getElementById("rgb").innerHTML = getColorCode(mousePos.x,mousePos.y);
      document.getElementById("color").style.backgroundColor = document.getElementById("rgb").innerHTML;

      // Nagyítás
	  context.drawImage(imageObj,0,0);
	  context.drawImage(imageObj, mousePos.x, mousePos.y, 60, 60, mousePos.x, mousePos.y, 100, 100);

    }, false);
  canvas.addEventListener('mouseleave', function(evt) {
	  context.drawImage(imageObj,0,0);
	  document.getElementById("x").innerHTML = 0;
	  document.getElementById("y").innerHTML = 0;
      document.getElementById("color").style.backgroundColor = 'white';
      document.getElementById("rgb").innerHTML = '?';
	}, false);
		
  // === Képbetöltés, vászonra írás
  var imageObj = new Image();
  imageObj.src = './img/pencil.jpg';
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
  };
  
  // === Vászon egérpozíció kiszámítása
  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: Math.floor(evt.clientX - rect.left),
      y: Math.floor(evt.clientY - rect.top)
    };
  }
  
  // === Vászon egérpozíció pixel színkód kiolvasasa
  function getColorCode(x,y) {
    var pixelData = context.getImageData(x, y, 1, 1 );
    var data = pixelData.data;
    // Korrekcio a kétjegyű hexadecimális átalakításhoz
    var r='00'+data[0].toString(16);
        r=r.substr(r.length-2,2);
    var g='00'+data[1].toString(16);
        g=g.substr(g.length-2,2);
    var b='00'+data[2].toString(16);
        b=b.substr(b.length-2,2);
    return ('#'+r+g+b).toUpperCase();
  }
  </script>
  
<!-- Források: ==============
HTML DOM Events: http://www.w3schools.com/jsref/dom_obj_event.asp
addEventListener() Method: http://www.w3schools.com/jsref/met_element_addeventlistener.asp
onmousemove Event: http://www.w3schools.com/jsref/event_onmousemove.asp
Show mouse coords: http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
Mouse Coordinates Tutorial: http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
========================= -->
</body>
</html>

« Előző | Lap eleje

6	Oldd meg a feladatokat!

A képpontok birodalmában tett kirándulásunk folyatatásaként lenne még néhány érdekes feladat, melyek megoldásával értékes pontokat gyűjthettek a verseny következő fordulójához. A könnyebb kezelhetőség érdekében a megoldást a feladatok előtti kék azonosítóval megegyező nevű könyvtárban dolgozzátok ki. A beküldött HTML kód elején a csapat logója és neve, alatta a feladat azonosítója, és szövege jelenjen meg sötét háttérrel és világos betűkkel. Ezt követően már csak a megoldást kell ügyesen kódolnotok. Az elkészült megoldásokat gyűjtsétek össze a csapat nevével megegyező nevű könyvtárban, majd tömörítve töltsétek fel a honlapra!

Beküldhető feladatok 2014:

B3-2014-EGY05 A Star Wars története réges-régen, egy messzi-messzi galaxisban játszódik. A Galaktikus Köztársaság békéjét és rendjét Jedi lovagok őrzik. Minden Jedi lovag saját maga készíti fénykardját, ez a végső próba, hogy lovagok lehessenek. A HTML5 canvas tulajdonságainak ismeretében tervezzétek meg a JS2014-B3 típusú virtuális fénykardot:
1. A markolat hossza 150 pixel. A markolatból gombnyomással ugrasztható ki a penge, illetve oda zárható vissza.
2. Erőörvénygyűrű a markolat fölött helyezkedik el, és tartalmazza a szabályzókat. Méretére nincs megkötés, de nem akadályozhatja a Jedi lovagot a harcban.
3. A pengehossz-szabályzó egy csavar, és minél többet tekerünk rajta, annál hosszabb lesz a penge. A penge hossza maximum 600 pixel.
4. Pengeerő-szabályzó a penge erejét határozza meg. Hasonló csavar, mint a pengehossz szabályzó. A korai fénykardokon még nem létezett. A JS2014-B3 típusnál ez a 20 és 40 pixel között állítható pengeszélességet módosítja.
5. A kristály határozza meg a penge színét, ami a vörösből a zöldön át egészen a kékig változhat. A választható kristály színe, fényereje, kontrasztja és átlátszósága szabályozható legyen.
6. A vásznon megjelenő fénykard opcionálisan tükrözhető és elforgatható legyen.
1000 0000|₂ pont
B3-2014-EGY06 Készítsetek egyszerű reflex játékot JavaScript kódban! A HTML dokumentumban helyezzetek el egy legalább 400x600 pixel méretű canvas objektumot, amely egy kisebb maximum 80x80 pixel méretű képet tartalmaz valamelyik Sith lovagról. A képre kattintáskor az a vászon egy véletlen számmal generált pozíciójára ugrik. A program alapértelmezésben 10 másodpercig számolja a sikeres kattintásokat. Egészítsétek ki a kódot egy űrlappal, ahol a vászon, a megjelenített kép mérete és a játékidő módosítható, továbbá a játékhoz használt kép cserélhető.
0100 0000|₂ pont
B3-2014-EGY07 A Galaktikus Birodalomban lovagjai űrsikló versenyen mérik össze harci eszközeik erejét, ahol a csillagközi térben legalább három különböző típusú (Imperial, Jedi T-6, Republic attack) űrsikló startol, és változó gyorsulással véletlenszám-generátorral megadott távolságokat tesz meg. A verseny a fogadás megtételével indul, és a kiválasztott csillagkép határának elérésekor ér véget. Az eredmény és a fogadás kiértékelése a futam végén jelenjen meg.
0100 0000|₂ pont
B3-2014-EGY08 Az NGC 6559 nevű galaxis lakói három különböző típusba tartoznak. Az első az átlagos, a kis engiszik 67%-a születik ilyennek. Jellemző tulajdonságuk, hogy nagyon függnek a többiektől, jókedvszintjük születéskor bármilyen értéket (0-100) felvehet, és minden találkozáskor igazodnak a másik jókedvszintjéhez. A második típus az optimista, születéskor 1/5 valószínűséggel lesznek ilyenek az engiszik. Minimum 60-as jókedvszinttel születnek, és ez soha sem változik. A többi engiszi pesszimista. Kezdetben 20 alatt van a jókedvszintjük, és minden optimistával való találkozáskor feleződik. Mindhárom típus mozgása könnyed, a galaxison belül bármelyik pillanatban bárhol felbukkanhatnak.

Optimista o1 Átlagos a1 Pesszimista p1

Optimista o2 =o1 =(a1+o2)/2 =p1/2

Átlagos a2 =o1 =(a2+a1)/2 =p1

Pesszimista p2 =o1 =(a1+p2)/2 =p1

Tervezzétek meg az NGC osztályt! Szimuláljátok az NGC 6559 galaxis lakóinak életét, és jelenítsétek meg vizuálisan. Használhattok smile-kat a három típusú engiszi megjelenítéséhez, vagy tervezhettek saját ikonokat is. Minden lépés után tároljátok a lakók állapotát, és számoljátok ki a galaxis összjókedvét.
1000 0000|₂ pont

« Előző | Lap eleje

	Optimista o1	Átlagos a1	Pesszimista p1
Optimista o2	=o1	=(a1+o2)/2	=p1/2
Átlagos a2	=o1	=(a2+a1)/2	=p1
Pesszimista p2	=o1	=(a1+p2)/2	=p1

6. Képpontozó

Képpontok szín és átlátszóság kezelése

Kedves Bitfaragó jelöltek!

Színcsatorna és átlátszóság

Képméretezés, vágás, nyírás

Tükrözés, elforgatás

Animáció kódolása

Egérpozicionálás és eseménykezelés

Oldd meg a feladatokat!

Beküldhető feladatok 2014:

Hivatkozások, felhasznált források