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

如您所见,我尝试在画布中旋转图像: 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/

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

// 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轴顺时针90deg的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我们需要找到线CE和CF的长度.Ih和Iw是图像高度和宽度的一半.

从画布中我们计算出线条CB的长度,它是画布高度(ch)和宽度(cw)平方的一半之和的平方根.

然后我们需要角度A,它是(ch)/长度线CB的acos

现在我们有角度A,我们可以计算出角度A1和A2.现在我们有一个长度CB和角度A1,A2我们可以解决CE和CF的直角三角形CEB和CFB.其中CE =长度CB*cos(A1)和CF =长度CB*cos(A2)

然后得到图像高度的标度,长度CE除以Ih,CE除以Iw.由于图像方面可能与我们需要拟合的矩形不匹配,我们需要保持两个比例的最大值.

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

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

然后它只是创建矩阵和绘制图像的问题.

在演示中,我添加了两个Boxes.在红,蓝的是画布轮廓的一半大小的副本和蓝红是成功的一半大小的图像.我这样做,你可以看到为什么图像缩放在旋转时不平滑.

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

查看新功能的演示代码.

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