Cómo evitar el corte de imagen con <canvas> rotar?

Al rotar una imagen usando un lienzo, se cortará, ¿cómo puedo evitar esto? Ya hice el elemento de lona más grande que la imagen, pero aún está cortando los bordes.Cómo evitar el corte de imagen con <canvas> rotar?

Ejemplo:

<html> 
    <head> 
     <title>test</title> 
     <script type="text/javascript"> 
      function startup() { 
       var canvas = document.getElementById('canvas'); 
       var ctx = canvas.getContext('2d'); 
       var img = new Image(); 
       img.src = 'player.gif'; 
       img.onload = function() { 
        ctx.rotate(5 * Math.PI/180); 
        ctx.drawImage(img, 0, 0, 64, 120); 
       } 
      } 
     </script> 
    </head> 
    <body onload='startup();'> 
     <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas> 
    </body> 
</html>

Fuente

2008-12-13 Tom

rotación siempre se produce en torno al origen actual. Así que es posible que desee usar traducir primero para traducir el lienzo a la posición alrededor del cual desea rotar (digamos el centro) y luego girar.

p. Ej.

ctx.translate(85, 85); 
ctx.rotate(5 * Math.PI/180);

El lienzo ahora gira alrededor (85, 85).

Fuente

2008-12-13 14:53:37

además de girar el lienzo antes de girar, tendrá que utilizar el "traducen" de nuevo justo antes de la colocación de la imagen, así:

ctx.translate(85, 85); 
ctx.rotate(5 * Math.PI/180); // for 5 degrees like the example from Vincent

Y luego justo antes de la adición de la utilización de la imagen de traducir de nuevo

ctx.translate(-85, -85);

Esto moverá la coordenada (0,0) de ctx.drawImage (img, 0,0,10,10) a la coordenada 0,0 esperada de la LONA.

Fuente

2009-06-18 22:15:56

o simplemente incluyen las funciones de guardar y restaurar en la lona

ctx.save(); 
ctx.translate(85,85); 
ctx.rotate(5 * Math.PI/180); 
ctx.fillRect(10,10,10,10); 
ctx.restore();

Si desea rotar alrededor de los objetos dibujados eje se traduciría por la ubicación de objetos x e y ubicación. Luego, al crear el objeto, su ubicación x sería la mitad de su ancho negativo y la y sería la mitad de su altura negativa.

Ejemplo:

Square = { 
    x:10, 
    y:10, 
    width:10, 
    height:10, 
    angle:5 
} 
ctx.save(); 
ctx.translate(Square.x,Square.y); 
ctx.rotate(Square.angle * Math.PI/180); 
ctx.fillRect(-Square.width/2,-Square.height/2,Square.width,Square.height); 
ctx.restore();

Espero que esto ayude a alguien :)

Fuente

2009-06-21 23:33:08

he creado una función completa que organiza la imagen de acuerdo con el ángulo y la posición

function drawImage(myContext,imgSrc, x, y, size, rotate) {<br/> 
      var halfS = size/2;<br/> 
      var imageCursor = new Image();<br/> 
      imageCursor.src = imgSrc;<br/> 
      myContext.save();<br/> 
      var tX = x - halfS;<br/> 
      var tY = y - halfS;<br/> 
      myContext.translate(tX, tY);<br/> 
      myContext.rotate(Math.PI/180 * rotate);<br/> 
      var dX = 0, dY = 0;<br/> 
      if (rotate == 0) { dX = 0; dY = 0; }<br/> 
      else if (rotate > 0 && rotate < 90) { dX = 0; dY = -(size/(90/rotate)); }<br/> 
      else if (rotate == 90) { dX = 0; dY = -size; }<br/> 
      else if (rotate > 90 && rotate < 180) { dX = -(size/(90/(rotate - 90))); dY = -size; }<br/> 
      else if (rotate == 180) { dX = dY = -size; }<br/> 
      else if (rotate > 180 && rotate < 270) { dX = -size; dY = -size + (size/(90/(rotate - 180))); }<br/> 
      else if (rotate == 270) { dX = -size; dY = 0; }<br/> 
      else if (rotate > 270 && rotate < 360) { dX = -size + (size/(90/(rotate - 270))); dY = 0; }<br/> 
      else if (rotate == 360) { dX = 0; dY = 0; }<br/> 
      myContext.drawImage(imageCursor, dX, dY, size, size);<br/> 
      myContext.restore();<br/> 
     }

Fuente

2011-11-22 11:50:25 luhuiya

Cómo evitar el corte de imagen con <canvas> rotar?

Respuesta

Cuestiones relacionadas