3

我有一个 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();
      }
4

3 回答 3

4

如果您旋转图像，您可以重新计算包含它所需的边界框。

在此处输入图像描述在此处输入图像描述

此代码将采用宽度/高度/旋转角度并返回新的边界框大小：

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>
于 2013-10-22T16:38:58.403 回答
3

问题

您面临两个问题：

  1. 画布中没有足够的空间进行旋转
  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的结果在这里：

旋转矩形的边界

于 2013-10-22T23:07:00.847 回答
1

改变drawImage的参数

ctx.drawImage(image, -image.width / 2, -image.height/ 2);
于 2013-10-22T14:02:32.663 回答