3

画像データを失うことなく、HTML5キャンバス上で画像を回転させる方法は？つまり、回転によって画像のサイズが大きくなる場合は、画像が切り取られないように、Canvasコンテナも拡張したいと思います。次の画像の方が適切かもしれません。 ここに画像の説明を入力してください

茶色のボックスは、実際にはCanvasを包むコンテナです。キャンバスを回転させたときに、画像が途切れないように（および画像に合わせてキャンバスを）拡大したいと思います。

更新： 画像はCanvasよりも大きくなる可能性があるため、バウンディングボックス方式を使用して、画像に合わせて親コンテナとの比例サイズを計算しています。したがって、Canvasのstyleサイズは計算されたものになり、高さと幅の属性は画像のサイズになります。

どんな助けでも大歓迎です！

4

1 に答える 1

4

この関数は、回転した画像にぴったり合うようにキャンバスのサイズを変更します。画像の幅と高さ、および現在の回転角度を度単位で指定する必要があります。

[編集：おっと！角度をラジアンに変換する必要がありました...そして... cssの幅/高さではなく、キャンバスの幅/高さを変更する必要があります]

function resizeCanvasContainer(w,h,a){
var newWidth,newHeight;
  var rads=a*Math.PI/180;
  var c = Math.cos(rads);
  var s = Math.sin(rads);

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

var canvas = document.getElementById('canvas');
canvas.width = newWidth + 'px';
canvas.height = newHeight + 'px';
}
于 2013-02-05T07:13:35.460 に答える