0

私はキャンバスに慣れていないので、これは少し足りない質問です。キャンバス領域に完全に収まるように、キャンバス内に配置した画像を回転させる必要があります。以下のコードスニペットでは、画像はうまく回転していますが、キャンバスの長方形に合わせる方法がわかりません。三角法で数学的アプローチを使用することはできますが、複雑すぎると思います:)

キャンバス領域に合わせてコンテキストを回転させる
（出典：iconizer.net） 

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では、回転した画像を目的の座標で配置するだけで非常に簡単に実行できましたが、キャンバスではそうではありません。助けてください ：）

4

2 に答える 2

0

自分で問題を解決しました。しかし、それは少し複雑です。誰かがより最適な解決策を見つけたら、それは本当に私を助けてくれるでしょう:)

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

    });
    });

于 2013-01-11T15:20:35.540 に答える
-1

これはあなたが探しているものですか？

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メソッド呼び出しで画像をオフセットする必要はありません。

于 2013-01-11T08:24:55.550 に答える