Come posso ridimensionare/allungare/inclinare uno sprite da un foglio sprite con javascript?

Alcuni background: Sto facendo un raycaster, beh ... stava facendo. Ma ho deciso di cambiare un po '. Ho iniziato a creare il ray caster e ho deciso che sarebbe stato molto più semplice visualizzare semplicemente un'icona e allungarla/inclinarla invece di spostarsi di un mucchio di pixel.Come posso ridimensionare/allungare/inclinare uno sprite da un foglio sprite con javascript?

La mia domanda è: Come posso scalare/stretch/inclinare un folletto da un foglio sprite con javascript?

Fondamentalmente voglio ottenere un'immagine 16px per 16px da un'immagine sprite e posizionarla, ridimensionarla, girarla e inclinarla con javascript. Come dovrei fare per farlo?

Se questo aiuta, stavo pensando di collegare tre versioni di quell'immagine per dargli l'impressione di un blocco 3D che si muove in uno spazio 3D senza effettivamente usare il 3D.

fonte

2011-12-09 Tgwizman

È possibile farlo con CSS3 transform. Oppure usa un elemento canvas nascosto, applica uno transformation e poi lo disegna sull'area di disegno principale.

fonte

2011-12-09 19:40:38 Prusse

È possibile eseguire questa operazione utilizzando la funzione drawImage su un'area di disegno. L'esempio seguente ridimensiona uno sprite 40x100 per raddoppiare la dimensione 80x200.

<html> 
    <body> 
    <canvas id="canvas" width=80 height=200> 
    <script language="JavaScript">    
     function draw() { 
      var ctx = document.getElementById('canvas').getContext('2d'); 
      var img = new Image(); 
      img.src = 'http://gamemedia.wcgame.ru/data/2011-07-17/game-sprite-sheet.jpg'; 
      img.onload = function() { 
       // (image, sx, sy, sw, sh, dx, dy, dw, dh) 
       ctx.drawImage(img,0,0,40,100,0,0,80,200); 
      } 
     } 

     draw(); 

    </script> 
    </body>   
</html>

fonte

2011-12-09 19:35:15 Alex

In realtà non ho mai preso in considerazione la tela! Grazie! : D – Tgwizman

Molto probabilmente il modo più semplice è utilizzare la proprietà css background-size. Come la maggior parte dei browser moderni (IE 9+, FF4 +, Safari4 +, Chrome3 +) sostenerlo è possibile effettuare le seguenti operazioni:

html:

<div id="mySprite"> 
</div>

css:

#mySprite{ 
    height: 80px; /* 64px * 1.25 */ 
    width: 80px; /* 64px * 1.25 */ 
    background-image:url(my.png); 
    background-position: -0px -560px; /* pick specific one at -448px * 1.25 */ 
    background-size:640px 640px; /* scale image to 512px * 1.25 */ 
}

Lo spritesheet ha sprite con misura 64x64px su di esso e ridimensiona a 80x80px. Vedere esempio diretta qui: http://jsfiddle.net/Zgr5w/1/

Come @Prusse detto: è possibile utilizzare anche transform: scale() ma presenta alcuni inconvenienti: il supporto del browser, ulteriore trasformazione posizione, l'allineamento con altri elementi può essere rotto:

#mySprite{ 
    height: 64px; 
    width: 64px; 
    background-image:url(my.png); 
    background-position: -0px -448px; 
    transform:scale(1.25); 
    /* additional to compensate the position shift */ 
    position:relative; 
    top:10px; 
    left:10px; 
}

vedi esempio dal vivo dei due precedenti approcci qui: http://jsfiddle.net/Zgr5w/1/

fonte

2013-01-02 22:42:43 stot

ottima risposta, e i tuoi commenti nell'esempio uno sono molto utili. – jedierikb

Come posso ridimensionare/allungare/inclinare uno sprite da un foglio sprite con javascript?

risposta

Problemi correlati