Come evitare di taglio dell'immagine con

https://stackoverflow.com/questions/365284

21-08-2019
|

Domanda

Quando si ruota un'immagine utilizzando tela, otterrà tagliato fuori - Come evitare questo? Ho già fatto l'elemento di tela più grande, allora l'immagine, ma è ancora tagliare i bordi.

Esempio:

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

Soluzione

La rotazione avviene sempre intorno all'origine corrente. Così si potrebbe desiderare di utilizzare tradurre prima di tradurre il disegno fino alla posizione attorno alla quale si desidera ruotare (dire che il centro) quindi ruotare.

per es.

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

La tela ruota ora intorno (85, 85).

Altri suggerimenti

Oltre alla rotazione della tela prima di rotazione, è necessario utilizzare il "tradurre" di nuovo poco prima di mettere l'immagine, in questo modo:

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

E poi appena prima di aggiungere l'uso dell'immagine tradurre nuovamente

ctx.translate(-85, -85);

Questo sposterà il (0,0) coordinate ctx.drawImage (IMG, 0,0,10,10) torna l'atteso 0,0 coordinata del CANVAS.

o semplicemente includere le funzioni di salvataggio e ripristino in canvas

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

Se volete ruotare attorno agli oggetti disegnati asse che si traduce dal oggetti x posizione e la posizione y. Poi, quando si crea l'oggetto sua posizione x sarebbe metà negativa sua larghezza e la y sarebbe metà negativa sua altezza.

Esempio:

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();

Spero che questo aiuti qualcuno:)

ho creato una funzione completo che organizza l'immagine secondo l'angolazione e la posizione

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/>
        }

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow

Come evitare di taglio dell'immagine con ruotare?

Come evitare di taglio dell'immagine con