Wie Bild Cutoff mit

https://stackoverflow.com/questions/365284

21-08-2019
|

Frage

Wenn Sie ein Bild mit Leinwand drehen, wird es abgeschnitten werden - wie kann ich das vermeiden? Ich habe bereits das Canvas-Element größer dann das Bild, aber es ist immer noch die Ränder abgeschnitten wird.

Beispiel:

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

Lösung

Rotation entsteht immer dann, um den aktuellen Ursprung. So möchten Sie vielleicht zuerst verwenden, übersetzen die Leinwand in die Position zu übersetzen, um die Sie drehen möchten (etwa in der Mitte), dann drehen.

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

Die Leinwand jetzt dreht sich um (85, 85).

Andere Tipps

Neben der Leinwand rotierenden vor drehen, müssen Sie die „übersetzen“ wieder verwenden, kurz bevor das Bild platzieren, etwa so:

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

Und dann, kurz bevor das Bild Verwendung übersetzen erneut das Hinzufügen

ctx.translate(-85, -85);

Dies wird die (0,0) bewegt Koordinate ctx.drawImage (img, 0,0,10,10) zurück zu dem erwarteten 0,0-Koordinate der Leinwand.

oder einfach schließt die Sicherungs- und Wiederherstellungsfunktionen in Leinwand

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

Wenn Sie rund um die gezeichneten Objekte drehen möchten Achse, die Sie durch die Objekte x-Position und y-Position übersetzen würde. Dann, wenn das Objekt seine Position x zu schaffen wäre negative Hälfte seiner Breite und die y würde negative Hälfte seiner Höhe sein.

Beispiel:

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

Hope, das hilft jemand:)

habe ich eine vollständige Funktion, die das Bild anordnet entsprechend den Winkel und die Position

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

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow

Wie Bild Cutoff mit vermeiden drehen?

Wie Bild Cutoff mit