Question

如您所见，我尝试在画布中旋转图像： https://jsfiddle.net/1a7wpsp8/4/

因为我在[0, image_height]周围旋转了图像，所以图像信息丢失了。 缺少部分头部，并且“画布”的高度现在变小，以显示整个旋转图像。

解决这个问题我想我必须将旋转原点更多地向右移动并增加画布高度。

我添加了一个方法来获取原点周围旋转点的特定角度：

function rotate(x, y, a) {
 var cos = Math.cos,
    sin = Math.sin,

    a = a * Math.PI / 180, 
    xr =  x * cos(a) - y * sin(a);
    yr =  x * sin(a) + y * cos(a);

 return [xr, yr];
}

我试着计算新的旋转原点，但失败了。

旋转图像的首选方法是什么？ 如何在画布上显示完整图像，没有红色边框？谢谢 https://jsfiddle.net/1a7wpsp8/4/

Answer 1

要旋转图像并对其进行缩放，以便在任何时候图像的边缘都不在画布边界内，您需要锻炼从画布中心到角落的距离。

// assuming canvas is the canvas and image is the image.
var dist = Math.sqrt(Math.pow(canvas.width/2,2)+Math.pow(canvas.height/2,2));

现在你需要找到从图像中心到最近边缘的距离;

var imgDist = Math.min(image.width,image.height)/2

现在我们获得了所需的信息，以便在画布中心绘制时，图像可以始终适合画布的最小比例。

var minScale = dist / imgDist;

现在围绕图像中心旋转，缩放并将其放置在画布的中心

首先计算像素顶边（X轴）的方向和大小

// ang is the rotation in radians
var dx = Math.cos(ang) * minScale;
var dy = Math.sin(ang) * minScale;

然后创建变换矩阵，其中前两个数字是X轴，后两个是从X轴顺时针90度的Y轴，最后两个是从画布原点到画布像素坐标的原点左上角。

// ctx is the canvas 2D context
ctx.setTransform(dx, dy, -dy, dx, canvas.width / 2, canvas.height / 2);

现在将图像偏移高度和宽度的一半。

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

最后一件事就是恢复默认转换

ctx.setTransform(1,0,0,1,0,0);

你已经完成了。

作为一项功能

// ctx is canvas 2D context
// angle is rotation in radians
// image is the image to draw
function drawToFitRotated(ctx, angle, image){
    var dist = Math.sqrt(Math.pow(ctx.canvas.width /2, 2 ) + Math.pow(ctx.canvas.height / 2, 2));
    var imgDist = Math.min(image.width, image.height) / 2;
    var minScale = dist / imgDist;
    var dx = Math.cos(angle) * minScale;
    var dy = Math.sin(angle) * minScale; 
    ctx.setTransform(dx, dy, -dy, dx, ctx.canvas.width / 2, ctx.canvas.height / 2);
    ctx.drawImage(image, -image.width / 2, - image.height / 2);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
}

<强>更新由于这是一个有趣的问题，我看看是否可以找出如何最好地适应旋转的图像，确保图像始终填充画布，而且还显示了尽可能多的图像。解决方案意味着当图像旋转时，刻度会发生变化，并且由于边缘到达角落，刻度有4个点，突然停止缩小并再次开始生长。然而，这对于旋转但需要填充画布的静态图像很有用。

描述这个的最好方法是用图片图像为绿色，画布为红色。图像的旋转是角度R我们需要找到线C-E和C-F的长度。 Ih和Iw是图像高度和宽度的一半。

从画布中我们计算出C-B线的长度，它是画布高度（ch）和宽度（cw）平方的一半之和的平方根。

然后我们需要角度A，它是（ch）/长度线C-B

的acos

现在我们有了角度A，我们可以计算出角度A1和A2。现在我们有一个长度C-B和角度A1，A2我们可以解决C-E和C-F的直角三角形C-E-B和C-F-B。其中C-E =长度C-B * cos（A1）和C-F =长度C-B * cos（A2）

然后得到图像高度的标度，其长度为C-E除以Ih和C-E除以Iw。由于图像方面可能与我们需要拟合的矩形不匹配，我们需要保持两个比例的最大值。

所以我们最终得到一个适合的尺度。

