Question

这是一个有点蹩脚的问题，因为我是画布的新手。我需要旋转放置在画布中的图像，以使其完全适合画布区域。在下面给出的代码片段中，图像旋转正常，但我不知道如何使其适合画布矩形。我可以尝试使用三角学的数学方法，但我认为它太复杂了：）

rotating context to fit canvas area http://iconizer.net/img/temp/how-to-rotate.jpg

var imgObj=new Image();
imgObj.src='people.jpg';
var width=128;//dynamic
var height=128;//dynamic


$(imgObj).load(function() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    var rad = 30 * Math.PI / 180;

    context.translate(0 + width / 2, 0 + height / 2);

    context.rotate(rad);

    //draw the image    
    context.drawImage(imgObj,width / 2 * (-1),height / 2 * (-1),width,height);

    //reset the canvas  
    context.rotate(rad * ( -1 ) );
    context.translate((0 + width / 2) * (-1), (0 + height / 2) * (-1));
});

通过简单地将旋转的图像放置在所需的坐标上，在PHP中很容易，但在画布中并非如此。请帮助：）

Answer 1

自己解决了这个问题。虽然，它有点抱怨。如果有人找到更优化的解决方案，它将真正帮助我:)。



    $(document).ready(function(){
    var canvas=document.getElementById('iconCanvas');//<canvas id="iconCanvas" width="128" height="128"></canvas>
    var context=canvas.getContext("2d");
    var imgObj=new Image();
    imgObj.src='/images/temp/kdmconfig.png';
    var iconWidth=128;
    var iconHeight=128;
    var width=200;
    var height=128;
    var angleToRotate=30;


    $(imgObj).load(function() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        var rad = angleToRotate * Math.PI / 180;
        var newAngle=angleToRotate;

        //in case angle is >90
        if(newAngle>90 && newAngle<=180){
            newAngle=180-newAngle;
        }
        else if(newAngle>180 && newAngle<=270){
            newAngle=270-newAngle;
        }
        else if(newAngle>270){
            newAngle=360-newAngle;
        }

        context.translate(0 + iconWidth / 2, 0 + iconWidth / 2);

        context.rotate(rad);

        //draw the image

        if(width>height){
            var newImageHeight=Math.round((Math.cos((Math.atan(iconWidth/iconHeight)*180/Math.PI)*Math.PI/180)*height)/Math.sin((parseInt(90-newAngle)+Math.atan(iconWidth/iconHeight)*180/Math.PI)*Math.PI/180));

            var newImageWidth=Math.round(newImageHeight*iconWidth/iconHeight);
        }
        else{
            var newImageWidth=Math.round((Math.cos((Math.atan(iconHeight/iconWidth)*180/Math.PI)*Math.PI/180)*width)/Math.sin((parseInt(90-newAngle)+Math.atan(iconHeight/iconWidth)*180/Math.PI)*Math.PI/180));

            var newImageHeight=Math.round(newImageWidth*iconHeight/iconWidth);
        }


        context.drawImage(imgObj,newImageWidth / 2 * (-1),newImageHeight / 2 * (-1),newImageWidth,newImageHeight);

    });
    });

$(document).ready(function(){ var canvas=document.getElementById('iconCanvas');//<canvas id="iconCanvas" width="128" height="128"></canvas> var context=canvas.getContext("2d"); var imgObj=new Image(); imgObj.src='/images/temp/kdmconfig.png'; var iconWidth=128; var iconHeight=128; var width=200; var height=128; var angleToRotate=30; $(imgObj).load(function() { context.clearRect(0, 0, canvas.width, canvas.height); var rad = angleToRotate * Math.PI / 180; var newAngle=angleToRotate; //in case angle is >90 if(newAngle>90 && newAngle<=180){ newAngle=180-newAngle; } else if(newAngle>180 && newAngle<=270){ newAngle=270-newAngle; } else if(newAngle>270){ newAngle=360-newAngle; } context.translate(0 + iconWidth / 2, 0 + iconWidth / 2); context.rotate(rad); //draw the image if(width>height){ var newImageHeight=Math.round((Math.cos((Math.atan(iconWidth/iconHeight)*180/Math.PI)*Math.PI/180)*height)/Math.sin((parseInt(90-newAngle)+Math.atan(iconWidth/iconHeight)*180/Math.PI)*Math.PI/180)); var newImageWidth=Math.round(newImageHeight*iconWidth/iconHeight); } else{ var newImageWidth=Math.round((Math.cos((Math.atan(iconHeight/iconWidth)*180/Math.PI)*Math.PI/180)*width)/Math.sin((parseInt(90-newAngle)+Math.atan(iconHeight/iconWidth)*180/Math.PI)*Math.PI/180)); var newImageHeight=Math.round(newImageWidth*iconHeight/iconWidth); } context.drawImage(imgObj,newImageWidth / 2 * (-1),newImageHeight / 2 * (-1),newImageWidth,newImageHeight); }); });

Answer 2

这就是你要找的东西：

var newCanvas = document.createElement('canvas');
newCanvas.height="175";
newCanvas.width="175";
newCanvas.style.border="1px solid black";
document.body.appendChild(newCanvas);

var imgObj=new Image();
imgObj.src='people.jpg';
var width=imgObj.width;
var height=imgObj.height;

var angleToRotate = 30 * Math.PI / 180;

var requiredCanvasHeight = Math.sin(angleToRotate)*width+Math.cos(angleToRotate)*height;
var requiredCanvasWidth = Math.sin(angleToRotate)*height+Math.cos(angleToRotate)*width;
newCanvas.height=Math.ceil(requiredCanvasHeight);
newCanvas.width=Math.ceil(requiredCanvasWidth);

$(imgObj).load(function() {
    var context = newCanvas.getContext('2d');

    context.clearRect(0, 0, newCanvas.width, newCanvas.height);

    context.translate(0 + width / 2, 0);// + height / 2);

    context.rotate(angleToRotate);

    //draw the image    
    context.drawImage(imgObj, 0, 0, width, height);

    //reset the canvas  
    context.rotate(rad * ( -1 ) );
    context.translate((0 + width / 2) * (-1), (0 + height / 2) * (-1));
});

您无需在drawImage方法调用中偏移图像。

如何旋转画布上下文以使其完全适合画布区域？

2 个答案: