Calculating which mouse axis x or y to track from a given angle of a draggle item

问题

Having been stuck on this for 4 days now, ive turned to the community for help.

I am attempting to calculate the distance given from a point, given the angle off the wall, all distances to wall items are from the left.

If dragging the item on wall A I know that I will need to track the mouse movement of the x axis If dragging the item on wall B I know that I will need to use a ratio of x and y to calculate the distance to the left If dragging the item on wall C I know that I will need to track the mouse movement on the y axis

My issue is programatically knowing which axis and how much of each axis to use depending on the angle of the wall.

My question is how do I know which x or y to use to do the calculation dependent on wall angle, or what ratio to use of x and y to come to the correct distance calculation.

this code is kind of working for 90 degree walls but will not work with angled walls, this is because if the wall angle is 0 or 3.14 then I know its a horizontal wall so I track X instead of Y

let position;
let x = mouse.x;
let y = mouse.y;

// if the item is less Tham Math.PI flip the distance
if (wall.angle < Math.PI / 2) {
    position = -(y - originY);
} else {
    position = y - originY;
}

// if the angle is either 0 or Math.PI use the x axis
if (wall.angle === Math.PI) {
    position = -(x - originX);
}

if (wall.angle === 0) {
    position = x - originX;
}

originX and originY are the original click points, and the x and y are mouse coordinates

I have seen the x = distance * Math.sin(wall.angle) and y = distance * Math.cos(wall.angle) but my issue is the distance has to be calculated from either the x or y mouse coordinate which is dictated by the wall angle, and needs to return a distance.

I have tried to calculate the distance from x, y, originX, originY with

Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2))

Semi working example below

https://engine.owuk.co.uk

回答1:

I ALMOST have it with this (weird format so I can understand it)

const sin = Math.sin(this.walls[this.dragItem.wall].angle);
const cos = Math.cos(this.walls[this.dragItem.wall].angle);

position =
   Math.round(
      (this.x - this.lastX) / this.scale + this.dragItem.origin.left * cos
   ) +
   Math.round(
      (this.y - this.lastY) / this.scale + this.dragItem.origin.left * sin
   )

;

回答2:

Final solution which works

let position;

const sin = Math.sin(this.walls[this.dragItem.wall].angle);
const cos = Math.cos(this.walls[this.dragItem.wall].angle);

position = Math.round(((this.x - this.lastX) / this.scale * cos + (this.y - this.lastY) / this.scale * sin) + this.dragItem.origin.left);

My confusion may have been down to my analysis of the issue, because some of the cos/sin were returning 6.xxxxxxxx as a floating point but this was wrong because of the exponent, which meant the actual number was correct...

I had to round and seem then reverse the rounding, to get to the solution, I just glad that 4 days of work is nearly done, now I just need to ratio x/y so weird angles work ok... but this is almost solved

来源：https://stackoverflow.com/questions/60514985/calculating-which-mouse-axis-x-or-y-to-track-from-a-given-angle-of-a-draggle-ite

标签

javascript

math

vector