还有一个问题。数学在0到90度的角度下工作正常，但其余部分则失败。幸运的是，每个象限的问题都是对称的。对于角度＆gt; 180我们镜像并向后旋转180°然后对于角度＆gt; 90＆lt; 180我们反转并向后旋转90度。我在演示中以弧度完成所有操作。我们还确保给定的角度始终在0 - 360（0到Math.PI * 2）的范围内。

然后只需创建矩阵并绘制图像。

在演示中我添加了两个Box。 ~~red~~ BLUE 1是画布轮廓的半尺寸副本， ~~Blue~~ RED是半尺寸的图像。我这样做是为了你可以看到为什么图像缩放在旋转时不平滑。

我会为自己保留这个功能，也是一个方便的功能。

查看新功能的演示代码。

＆＃13;

demo = function(){
    /** fullScreenCanvas.js begin **/
    var canvas = (function(){
        var canvas = document.getElementById("canv");
        if(canvas !== null){
            document.body.removeChild(canvas);
        }
        // creates a blank image with 2d context
        canvas = document.createElement("canvas"); 
        canvas.id = "canv";    
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight; 
        canvas.style.position = "absolute";
        canvas.style.top = "0px";
        canvas.style.left = "0px";
        canvas.style.zIndex = 1000;
        canvas.ctx = canvas.getContext("2d"); 
        document.body.appendChild(canvas);
        return canvas;
    })();
    var ctx = canvas.ctx;
    var image = new Image();
    image.src = "http://i.imgur.com/gwlPu.jpg";

    var w = canvas.width;
    var h = canvas.height;
    var cw = w / 2;  // half canvas width and height
    var ch = h / 2;
    // Refer to diagram in answer 
    function drawBestFit(ctx, angle, image){
        var iw = image.width / 2;  // half image width and height
        var ih = image.height / 2;
        // get the length C-B
        var dist = Math.sqrt(Math.pow(cw,2) + Math.pow(ch,2));
        // get the angle A
        var diagAngle = Math.asin(ch/dist);

        // Do the symmetry on the angle
        a1 = ((angle % (Math.PI *2))+ Math.PI*4) % (Math.PI * 2);
        if(a1 > Math.PI){
            a1 -= Math.PI;
        }
        if(a1 > Math.PI/2 && a1 <= Math.PI){
            a1 = (Math.PI/2) - (a1-(Math.PI/2));
        }
        // get angles A1, A2
        var ang1 = Math.PI/2 - diagAngle - Math.abs(a1);
        var ang2 = Math.abs(diagAngle - Math.abs(a1));
        // get lenghts C-E and C-F
        var dist1 = Math.cos(ang1) * dist;
        var dist2 = Math.cos(ang2) * dist;
        // get the max scale
        var scale = Math.max(dist2/(iw),dist1/(ih));
        // create the transform
        var dx = Math.cos(angle) * scale;
        var dy = Math.sin(angle) * scale; 
        ctx.setTransform(dx, dy, -dy, dx, cw, ch);
        ctx.drawImage(image, -iw, - ih);


        // draw outline of image half size
        ctx.strokeStyle = "red";
        ctx.lineWidth = 2 * (1/scale);
        ctx.strokeRect(-iw / 2, -ih / 2, iw, ih) 

        // reset the transform
        ctx.setTransform(1, 0, 0, 1, 0, 0);

        // draw outline of canvas half size
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 2;
        ctx.strokeRect(cw - cw / 2, ch - ch / 2, cw, ch) 

    }

    // Old function
    function drawToFitRotated(ctx, angle, image){
        var dist = Math.sqrt(Math.pow(cw,2) + Math.pow(ch,2));
        var imgDist = Math.min(image.width, image.height) / 2;
        var minScale = dist / imgDist;

        var dx = Math.cos(angle) * minScale;
        var dy = Math.sin(angle) * minScale; 
        ctx.setTransform(dx, dy, -dy, dx, cw, ch);
        ctx.drawImage(image, -image.width / 2, - image.height / 2);
        ctx.setTransform(1, 0, 0, 1, 0, 0);
    }      

    var angle = 0;
    function update(){  // animate the image
        if(image.complete){
            angle += 0.01;
            drawBestFit(ctx,angle,image);
        }
        
        // animate until resize then stop remove canvas and flag that it has stopped
        if(!STOP){
            requestAnimationFrame(update);
        }else{
           STOP = false;
           var canv = document.getElementById("canv");
           if(canv !== null){
              document.body.removeChild(canv);
           }
            
        }
        
    }
    update();
}
/** FrameUpdate.js end **/
var STOP = false;  // flag to tell demo app to stop 
// resize Tell demo to stop then wait for it to stop and start it again
function resizeEvent(){
    var waitForStopped = function(){
        if(!STOP){  // wait for stop to return to false
            demo();
            return;
        }
        setTimeout(waitForStopped,200);
    }
    STOP = true;
    setTimeout(waitForStopped,100);
}
// if resize stop demo and restart
window.addEventListener("resize",resizeEvent);
 // start demo
