Jak uniknąć obcinania obrazu przy obrocie o <canvas>?

Po obróceniu obrazu za pomocą kanwy, zostanie odcięty - jak tego uniknąć? Zrobiłem już element canvas większy niż obrazek, ale wciąż odcina on krawędzie.Jak uniknąć obcinania obrazu przy obrocie o <canvas>?

przykład:

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

Źródło

2008-12-13 Tom

obrotów zawsze występują wokół aktualnej pochodzenia. Więc możesz chcieć użyć translate first, aby przetłumaczyć płótno do położenia, wokół którego chcesz obrócić (powiedzmy środek), a następnie obrócić.

np.

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

Płótno obraca się teraz (85, 85).

Źródło

2008-12-13 14:53:37

Oprócz obracanie płótna przed obróceniem, trzeba będzie użyć „przetłumaczyć” ponownie tuż przed umieszczając wizerunek, tak jak poniżej:

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

a potem po prostu przed dodaniem użyć obrazu tłumaczyć ponownie

ctx.translate(-85, -85);

Spowoduje to przesunięcie współrzędnej (0,0) obiektu ctx.drawImage (img, 0,0, 10, 10) z powrotem do oczekiwanej współrzędnej 0,0 urządzenia CANVAS.

Źródło

2009-06-18 22:15:56

lub po prostu zawierać zapisać i przywrócić funkcje w płótnie

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

Jeśli chcesz obracać wokół osi obiektów narysowanych byś przełożyć przez obiekty x oraz y miejscu lokalizacji. Następnie podczas tworzenia obiektu jego położenie x byłoby ujemne o połowę szerokości, a y byłby ujemną o połowę wysokością.

Przykład:

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

Nadzieja to pomaga ktoś :)

Źródło

2009-06-21 23:33:08

I stworzył kompletną funkcję, która organizuje obrazu w zależności od kąta i pozycji

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

Źródło

2011-11-22 11:50:25 luhuiya

Jak uniknąć obcinania obrazu przy obrocie o <canvas>?

Odpowiedz

Powiązane problemy