image array

Status
Niet open voor verdere reacties.
E

eriks1964

Gebruiker
Lid geworden
20 jan 2014
Berichten
20
Dag Allen,
Ik haal 4 kleine stukjes uit een sprite-sheet met:
[JS]ctx.drawImage(img, 64, 8,8,8,80, 0,8,8);[/JS]

De vraag is hoe krijg ik de vier stukjes in een array en hoe zet ik de array als 1 plaatje op het canvas?
Dit is mijn test code tot nu toe:
(ook de drie regels van mijn TEST array code werken niet).
[JS]<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="sprite-sheet" src="logi.bmp" alt="image" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="512" height="380" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>



<script>
document.getElementById("sprite-sheet").onload=function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("sprite-sheet");

Test = new array(); // test array code
Test[0] = "aap"; // test array code
document.write(Test); // test array code

document.write(StopLicht.src);


//rij x groen stoplicht
StopLicht= new array();
StopLicht[0].src = ctx.drawImage(img, 64, 8,8,8,80, 0,8,8);
StopLicht[1].src = ctx.drawImage(img, 72, 8,8,8,88, 0,8,8);
StopLicht[2].src = ctx.drawImage(img, 80, 8,8,8,80, 8,8,8);
StopLicht[3].src = ctx.drawImage(img, 88, 8,8,8,88, 8,8,8);
};
</script>

</body>
</html>[/JS]
 
Kan je het plaatje zelf uploaden?

Je moet overigens alle posities in je stoplicht array definieren as een ' new Image() '

document.write(StopLicht.src); doet uiteraard niets omdat stoplicht nog geen betekenis is toegewezen.
 
Dag Kvothe,
Bekijk bijlage logi-test.bmpEen deel van mijn aagepaste code:
[JS]//rij x groen stoplicht
StopLicht= new array();
StopLicht.src[0] = ctx.drawImage(img, 64, 8,8,8,80, 0,8,8);
StopLicht= new array();
StopLicht[1].src = ctx.drawImage(img, 72, 8,8,8,88, 0,8,8);
StopLicht= new array();
StopLicht[2].src = ctx.drawImage(img, 80, 8,8,8,80, 8,8,8);
StopLicht= new array();
StopLicht[3].src = ctx.drawImage(img, 88, 8,8,8,88, 8,8,8);[/JS]

De bijgevoegde bmp is niet compleet maar voor het deel van de 4 stukjes die ik eruit haal werkt het.
Erik
 
Let op, Javascript is hoofdlettergevoelig. Gebruik Array() bij het definieren van StopLicht (je kan ook gewoon StopLicht = []; gebruiken).


Overigens moet je niet telkens je StopLicht variabele definieren.

Als je meerdere plaatjes wilt definieren in een array moet dat zo, of je moet elke indice definieren naar het object.

[js]//rij x groen stoplicht
StopLicht= [];
for (var i = 0, i <4, i++){
StopLicht = new Image();
}
StopLicht[0].src = url0;
StopLicht[1].src = url1;
StopLicht[2].src = url2;
StopLicht[3].src = url3;[/js]


Dit is wat je nodig hebt:

HTML: 
<!DOCTYPE html>
<html>
<body>
 
<p>Image to use:</p>
<img id="sprite-sheet" src="http://i.imgur.com/Xaimq9t.png" alt="image" width="220" height="277" style="border:1px solid #d3d3d3;">
 <p> Canvas</p>

<canvas id="myCanvas" width="512" height="380" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
 
 

<script>
 
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
	var image = document.getElementById("sprite-sheet"); 
	     image.onload = function() {
    //rij x groen stoplicht
 
ctx.drawImage(image, 64, 8,8,8,80, 0,8,8);
ctx.drawImage(image, 72, 8,8,8,88, 0,8,8);
ctx.drawImage(image, 80, 8,8,8,80, 8,8,8);
ctx.drawImage(image, 88, 8,8,8,88, 8,8,8);
	}
 
  
</script>
 
</body>
</html>
 
