1

座標系を回転させた後、新しい軸に沿って移動しています。回転する前に軸に沿って変換することは何とか可能ですか?

アイデアは、ユーザーが画像をアップロードし、それを回転、ズーム、ビューポートの中央に移動できるというものです。どういうわけか、これらすべての機能を一度に達成できませんでした。

助言がありますか？

編集

つまり、キャンバスがあります。そこに絵を描きます。次に、それを 90° 回転させ、X 軸に平行移動させます。画面を下に移動します。軸が回るからです。

編集

これは、変換に使用するコード スニペットです。画像は常に (0,0) ポイントで回転します。そのため、中間点で回転するように翻訳します。その後、オフセット ポイントに画像を描画します。

    p.push();
        p.translate(canvasWidth/2, canvasHeight/2);
        p.rotate(angle * p.TWO_PI/360);

        var x = -loadedImage.width/2  - offsetX;
        var y = -loadedImage.height/2 - offsetY;

        p.image(loadedImage, x, y);
    p.pop();

編集

最初に平行移動してから回転することにしました。平行移動は正しくなりますが、間違ったピボット ポイントを中心に回転します。私が推測するすべてを持つことはできません。

4

1 に答える 1

0 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save();
ctx.fillStyle="red";
ctx.translate(100,0);
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(0, 0, 100, 50);
ctx.restore();
ctx.fillRect(100,0,50,50);

このコードを試してください:コードでfillRectの代わりにdrawImageを使用してください

于 2015-07-14T11:11:43.270 に答える