1

私はキャンバス要素にかなり慣れていませんが、可能性があると思うので、もっと学びたいと思っています。私は数年前にいくつかのopenGLを学びましたが（あいまいですが）、覚えていることはほとんどありません。そうは言っても、長方形などのオブジェクトをその中心または原点の周りに移動するにはどうすればよいでしょうか。その中心を中心に回転する方法を知っています。原点に移動し、回転させてから元に戻します。十分に単純です。私はそれを中心に翻訳するために同じコンセプトを試みましたが、役に立ちませんでした. 翻訳ポイントはまだ左上隅にあり、希望する中央にはありません。私がそれを行う方法に関するヒントはありますか？これがばかげた質問ではないことを願っています.

var width = 500;
var height = 400;
var x;
var y;
var rot;
var mx = 2;
var my = 2;

function init() {
    x = 0;
    y = 0;

    setInterval(draw, 1000 / 60);
}
function draw() {
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.clearRect(0, 0, width, height);

    ctx.save();
    ctx.translate(x, y);
    ctx.fillStyle = "white";
    ctx.strokeRect(0, 0, 30, 30);
    ctx.restore();

    document.getElementById("x").innerHTML = x;
    document.getElementById("y").innerHTML = y;
}

document.onkeydown = function(e) {
    var event = e || window.event;

    /*if(x + mx > canvas.width - 15 || x + mx < 15) {
        x = (x + mx > canvas.width - 15) ? canvas.width - 15 : 15;
    }*/

    if(e.keyCode == 39) { // Right
        x = x + mx;
    }
    else if(e.keyCode == 37) { // Left
        x = x - mx;
    }
}
4

2 に答える 2

0

翻訳変換がどのように機能するかについて混乱しているようです。回転とスケールの変換には乗算が含まれるため、変換の原点が重要になります。回転またはスケールの場合、変換して変換の原点を設定し、回転またはスケールを実行してから、必要に応じて平行移動します。

ただし、変換されるすべてのポイントが同じ量だけ移動するため、変換は単なる加算です。乗算は含まれないため、変換の原点は重要ではありません。長方形を5ピクセル左に移動する場合は、各X座標から5を引く変換を作成するだけです。

たとえば、左上隅がに(0, 0)あり、右下隅がにあるキャンバスに長方形が描かれているとします(x, y)（その中心はになります(x/2, y/2)）。長方形の左上が(-x/2, -y/2)で、右下が(x/2, y/2)（中心が(0, 0)）になるようにキャンバスの原点を移動する場合は、原点を。で変換しx/2, y/2ます。

使用している言語または環境を指定していませんが、例に基づいて、おそらく次のようなものを使用します。

ctx.transform(x/2, y/2)
于 2012-09-27T06:23:06.597 に答える