demo();

＆＃13;

Answer 2

这是一个用于图像旋转代码的小提琴:) http://jsfiddle.net/6ZsCz/1911/

HTML：

canvas id="canvas" width=300 height=300></canvas><br>
<button id="clockwise">Rotate right</button>
<button id="counterclockwise">Rotate left</button>

JS：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=0;
var height=0;
var diagonal = 0;
var angleInDegrees=0;
var image=document.createElement("img");
image.onload=function(){
    width = image.naturalWidth;
  height = image.naturalHeight;
 diagonal=Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
   ctx.canvas.height = diagonal;
  ctx.canvas.width = diagonal;
  ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(diagonal/2,diagonal/2);
    ctx.rotate(0);
    ctx.drawImage(image,-width/2,-height/2);
    ctx.restore();
}
image.src="http://i.imgur.com/gwlPu.jpg";

$("#clockwise").click(function(){ 
    angleInDegrees+=45;
    drawRotated(angleInDegrees);
});

$("#counterclockwise").click(function(){ 
    angleInDegrees-=45;
    drawRotated(angleInDegrees);
});

function drawRotated(degrees){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(diagonal/2,diagonal/2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-width/2,-height/2);
    ctx.restore();
}

CSS（画布背景）：

canvas{border:1px solid red;
background:red;border-radius:50%} // to see exectly centered :)

Answer 3

旋转图像的首选方法是什么？

将上下文坐标转换为中心，旋转，然后使用负偏移进行绘制，

ctx.save();
ctx.translate(width/2, height/2);
ctx.rotate(-40*Math.PI/180);
ctx.drawImage(img, -width/2, -height/2);
ctx.restore();

如何在画布上显示完整图像，没有红色边框？

要以任意旋转方式在画布中调整图像，您必须同时将宽度和高度（至少）C设为C=sqrt(width^2 + height^2)。转两个方向C/2。

Answer 4

要围绕中心旋转，您可以先将其平移到中心点，然后旋转，然后再将其平移。像这样：

ctx.translate(width/2, height/2);
ctx.rotate(-40*Math.PI/180);
ctx.translate(-width/2, -height/2);

＆＃13;

// Grab the Canvas and Drawing Context
var canvas = $('#c');
var ctx = canvas.get(0).getContext('2d');

//rotate point x,y around origin with angle a, get back new point 
function rotate(x, y, a) {
  var cos = Math.cos,
    sin = Math.sin,

    a = a * Math.PI / 180,
    xr = x * cos(a) - y * sin(a);
  yr = x * sin(a) + y * cos(a);

  return [xr, yr];
}

// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function() {
  var width = img.naturalWidth;
  var height = img.naturalHeight;

  canvas.attr('width', width);
  canvas.attr('height', height);

  //only to show that borders of canvas
  ctx.rect(0, 0, width, height);
  ctx.fillStyle = "red";
  ctx.fill();

  ctx.save();
  ctx.translate(width / 2, height / 2);
  ctx.rotate(-40 * Math.PI / 180); //comment this line out to see orign image
  ctx.translate(-width / 2, -height / 2);
  ctx.drawImage(img, 0, 0);
  ctx.restore();

}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

＆＃13;

body {
  background: #CEF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<canvas id="c"></canvas>

＆＃13;

Answer 5

Move centre of rotation to approximace centre of the Canvas: See the sourcecode for http://wisephoenix.org/html5/Rotation.htm Which is written in html5 and javascript.

旋转后，将图像绘制到正确的位置

5 个答案: