Làm thế nào để tránh cắt hình ảnh với <canvas> xoay?

Khi bạn xoay hình ảnh bằng canvas, nó sẽ bị cắt - làm thế nào để tránh điều này? Tôi đã làm cho phần tử canvas lớn hơn hình ảnh, nhưng nó vẫn cắt các cạnh.Làm thế nào để tránh cắt hình ảnh với <canvas> xoay?

Ví dụ:

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

Nguồn

2008-12-13 Tom

Rotation luôn xảy ra xung quanh nguồn gốc hiện hành. Vì vậy, bạn có thể muốn sử dụng dịch đầu tiên để dịch canvas đến vị trí mà bạn muốn xoay (nói trung tâm) rồi xoay.

ví dụ:

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

Bây giờ canvas xoay quanh (85, 85).

Nguồn

2008-12-13 14:53:37

Ngoài xoay canvas trước khi quay, bạn sẽ cần phải sử dụng "dịch" một lần nữa ngay trước khi đặt hình ảnh, như vậy:

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

Và sau đó chỉ cần trước khi thêm việc sử dụng hình ảnh dịch lại

ctx.translate(-85, -85);

Điều này sẽ di chuyển tọa độ (0,0) của ctx.drawImage (img, 0,0,10,10) về tọa độ 0,0 mong đợi của CANVAS.

Nguồn

2009-06-18 22:15:56

hoặc đơn giản là bao gồm lưu và khôi phục chức năng trong canvas

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

Nếu bạn muốn xoay xung quanh các đối tượng vẽ trục bạn sẽ dịch bởi các đối tượng x vị trí và y địa điểm. Sau đó, khi tạo đối tượng vị trí x của nó sẽ âm một nửa chiều rộng của nó và y sẽ là âm nửa chiều cao của nó.

Ví dụ:

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

Hy vọng điều này sẽ giúp người :)

Nguồn

2009-06-21 23:33:08

Tôi tạo ra một chức năng hoàn chỉnh sắp xếp hình ảnh theo góc độ và vị trí

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

Nguồn

2011-11-22 11:50:25 luhuiya

Làm thế nào để tránh cắt hình ảnh với <canvas> xoay?

Trả lời

Các vấn đề liên quan