HTML Canvas: comment dessiner une image inversée/en miroir?

j'essaie de retourner / miroir une image que je peins sur une toile HTML; j'ai trouvé un tutoriel de jeu montrant une feuille de sprite par direction un personnage doit faire face, mais cela ne me semble pas tout à fait juste :( D'autant plus que chaque cadre a une taille différente.

dans certains moteurs de jeu (comme cocos2D), je me souviens avoir utilisé des méthodes comme "flipX" qui dessinerait simplement le "joueur" regardant dans la direction opposée (c'est ma cible, en essayant de faire quelque plateforme de base).

Ce qui serait la meilleure technique pour vous pour atteindre cet objectif?

j'ai essayé d'appeler le setScale(-1,1); sur ma toile, sans succès. Peut-être que ce n'est pas fait pour ça.

Merci :)

25
demandé sur Jem 2011-11-17 17:52:37
la source

3 ответов

  1. Vous pouvez le faire en transformant le contexte myContext.scale(-1,1) avant de dessiner votre image, mais

  2. Cela va ralentir votre jeu. C'est une meilleure idée d'avoir un sprite séparé, inversé.

22
répondu Phrogz 2011-11-17 17:57:07
la source

Vous devez définir l'échelle de la toile ainsi que l'inversion de la largeur.

la fonction ci-dessous est un extrait d'un de mes projets. Lorsque la fonction est appelée, elle prend une image d'une webcam nourrir, met sur la toile et d'inverser l'image horizontalement.

drawToCanvas : function(v, context, width, height){
    context.save();
    context.scale(-1,1);
    context.drawImage(v,0,0,width*-1,height);
    context.restore();
}

Il y a probablement des problèmes de performances avec cela, mais pour moi, ce n'était pas un problème.

18
répondu digitaltag 2016-07-27 13:18:05
la source

vous n'avez pas besoin de redessiner l'image entière lors de la création d'un reflet. Une réflexion originale montre tout simplement la partie inférieure de l'image. De cette façon, vous redessinez une petite partie de l'image qui offre de meilleures performances et vous n'avez pas besoin de créer un gradient linéaire pour cacher la partie inférieure de l'image (puisque vous ne la dessinez jamais).

 var img = new Image();
 img.src = "//vignette2.wikia.nocookie.net/tomandjerryfan/images/9/99/Jerry_Mouse.jpg/revision/latest?cb=20110522075610";
 img.onload = function() {
   var thumbWidth = 250;
   var REFLECTION_HEIGHT = 50;
   var c = document.getElementById("output");
   var ctx = c.getContext("2d");
   var x = 1;
   var y = 1;

	//draw the original image
   ctx.drawImage(img, x, y, thumbWidth, thumbWidth);
	ctx.save();
	//translate to a point from where we want to redraw the new image
   ctx.translate(0, y + thumbWidth + REFLECTION_HEIGHT + 10);
   ctx.scale(1, -1);
   ctx.globalAlpha = 0.25;
   
   //redraw only bottom part of the image
   //g.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
   ctx.drawImage(img, 0, img.height - REFLECTION_HEIGHT, img.width, REFLECTION_HEIGHT, x, y, thumbWidth, REFLECTION_HEIGHT);

   // Revert transform and scale
  ctx.restore();

 };
 body {
   background-color: #FFF;
   text-align: center;
   padding-top: 10px;
 }
<canvas id="output" width="500" height="500"></canvas>
1
répondu jerry 2017-06-03 22:35:08
la source

Autres questions sur