jquery - キャンバスで回転した後の画像のトリミング

Question

私はhtml5キャンバスを持っています。キャンバスに画像を描画/回転させたいのですが、画像のサイズが変わりません.画像のサイズに基づいてキャンバスの幅/高さを設定しました.画像を回転させるのに問題があります.َ 画像を回転させた後、赤い三角形が切り取られました. . 以下のリンクは、これを問題として示している例です。助けてください。 http://jsfiddle.net/zsh64/6ZsCz/76/

 var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var angleInDegrees = 0;
      var image = document.createElement("img");
      image.onload = function () {
          canvas.width = image.width;
          canvas.height = image.height;
          ctx.drawImage(image, 0,0);
      };
      image.src = "Images/rotate.png";
      $("#R").click(function () {
          angleInDegrees += 90;
          drawRotated(angleInDegrees);
      });
      $("#L").click(function () {
          angleInDegrees -= 90;
          drawRotated(angleInDegrees);
      });
      function drawRotated(degrees) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.save();
          ctx.translate(canvas.width / 2, canvas.height / 2);
          ctx.rotate(degrees * Math.PI / 180);
          ctx.drawImage(image, -image.width / 2, -image.width / 2);
          ctx.restore();
      }

score 4 · Accepted Answer

画像を回転すると、その画像を含めるために必要な境界ボックスを再計算できます。

ここに画像の説明を入力

このコードは、幅/高さ/回転角度を受け取り、新しいバウンディングボックスのサイズを返します。

function newSize(w,h,a){
    var rads=a*Math.PI/180;
    var c = Math.cos(rads);
    var s = Math.sin(rads);
    if (s < 0) { s = -s; }
    if (c < 0) { c = -c; }
    size.width = h * s + w * c;
    size.height = h * c + w * s ;
}

ここにコード例とフィドルがあります: http://jsfiddle.net/m1erickson/h65yr/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <style>
        #containerDiv{
          border: 1px solid red;
          position:absolute;
          top:100px;
          left:100px;
        }
        #canvas{
          border: 1px solid green;
        }
    </style>
    <script>

$(function(){
         var canvas=document.getElementById("canvas");
         var ctx=canvas.getContext("2d");
         var imgWidth=200;
         var imgHeight=300;
         var size={width:imgWidth, height:imgHeight};
         var rotation=0;
         var deg2Rad=Math.PI/180;
         var count1=0;
         var count2=0;

          var img=new Image();
          img.onload=function(){
              imgWidth=img.width;
              imgHeight=img.height;
              size={width:imgWidth, height:imgHeight};
              draw();
          }
          img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/Rotate.png";

      function draw(){
         canvas.width=size.width;
         canvas.height=size.height; 

         // calculate the centerpoint of the canvas
         var cx=canvas.width/2;
         var cy=canvas.height/2;
         var info=document.getElementById("info");
         info.innerHTML="canvas size: "+(count1++)+": "+cx+" / "+cy;

         // draw the rect in the center of the newly sized canvas
         ctx.clearRect(0,0,canvas.width,canvas.height);
         ctx.fillStyle="rgba(216,216,150,1.0)";
         ctx.translate(cx,cy);
         ctx.rotate(rotation * deg2Rad);
         ctx.drawImage(img,-imgWidth/2,-imgHeight/2);
      }

      document.getElementById("rotate").addEventListener("click", rotateClicked, false);

      function rotateClicked(e){
        rotation+=30;
        draw();
      }

      document.getElementById("resize").addEventListener("click", resizeClicked, false);

      function resizeClicked(e){
        rotation+=30;
        newSize(imgWidth,imgHeight,rotation);
        draw();
      }

      function newSize(w,h,a){
        var rads=a*Math.PI/180;
        var c = Math.cos(rads);
        var s = Math.sin(rads);
        if (s < 0) { s = -s; }
        if (c < 0) { c = -c; }
        size.width = h * s + w * c;
        size.height = h * c + w * s ;
    }

});

    </script>

</head>

<body>
<button id="rotate">Rotate without resize</button>
<button id="resize">Resize with resize</button>
<p id=info></p>

<div id="containerDiv">
    <canvas id="canvas" width=400 height=400></canvas>
</div>

</body>
</html>

score 3 · Accepted Answer

問題

あなたが直面している2つの問題があります：

キャンバスに回転を行うための十分なスペースがありません
画像の中心ではなく、回転の中心に画像を描画しています

ソリューション

キャンバスのサイズを適切に設定するには、回転した長方形の最大境界を使用できます。この境界を見つけるには、次の 2 つのいずれかを実行できます。

90 度ずつ回転するだけの場合:

var length = Math.max(img.width, img.height);

自由な角度を使用する場合:

var length = Math.sqrt(img.width * img.width + img.height * img.height);

次に、これらの結果のいずれかを使用して、キャンバスのサイズを設定します。

canvas.width = canvas.height = length; /// both has same length

次に、画像を適切に描画します。画像は常に左上隅から描画されるため、回転後は元に戻す必要があります。

var pivot = length * 0.5;

ctx.save();
ctx.translate(pivot, pivot);
ctx.rotate(degrees * Math.PI / 180);
ctx.drawImage(image, -image.width * 0.5, -image.height * 0.5);
ctx.restore();

ここでは画像がキャンバスとは異なるサイズになるため、画像のピボットを使用して元に戻すことが重要です。

このLIVE DEMOの結果は次のとおりです。

回転した四角形の境界

score 1 · Accepted Answer

1

drawImageのパラメータを変更

ctx.drawImage(image, -image.width / 2, -image.height/ 2);

于 2013-10-22T14:02:32.663 に答える

jquery - キャンバスで回転した後の画像のトリミング

3 に答える 3

問題

ソリューション

Related

Reference