1

キャンバスの中央に画像があり、マウスがキャンバス上にある方向を向くように画像を回転できるようにしたいと考えています。

マウスの位置に変数があり、画像をマトリックスに配置したので、現在、指定された値で中央で完全に回転します。次に、2つを接続する必要があります。

var characterRotation = 0;

function characterController(){

    ctxMain.clearRect(0, 0, gameWidth, gameHeight);

    var charWidth = 65;
    var charHeight = 85;

    var srcX = 0;
    var srcY = 619;
    var drawX = gameWidth/2 - charWidth/2;
    var drawY = gameHeight/2 - charHeight/2;


    ctxMain.setTransform(1, 0, 0, 1, drawX, drawY);
    ctxMain.rotate(characterRotation * Math.PI/180);

    characterRotation = mouseX*2 / mouseY*2; // ?? this is what needs to roate my character

    ctxMain.drawImage(imgSprite, srcX, srcY, charWidth, charHeight, -charWidth/2, -charHeight/2, charWidth, charHeight);


}
4

1 に答える 1

1

三角法から、あなたが探している角度は

sin( rotation ) = y / (x^2 + y^2)  # opposite/adjacent

ただし、最初に座標が中央に配置されていることを確認する必要があるため、mouseXとmouseYからゲーム幅の半分を引いてから、上記を使用して取得します。

rotation = Math.asin( y / (x*x + y*y)
于 2013-01-22T00:03:10.400 に答える