Question

我有一个简单的剑形图像（向上绘制），处于“开放世界”的游戏设置中，因此玩家可以在世界各地移动到所有坐标。我想用剑指向鼠标。

我的问题（我认为）是世界坐标和网页坐标不匹配。例如，播放器可以位于（6000,6000）位置，而鼠标坐标仅在0到1600之间（或者屏幕的宽度是什么）。最重要的是，网页并不总是存在于同一个地方。

到目前为止的想法：

所以我需要计算鼠标相对于画布的位置，反之亦然。

我正在使用的公式。这适用于XNA的一个较旧的项目：

var xdir = mouse.x - swordcenter.x;
var ydir = mouse.y - swordcenter.y;

var theta = (Math.atan2( ydir, xdir ) - Math.PI/2.0) * (180.0/Math.PI);

我觉得解决方案应该比我想的更简单，但到目前为止还没有公式。有什么想法吗？

所以我想问的问题是为什么这不起作用？我最好的猜测是因为坐标的不同。我无法弄清楚如何将其考虑在内。

编辑：我已经想出如何将其考虑在内。通过以下代码，鼠标位置被放入游戏坐标中。因此，如果鼠标悬停在播放器上，则鼠标位置和播放器位置相等。 但是，鼠标移动时图像仍会快速旋转。

document.addEventListener('mousemove', function(e){ 

    mouse.x = e.clientX || e.pageX; 
    mouse.y = e.clientY || e.pageY; 

    var view = document.getElementById('viewport');
    var rect = view.getBoundingClientRect();

    mouse.x -=  rect.left;
    mouse.y -=  rect.top;

    var camX = clamp(x - canvas.width/2, -1000, 1000 - canvas.width);
    var camY = clamp(y - canvas.height/2, -1000, 1000 - canvas.height);

    mouse.x += camX;
    mouse.y += camY;

}, false);

编辑2：以下是我如何获得角度：

var getAngle = function() {

    var xdir = mouse.x - x;//where x and y are the sword center
    var ydir = mouse.y - y;

    var theta = Math.atan2( ydir, xdir  ) * (180.0/Math.PI);     

    return theta;
}

编辑3：以下是我绘制图片的方式：

var draw = function(ctx) {

    ctx.fillRect(x-15, y-15, 30, 30);//background player rect

    ctx.save();
    ctx.translate(x, y);//x and y is the center of the sword/player     
    ctx.rotate(getAngle());     

    //this correctly draws the sword on top of the player rect, except for rotation
    ctx.drawImage(stanceTexture, -stanceTexture.width/2, -stanceTexture.height/2);

    ctx.restore();
};

Answer 1

你不需要三角学。基本矢量微积分就足够了：

const sword_length = 10;

var sword_x_start = 0; 
var sword_y_start = 0;

var mouse_x = ...;  // current mouse position
var mouse_y = ...;

var dx = (mouse_x - sword_x_start); 
var dy = (mouse_y - sword_y_start);

// sword to mouse distance 
var length = Math.sqrt( dx*dx + dy*dy );

// unit vector, see: http://en.wikipedia.org/wiki/Unit_vector 
// in sword to mouse direction: 
var unit_v_x = dx / length;
var unit_v_y = dy / length;

// and now coordinates of the sword pointing to mouse:
var sword_x_end = sword_x_start + unit_v_x * sword_length ;
var sword_y_end = sword_y_start + unit_v_y * sword_length ;

Answer 2

在完成计算正确的“游戏中”鼠标位置的所有额外数学之后，事实证明我的画布上下文也需要弧度。很混乱。我发现的每一个其他帖子都会将值重新转换为度数（错误），所以我希望这可以帮助其他人。所以这是完整的答案，

document.addEventListener('mousemove', function(e){ 

    mouse.x = e.clientX || e.pageX; 
    mouse.y = e.clientY || e.pageY; 

    var view = document.getElementById('viewport');
    var rect = view.getBoundingClientRect();

    mouse.x -=  rect.left;
    mouse.y -=  rect.top;

    var camX = clamp(x - canvas.width/2, world.minX, world.maxX - canvas.width);
    var camY = clamp(y - canvas.height/2, world.minY, world.maxX - canvas.height);

    mouse.x += camX;
    mouse.y += camY;

}, false);


var getAngle = function() {

    var xdir = mouse.x - x;//where x and y are the sword center
    var ydir = mouse.y - y;

    //Note: I only subtract Math.PI/2 to flip the image 180 degrees.
    //      The value to subtract will depend on the original angle of your image
    var theta = Math.atan2( ydir, xdir  ) - Math.PI/2.0;     

    return theta;
}

var draw = function(ctx) {

    ctx.fillRect(x-15, y-15, 30, 30);//background player rect

    ctx.save();
    ctx.translate(x, y);//x and y is the center of the sword/player     
    ctx.rotate(getAngle());     

    //this correctly draws the sword on top of the player rect, except for rotation
    ctx.drawImage(stanceTexture, -stanceTexture.width/2, -stanceTexture.height/2);

    ctx.restore();
};

如何使对象指向鼠标

2 个答案: