javascript - Canvas 图像旋转、动态 Canvas 调整大小 - 图像被裁剪

Question

我通过使用 Canvas 旋转()函数拖动来旋转图像。显然图像在旋转过程中被剪切。

为了解决这个问题，我遵循了一些stackoverflow instructions并实现了这样的东西:

//Resizing Canvas - this part is creating problem
var w = imgW;
var h = imgH;

var newWidth,newHeight;
var c = Math.cos(15*rot*0.0174532925);
var s = Math.sin(15*rot*0.0174532925);

if (s < 0) { s = -s; }
if (c < 0) { c = -c; }
newWidth = h * s + w * c;
newHeight = h * c + w * s ;

cnv2.width = newWidth;
cnv2.height= newHeight;

translateX = cnv2.width/axisFactor;
translateY = cnv2.height/axisFactor
ctx2.clearRect(0,0,cnv2.width,cnv2.height);
ctx2.save();
ctx2.translate(translateX,translateY);
ctx2.rotate(15*rot*0.0174532925);
ctx2.drawImage(img,-translateX,-translateY);
ctx2.restore();

尽管我能够获得正确的 Canvas 大小，但图像的重绘仍然会被剪切。

我错过了什么？

这是 fiddle :http://jsfiddle.net/anubhabB/wwas5jag/

编辑:通过更正解决问题

ctx2.drawImage(img,-translateX,-translateY);

与

ctx2.drawImage(img,-img.width/axisFactor,-img.height/axisFactor);

但这不适用于任何不是图像 1/2 的轴，例如轴系数 3!

如何解决这个问题？

Answer 1

下面的评论是关于我的第一次编辑，这不是OP想要解决的问题。

编辑 我误解了这个问题并提供了一些不是好的解决方案。新尝试:

此 fiddle 将 Canvas 大小重新调整为自由旋转图像而无需裁剪所需的最大宽度/高度。但 Canvas 只调整一次大小。旋转轴位于 Canvas 的中心，图像移动到与 axisFactor 点处的旋转轴重合。

我希望这可以完全或部分解决您的问题。

http://jsfiddle.net/Niddro/wwas5jag/8/

var cntx = document.getElementById('cnvSampl').getContext('2d');
cntx.fillStyle = '#fc0';
cntx.fillRect(0,0,95,95);
var canv = document.getElementById('cnv');
var ctx  = canv.getContext('2d');
var canv2= document.getElementById('cnv2');
var ctx2  = canv2.getContext('2d');

var img = new Image();
var imgW, imgH;
var translateX, translateY;
var axisFactor = 5;
var newCanvasSize;
var rot = 0;

function rotate(){
    rot++;
    //This is without resize
    translateX = cnv.width/axisFactor;
    translateY = cnv.height/axisFactor
    ctx.clearRect(0,0,imgW,imgH);
    ctx.save();
    ctx.translate(translateX,translateY);
    ctx.rotate(15*rot*0.0174532925);
    ctx.drawImage(img,-translateX,-translateY);
    ctx.restore();
    //Resizing Canvas - this part is creating problem
    var w = imgW;
    var h = imgH;
    
    var newWidth,newHeight;
    var c = Math.cos(15*rot*0.0174532925);
    var s = Math.sin(15*rot*0.0174532925);
    
    if (s < 0) { s = -s; }
    if (c < 0) { c = -c; }
    newWidth = h * s + w * c;
    newHeight = h * c + w * s ;
    
    cnv2.width = newCanvasSize*2;
    cnv2.height= newCanvasSize*2;
    
    translateX = cnv2.width/2;
    translateY = cnv2.height/2;
    ctx2.clearRect(0,0,cnv2.width,cnv2.height);
    ctx2.save();
    ctx2.translate(translateX,translateY);
    ctx2.rotate(15*rot*0.0174532925);
    ctx2.drawImage(img,-img.width/axisFactor,-img.height/axisFactor);
    ctx2.restore();
}

function init(){
    img.onload = function(){
        imgW = img.width;
        imgH = img.height;
        ctx.drawImage(img,0,0,imgW,imgH);
        ctx2.drawImage(img,0,0,imgW,imgH);
        newCanvasSize = Math.sqrt(Math.pow(img.width,2)+Math.pow(img.height,2))*(1-1/axisFactor);
    }
    img.src = document.getElementById('cnvSampl').toDataURL();
    document.getElementById('rotate').onclick = function(){
         rotate(); 
    };
}
init();

#cnv,#cnv2{
    border:1px solid #ccc
}

<button id="rotate">Rotate 15deg</button><br />
<canvas width="95" height="95" id="cnv"></canvas>
<canvas width="95" height="95" id="cnv2"></canvas>

<canvas width="95" height="95" id="cnvSampl" hidden></canvas>