Just nu i M3-nätverket
Gå till innehåll

Rotera bild i <canvas>


Alling

Rekommendera Poster

Jag utvecklar en webbapp i vilken man ska kunna bygga "kartor". För att man ska kunna sätta ut block åt vilket håll som helst måste man kunna rotera dem. Det görs i en <canvas>.

 

Canvasen är 64x64 pixlar i mitt exempel, men den kommer vara större sen. Dess storlek har ingen betydelse. Blockens storlek har däremot betydelse. Jag har lyckats få det att fungera när blocken är kvadratiska, men inte annars.

 

Jag har skapat en zip-fil med kod som jag tror gör det enklare att hjälpa mig: Klicka här för att ladda ner filen från filedropper.com

 

Blocket jag använder för att testa är 48x32 pixlar och ser ut så här:

 

fegayq.jpg

 

Den här bilden demonstrerar hur det ska fungera:

 

xbxw7a.jpg

 

Följande krav ska helst uppfyllas:

 

1. Bildens dimensioner måste vara variabler, eftersom olika block har olika storlek (dock alltid delbara med 16). Variablerna bWidth och bHeight innehåller alltid dimensionerna på det aktuella blocket. Dessa kan därför med fördel användas.

 

2. När man klickar på knappen #btn ska blocket roteras 90 grader. Man ska kunna fortsätta rotera blocket även efter ett varv.

 

3. Blocket måste alltid vara högst upp till vänster i canvasen. Hela blocket måste alltid synas.

Länk till kommentar
Dela på andra webbplatser

Jag har fått ett svar på det här problemet av en kompis. Men jag har kvar tråden eftersom någon annan kanske då kan få hjälp med sina canvas-problem. =)

 

<!DOCTYPE html>
<html>
<head>
<title>Canvas Rotate</title>
<style type="text/css">
#myCanvas {background-color:rgb(100,255,213);}
</style>
</head>
<body>

<canvas width="64" height="64" id="myCanvas"></canvas>
<br />
<br />
<input type="button" onclick="rotate();" value="Click here to rotate" id="btn" />

<script>
var currentRotation = 0;

//bx = blockets bredd
//by = blockets höjd

// Definiera ctx som contexten i canvasen:
var ctx = document.getElementById('myCanvas').getContext('2d');

var img = new Image();
// Ge img en adress (till testblocket):
img.src = "testblock.png";

function rotate() {
ctx.clearRect(0,0,64,64);
ctx.save();
if(currentRotation % 2 === 0) // Udda eller jämn
	ctx.translate(32,8);	// bx/2,by/2
else
	ctx.translate(8,32);	// by/2,bx/2
ctx.rotate((Math.PI/2)*currentRotation); // 90 grader = PI/2 (radianer)
ctx.drawImage(img,-32,-8);	// -bx/2,-by/2
ctx.restore();
currentRotation += 1;
currentRotation %= 4; // Kan vara 0, 1, 2 eller 3
};

// Rita img på canvasen när dokumentet har laddats (inkl. bilder):
window.onload = function() {
rotate();
};

</script>

</body>
</html>

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...