Cómo evitar la imagen de corte con <canvas> gire?

StackOverflow https://stackoverflow.com/questions/365284

  •  21-08-2019
  •  | 
  •  

Pregunta

Al girar una imagen usando canvas, se le cortó - ¿cómo puedo evitar esto?Ya hice el elemento canvas más grande que la de la imagen, pero aún así el corte de los bordes.

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>
¿Fue útil?

Solución

La rotación siempre se producen en torno al origen actual. Así que es posible que desee utilizar traducir primero en traducir el lienzo a la posición en torno al cual desea girar (digamos el centro) y gire.

por ejemplo. 

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

El lienzo gira ahora alrededor de (85, 85).

Otros consejos

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 a continuación, justo antes de la adición de la utilización de la imagen de traducir de nuevo 

ctx.translate(-85, -85);

Esto moverá el (0,0) de coordenadas de ctx.drawImage (img, 0,0,10,10) de nuevo al 0,0 esperado coordenada del lienzo.

o simplemente incluir 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. Entonces al crear el objeto su x ubicación sería medio negativo su anchura y la Y sería la mitad negativa de su altura.

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:)

creé 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/>
        }
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top