Laatst bewerkt:
Dus iets als kan niet?
[JS] StopLicht= [];
for (var i = 0, i <4, i++){
StopLicht = new Image();
}
StopLicht[0].src = ctx.drawImage(image, 64, 8,8,8,80, 0,8,8);
StopLicht[1].src = ctx.drawImage(image, 72, 8,8,8,88, 0,8,8);
StopLicht[2].src = ctx.drawImage(image, 80, 8,8,8,80, 8,8,8);
StopLicht[3].src = ctx.drawImage(image, 88, 8,8,8,88, 8,8,8);

document.write(StopLicht)[/JS]


Ik heb een kleine 250 regels waarmee ik stukjes uit een sprite-sheet haal. 4 van de stukjes, als voorbeeld, haal ik eruit en
vormen samen een "nieuw" image het stoplicht.

Het stuk HTML code dat je als laatste hebt toegevoegd had ik al. Sorry voor de tijd die je er in heb gestopt maar het is nog niet wat ik zoek (of ik snap e.e.a. niet) ben een echte beginner.
Wat ik zoek is:
De vier image stukjes die samen een deel van het stoplicht vormen als een nieuwe image weergeven.
Ik kan dan met een of twee regels het array stoplicht weergeven op het scherm omdat het stoplicht op verschillende plekken moet komen en ik dan niet telkens alle regels hoef te gebruiken.
 
Nee dat is niet erg, ik leg het graag uit.

Javascript is een object georienteerde taal (functies, arrays etc zijn objecten).
Je kan objecten in een object stoppen, dat is wat we net deden met StopLicht.

Dat betekent dat ze eigenschappen (properties) hebben (als we het even bij plaatjes houden) zoals hun breedte, hoogte, url (src) enz.
Deze kan je wijzigen, inzien, en aan een ander object of variabele doorgeven. Bijvoorbeeld de hoogte van plaatje is plaatje.height

Ze hebben ook opdrachten (methods), deze zijn een instructie om iets te doen. Zo is ctx.drawImage(image, 88, 8,8,8,88, 8,8,8) een instructie om op het object ctx te tekenen met de bevelen die tussen de haakjes () gegeven worden.

Daarom werkte je code ook niet.

Mijn code hierboven werkte door enkele typfouten niet :confused:

De goede code is http://phpfiddle.org/api/run/2hm-i2r

HTML: 
<!DOCTYPE html>
<html>
<body>
 
<p>Image to use:</p>
<img id="sprite-sheet" src="http://i.imgur.com/Xaimq9t.png" alt="image" width="220" height="277" style="border:1px solid #d3d3d3;">
 <p> Canvas</p>

<canvas id="myCanvas" width="512" height="380" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
 
 

<script>
 
      var canvas = document.getElementById('myCanvas');
      var ctx = canvas.getContext('2d');
	var image = document.getElementById("sprite-sheet"); 
	     image.onload = function() {
    //rij x groen stoplicht
 
ctx.drawImage(image, 64, 8,8,8,80, 0,8,8);
ctx.drawImage(image, 72, 8,8,8,88, 0,8,8);
ctx.drawImage(image, 80, 8,8,8,80, 8,8,8);
ctx.drawImage(image, 88, 8,8,8,88, 8,8,8);
	}
 
  
</script>
 
</body>
</html>
 
Laatst bewerkt:
Ik snap het nog niet ;-(

Dag,
Ik begrijp e.e.a. nog niet.
Mijn code hieronder werkt.
Hoe geef ik deze functie een naam "StopLicht"
Hoe roep ik de functie StopLicht aan en plaats ik die elders op het canvas?

[JS]
!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="sprite-sheet" src="logi-test.bmp" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="512" height="380" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>



<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById("sprite-sheet");
onload = function () {
//rij x groen stoplicht
ctx.drawImage(img, 64, 8,8,8,80, 0,8,8);
ctx.drawImage(img, 72, 8,8,8,88, 0,8,8);
ctx.drawImage(img, 80, 8,8,8,80, 8,8,8);
ctx.drawImage(img, 88, 8,8,8,88, 8,8,8);
ctx.drawImage(img, 96, 8,8,8,80,16,8,8);
ctx.drawImage(img,104, 8,8,8,88,16,8,8);

}
</script>

</body>
</html>[/JS]
 

Bijlagen

Vervang onload = function () door function Stoplicht(). Als je een knop ervoor wilt maken moet je een button in je html zetten.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan