Wie vermeidet man Bildabschaltung mit <canvas> drehen?

Wenn Sie ein Bild mit Canvas drehen, wird es abgeschnitten - wie vermeide ich das? Ich habe das Canvas Element schon größer gemacht als das Bild, aber es schneidet immer noch die Kanten ab.Wie vermeidet man Bildabschaltung mit <canvas> drehen?

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>

Quelle

2008-12-13 Tom

Rotation immer um den aktuellen Ursprung auftreten. Vielleicht möchten Sie zuerst übersetzen, um die Leinwand an die Position zu verschieben, um die Sie drehen möchten (etwa die Mitte), und dann drehen.

z.B.

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

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

Quelle

2008-12-13 14:53:37

Zusätzlich vor Drehen der Leinwand zu drehen, müssen Sie die „übersetzen“ wieder vor der Platzierung des Bildes nur verwenden, etwa so:

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

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

ctx.translate(-85, -85);

Dies wird die (0,0) Koordinate von ctx.drawImage (img, 0,0,10,10) zurück auf die erwartete 0,0-Koordinate des CANVAS verschieben.

Quelle

2009-06-18 22:15:56

oder einfach schließen 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 erstellt wird, wäre seine x-Position die negative Hälfte seiner Breite und die y wäre die negative Hälfte ihrer Höhe.

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 this jemand hilft :)

Quelle

2009-06-21 23:33:08

ich eine komplette Funktion geschaffen, die entsprechend dem Winkel und Position des Bildes ordnet

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

Quelle

2011-11-22 11:50:25 luhuiya

Wie vermeidet man Bildabschaltung mit <canvas> drehen?

Antwort

Verwandte Themen