Estoy desarrollando un juego con el elemento canvas de HTML5 y javascript nativas. Tengo diferentes sprites para los objetos del juego. Es posible rotar los sprites usando nativos de javascript?

Por ejemplo, tengo un sprite imagen como esta:

Cómo girar la Imagen utilizando el lenguaje javascript

Yo uso Imagen para este sprite:

var image = new Image(...);

image.src = "...";

Después de cargar me desea girar la imagen y guardar diferentes proyecciones en variables locales:

var sprite_left = rotate(image, 0),
    sprite_top = rotate(image, 90),
    sprite_right = rotate(image, 180),
    sprite_right = rotate(image, 270);

La rotación de la función debe tener este aspecto:

function rotate(sourceImage, angle){
...
}

Podría nadie me ayudan a escribir la función de rotar?

EDICIÓN:

He decidido compartir mi código, que he utilizado para poner a prueba mis sprites:

    var wait = function (image, completed, count) {
if (count == null) count = 0;
if (!image.complete && count < 1000) {
count++;
window.setTimeout(function () {
wait(image, completed, count);
console.log('waiting...');
}, 10);
}
else {
completed();
}
},
rotateW = function (image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var p = document.createElement("p");
p.innerText = "W: ";
p.appendChild(canvas);
document.body.appendChild(p);
var context = canvas.getContext("2d");
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(Math.PI);
context.translate(-canvas.width / 2, -canvas.height / 2);
context.drawImage(image, 0, 0);
var newImage = new Image();
newImage.src = canvas.toDataURL("image/png");
return newImage;
},
rotateE = function (image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var p = document.createElement("p");
p.innerText = "E: ";
p.appendChild(canvas);
document.body.appendChild(p);
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
var newImage = new Image();
newImage.src = canvas.toDataURL("image/png");
return newImage;
},
rotateS = function (image, frameCount) {
var canvas = document.createElement("canvas");
canvas.width = image.height * frameCount;
canvas.height = image.width / frameCount;
var p = document.createElement("p");
p.innerText = "S: ";
p.appendChild(canvas);
document.body.appendChild(p);
var context = canvas.getContext("2d");
context.translate(image.height / 2, image.width / (2 * frameCount));
context.rotate(Math.PI / 2);
var i = frameCount;
while (i--> 0) {
context.drawImage(image, - image.width / 2 , - ( 0.5 + i ) * image.height);
}
var newImage = new Image();
newImage.src = canvas.toDataURL("image/png");
return newImage;
},
rotateN = function (image, frameCount) {
var canvas = document.createElement("canvas");
canvas.width = image.height * frameCount;
canvas.height = image.width / frameCount;
var p = document.createElement("p");
p.innerText = "N: ";
p.appendChild(canvas);
document.body.appendChild(p);
var context = canvas.getContext("2d");
context.translate(image.height / 2, image.width / (2 * frameCount));
context.rotate( 3 * Math.PI / 2);
var i = frameCount;
while (i-- > 0) {
context.drawImage(image, -image.width / 2, (frameCount - i - 1.5) * image.height);
}
var newImage = new Image();
newImage.src = canvas.toDataURL("image/png");
return newImage;
};
/*
N
|
W----O----E
|
S
*/
getSprites = function (image, frameCount) {
var sprite = {
N: rotateN(image, frameCount),
S: rotateS(image, frameCount),
W: rotateW(image, frameCount),
E: rotateE(image, frameCount)
};
return [      
sprite.W, //left
sprite.N, //up
sprite.E, //right
sprite.S] //down
};
$.sprite = {
register: function (options) {
var image = new Image();
image.src = options.src;
wait(image, function () {
var sprites = getSprites(image, options.frameCount);
});
}
};

El resultado final es:

Cómo girar la Imagen utilizando el lenguaje javascript

  • Utilizar CSS en lugar de <img>, el uso de un <canvas>.
  • El uso de CSS o <lienzo> podría conducir a problemas de rendimiento 🙁
  • Cómo sobre el uso de un <canvas> para pre-procesamiento de las diferentes rotaciones, entonces el almacenamiento de estos en la memoria utilizando toBlob, la conversión de estos blobs para las direcciones Url con window.URL.createObjectURL y, a continuación, intercambiar direcciones url como se desee. (consulte developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement por la tela de las opciones)
  • Suena muy bien!
InformationsquelleAutor Warlock | 2013-08-03

4 Comentarios

  1. 2
    1. Utilizar un <canvas> para pre-procesamiento de las diferentes rotaciones
    2. Almacenan en la memoria utilizando a través de toBlob, opcionalmente, la conversión de estos blobs para las direcciones Url con window.URL.createObjectURL
    3. De intercambio de direcciones Url como se desee.

    Ver este MDN página de lienzo opciones

  2. 3

    la siguiente función de crear un nuevo Lienzo fuera
    de img (que podría ser una imagen o un lienzo).
    Darle un ángulo en radianes, o ‘N’, ‘S’, ‘W’ para
    la rotación correspondiente.

    function createRotatedImage(img, angle) {
    angle = (angle == 'N') ?  -Math.PI/2 :
    (angle == 'S') ?   Math.PI/2 :
    (angle == 'W') ?   Math.PI   :
    angle ;    
    var newCanvas = document.createElement('canvas');
    newCanvas.width  = img.width  ;
    newCanvas.height = img.height ;
    var newCtx = newCanvas.getContext('2d') ;
    newCtx.save      () ;
    newCtx.translate ( img.width / 2, img.height / 2) ;
    newCtx.rotate  (angle);
    newCtx.drawImage ( img, - img.width / 2, - img.height / 2) ; 
    newCtx.restore   () ;
    }
  3. 1

    Absolutamente! No es tan simple como girar la imagen, sin embargo. Usted necesita para girar el contexto de la tela y dibujar la imagen en el girado contexto, y luego restaurarlo.

    context.save();
    context.rotate(angle);
    //DRAW IT!
    context.restore();
    • Creo que el OP quiere que cada parte de la imagen para ser rotado & guardado antes de la representación en la lona…
  4. 1

    Acerca de cómo tener una función como :

    Image.prototype.rotate = function(angle) {
    var c = document.createElement("canvas");
    c.width = this.width;
    c.height = this.height;    
    var ctx = c.getContext("2d");    
    ctx.rotate(angle);
    var imgData = ctx.createImageData(this.width, this.height);
    ctx.putImageData(imgData);
    return new Image(imgData);
    }
    var img1 = new Image();
    var img2 = img1.rotate(90);

    Por supuesto es sólo una muestra rápida para dar una idea.

    • creo que quiso decir ctx.putImageData(este), y sólo después de recuperar el imageData. Pero, de hecho, acaba de regresar a la lona está bien, ya que putImage funciona incluso más rápido con un lienzo que con una imagen.

Dejar respuesta

Please enter your comment!
Please enter your name here